How to add text overlay to image by using CSS

  • Profile Image
    Jena_jena
    Asked on February 26, 2021 at 01: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

  • Profile Image
    Ahmed_S
    Answered on February 26, 2021 at 05: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.

  • Profile Image
    Ahmed_S
    Answered on February 26, 2021 at 06: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.png

    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.


  • Profile Image
    Jena_jena
    Answered on February 27, 2021 at 09: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

  • Profile Image
    Gaetan_B
    Answered on February 27, 2021 at 09: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.

  • Profile Image
    Jena_jena
    Answered on February 27, 2021 at 09:59 AM

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

  • Profile Image
    Richie_P
    Answered 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.png

    You can add an image field and use your image.

    1614443788_603a750ca5c8c_2.png

    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.png

    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.

  • Profile Image
    Jena_jena
    Answered on February 27, 2021 at 04: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?

  • Profile Image
    gerardw
    Answered on February 28, 2021 at 03: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?

  • Profile Image
    Jena_jena
    Answered on February 28, 2021 at 08: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.JPG

  • Profile Image
    Gaetan_B
    Answered 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_


    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.