Put output on image

  • Resolved hheyhey568

    (@hheyhey568)


    1 year, 6 months ago

    Hello team,

    I have a calculation which is working and it has two input fields and two output fields. In this calculation, I have added an image. I want to put this image at the top centre of the calculation and I want to show both duplicate copy of input fields and output fields at very specific location of the image. The idea is to show input and output on the image visually.
    Can you please help me to achieve it ?

    Thank you ,


Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @hheyhey568

    The process is simple but requires that you determine the correct position of every tag. Assuming your calculated fields are the fieldname1 and fieldname2. You can insert an “HTML Content” field in the form with three tags in its content:

    <IMG src="https://www.yourwebsite.com/image-path/image.png">
<div data-cff-field="fieldname1" style="position:absolute;z-index:9999;display:inline-block;top:20px;left:20px"></div>
<div data-cff-field="fieldname2" style="position:absolute;z-index:9999;display:inline-block;top:40px;right:20px"></div>

    Finally, you can tick the checkboxes in the calculated fields to hide them because you will display their results in the div tags above. In the previous code, you must modify the values of the top, left, and right CSS rules to set the results in the preferred position over the image.

    Best regards.

    Thread Starter hheyhey568

    (@hheyhey568)

    Thank you. How to make this image at the top and center of the CFF form.

    Plugin Author codepeople

    (@codepeople)

    Hello @hheyhey568

    Insert the “HTML Content” as the first field in the form into a div tag with the CSS rule, text-align:center

    <div style="text-align:center;"><IMG src="https://www.yourwebsite.com/image-path/image.png"></div>
<div data-cff-field="fieldname1" style="position:absolute;z-index:9999;display:inline-block;top:20px;left:20px"></div>
<div data-cff-field="fieldname2" style="position:absolute;z-index:9999;display:inline-block;top:40px;right:20px"></div>

    Please, note this question is not about the plugin. It is specific to your project. If you need a custom coding service to implement your project, you should contact us via the plugin website:

    https://cff.dwbooster.com/customization

    Best regards.

    Thread Starter hheyhey568

    (@hheyhey568)

    Thanks, it is working but how to remove the gray area around the image. My image takes center of the top section of the CFF but there is grey area around it. Can we remove it or add a different color same as website background color?

    Also how to make the text color other than black as it is kind of matching with the color of image background.

    • This reply was modified 1 year, 6 months ago by hheyhey568.
    Plugin Author codepeople

    (@codepeople)

    Hello @hheyhey568

    Our plugin does not include any background color around images. As I’m not checking your form in action, I assume this color is inherited from the theme active on your website or another installed plugin.

    Learn more about customizing the form and fields design by reading the following post in the plugin blog:

    https://cff.dwbooster.com/blog/2020/01/12/form-design

    As I’ve mentioned in other support threads, we do not implement user projects via the WordPress forum. If you have other questions specific to your project, you should contact us through the plugin website.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Put output on image’ is closed to new replies.