-
Jena_jenaAsked 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.
-
Ahmed_SReplied 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_SReplied 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).
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_jenaReplied 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!
-
Gaetan_BReplied 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_jenaReplied on February 27, 2021 at 9:59 AM
Yes, that would be fine. Can you please explain how I should do this?
-
Richie JotForm SupportReplied on February 27, 2021 at 11:42 AM
To clarify, do you want to place the text fields on the image overlays?
You can add an image field and use your image.
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
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_jenaReplied 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 SupportReplied 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_jenaReplied 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!
-
Gaetan_BReplied 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:
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.