How to add text overlay to image by using CSS

  • Jena_jena
    Asked on February 26, 2021 at 1:05 PM

    I have a free account and do not know the css code for text overlay. Can you please assist?

    Below is the image and I want each blank space to be fillable on the form when I send out to clients.


    1614434541 603a50eda3979 PROCESSIONAL OR Screenshot 10

  • Ahmed_S
    Replied on February 26, 2021 at 5:36 PM

    Greetings,

    Please allow me some time to work on the custom CSS and will get back to you very soon with a demo.

    Thank you for your patience.

  • Ahmed_S
    Replied on February 26, 2021 at 6:14 PM

    Hello again,

    You can add a text overlaying an image by using a paragraph, an image and using a custom CSS code, you need to copy the below code and inject it into your form, please check this guide for how to inject custom CSS into your form.

    #cid_4{
      position: absolute !important;
    top: 60px !important;
    z-index: 10 !important;
    }

    in my demo form the paragraph element id was cid_4, you will need to check the of your text element and update the CSS with it, you can check for the element id by using Inspector in the Developer Tools of your browser (you can access it by pressing F12 or Ctrl + Shift + i on keyboard).

    1614380896 60397f6030051 1 Screenshot 10

    Please check the demo form in this link https://form.jotform.com/210566926504053
    you can also clone it to your account to review it in Form Builder, please check this guide for how to clone a form.

    Let us know if you need further assistance.


  • Jena_jena
    Replied on February 27, 2021 at 9:04 AM

    Unfortunately I was not able to successfully do what is needed. Can you please assist based on the photo below that I would like to use? I need each blank space to be fillable by my client when I send out. Thanks!


    1614434678 603a51767bf97 PROCESSIONAL OR Screenshot 10

  • Gaetan_B
    Replied on February 27, 2021 at 9:55 AM

    Hello,

    I have checked your form and I see that you would like to create an overlay effect over the image so that it looks like your clients are actually filling in the form.


    I do think that it would provide more trouble than anything else to do this with custom CSS.

    And also, bear in mind that it would be so customized that if you make a change on your end, everything might break.


    Would it be fine for you if we help you recreate this image you have using the different elements?

    You will then simply have to map them to your PDF, and your clients will have a perfectly filled PDF.


    Hope this helps.

    Do not hesitate to reach out if you need further assistance.

  • Jena_jena
    Replied on February 27, 2021 at 9:59 AM

    Yes, that would be fine. Can you please explain how I should do this?

  • Richie JotForm Support
    Replied on February 27, 2021 at 11:42 AM

    To clarify, do you want to place the text fields on the image overlays?

    1614443622 603a74666b2b9 1 Screenshot 10

    You can add an image field and use your image.

    1614443788 603a750ca5c8c 2 Screenshot 21

    You can then use custom CSS to align your fields in the image.

    https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    1614444003 603a75e357414 1 Screenshot 32

    Sample form:https://form.jotform.com/210574347473054

    You may clone my form by following this guide:https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

    Let us know if this fits your requirements.

  • Jena_jena
    Replied on February 27, 2021 at 4:56 PM

    yes, your above image with the orange boxes is exactly what I am needing. I do not know how to use a CSS code and manipulate each box to be placed exactly where it's needed. Is there a way to insert a spreadsheet into the form and have my client fill it out that way?

  • Girish JotForm Support
    Replied on February 28, 2021 at 3:45 AM

    You can use a Spreadsheet widget on the form: https://www.jotform.com/help/598-how-to-set-up-the-spreadsheet-widget

    Would that help?

  • Jena_jena
    Replied on February 28, 2021 at 8:49 AM

    yes, that's a fine alternative. How do I edit the width so that the text is not cut off? Also, is there a way for me to bold the text that I have inserted into the table? thank you!

    1614520133 603b9f45301ed Capture Screenshot 10

  • Gaetan_B
    Replied on February 28, 2021 at 10:14 AM

    Hello,

    Could you access the widget's settings (the little magic wand icon at the bottom) and go to Custom CSS:

    1614525101 603bb2adaa863  Screenshot 10


    You will then simply have to paste the following code and click on Update Widget to save it:

    #tableContainer {
      width: 100%;
    }
    table {
      width: 100%;
    }
    th, td > input {
      font-weight: bold !important;
    }



    Hope this helps.

    Do not hesitate to reach out if you need further assistance.