What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I overlay a text entry box over an image?

    Asked by MailWorks on October 28, 2014 at 10:28 AM

    Hello,

     

    I am trying to create a form that allows a user to enter text over an image background.  For example, I have an image called 'placemat', and I want visitors to enter a message so it shows on the placemat:

     

    I also want to format the text in that specific text box to a script type of font.

    I will be adding other elements to the form as well, such as payment, donation options, etc. So those would be in standard text.  I'm hoping that the placemat image can be set in perhaps a table cell, and then have the text entry overlay the placement image?

    Is this possible?

    Thanks,

    Peter

     

    create a form JotForm uploads image overlay image field ID ID#
  • Profile Image

    Answered by Shadae on October 28, 2014 at 12:30 PM

    Hi Peter,

    Yes it is possible to achieve this using the drag and drop image and text area field in the form builder. You would then need to inject some CSS code for your text field to overlay the image. How to Inject CSS. You would then place all your other fields and widgets below the image and text area field.

    Is this what you are looking for:

    You can view my form here: http://www.jotformpro.com/form/43004910674954

    You can clone this form if you would like and make your desired changes: How to Clone a Form

    I hope this helps. Please inform us if you need additional assistance.

  • Profile Image

    Answered by MailWorks on October 28, 2014 at 12:45 PM

    Thanks Shadae!

     

    That's what I am looking for.  The only thing left, is that I want to change the font in that "Enter Your Christmas Message" box to more of a script style.  Not sure how I can use Google Fonts in text boxes so that visitors can see the identical font on various devices.

     

    Peter

  • Profile Image

    Answered by Shadae on October 28, 2014 at 02:15 PM

    Hi Peter,

    I am happy that this form is suitable for you.

    Please view this guide for how to customize your form to have Google fonts: http://www.jotform.com/help/100-Beautify-your-form-with-Google-Web-Fonts 

    I hope this helps, please inform us if you need additional assistance.

  • Profile Image

    Answered by MailWorks on November 25, 2014 at 01:14 PM

    "You would then need to inject some CSS code for your text field to overlay the image. How to Inject CSS." -  I took a look at the CSS code, but am confused as to where I find the lines that has the text field overlay the image.  I'm not good with CSS, but willing to learn.  Would appreciate you pointing out where I should look in the code, etc.

     

    Thanks!

     

    Peter

  • Profile Image

    Answered by Ben on November 25, 2014 at 02:28 PM

    Hi Peter,

    Please take a look at the jotform created by my colleague Shadae: http://www.jotformpro.com/form/43004910674954

    If that is what you would like to have and use just transfer it to your account following these steps: How to Clone an Existing Form from a URL

    Once you clone it, you can make the changes to it that you want to - such as adding extra fields.

    There would be no need to add or edit any CSS code since she had already done that for you.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by MailWorks on November 25, 2014 at 02:56 PM

    Hi Ben,

     

    Yes, I appreciate the jotform that was created, and I did clone as another form. However, I am working with different images, some are different sizes, so I am wanting to understand where I need to make changes in the CSS for alignment, bringing the text box in front of the image, etc.

     

    Peter

  • Profile Image

    Answered by Ben on November 25, 2014 at 04:24 PM

    Hi Peter,

    OK, thank you for explaining this.

    I will try to give you a quick and simple CSS guide here to achieve this, but if you have any questions do let us know.

    How to place the fields:

    1. Add the image then
    2. add the textarea that you want to have the text inserted into.

    Once this is set you can add one other field to see how it behaves as you move the text field over. On any jotform you are automatically created a submit button, so that should work nicely

    to move any fields we need to set them to:

    position:relative;

    This is very important so that we can properly move it over to some other location.

    Now we can not use:

    textarea
    {
       position:relative;
    }

    since that would change CSS for all textarea's instead we need to get the specific ID of that one: How to find Field IDs & Names

    Once we got the ID, it is simple.

    We use this:

    #example{
       position:relative;
    }

    Now as we want to move it we can use top, bottom, left and right.

    For example: We have added an image that is 300px tall and we want to move our textarea that is under it to its center.

    #example{
       position: relative;
       top: -200px;
    }

    You will notice that there is a - (minus) in the top value. Plus will always be used as current location + [amount] in [direction] where [direction] is top, bottom, left or right and the [amount] is %, px, em, etc.

    I suggest using px because images are shown in pixels and it gives you a nicer control.

    You will also noticed that I have placed -200 instead of -150 (half of 300px image height). This is because you will always have some padding or margins set up, so I automatically calculate approximate size by adding just a bit more pixels.

    Now as you change the -200px to something that got the textarea in the right vertical position for you, you can start moving it horizontally.

    I usually move it using left property, but if you are creating RTL (right to left) jotforms, it would be best to use right:

    Lets say that the right top value was -184px and the right left position was 200px the code would look something like this:

    #example{
       position: relative;
       left: 200px;
       top: - 184px;
    }

    That is it, you have now placed the text area in the right spot.

    Now doing this will change the layout for the other elements on the jotform and I like to fix this with margin property, specifically margin-bottom.

    The margin property to be set is usually less than the top value, but close to it, depending mostly what you want to achieve, lets say that this time it is the same as the top, so we would have code like this:

    #example{
       position: relative;
       left: 200px;
       top: - 184px;
       margin-bottom: 184px;
    }

    What this does is that it pushes the elements away from itself, giving you extra (invisible) space, getting the layout back as it would be if you did not move the element.

    I hope that I was able to explain this in the right manner, but do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by MailWorks on November 25, 2014 at 05:47 PM

    This is great Ben!

    Thanks so much for taking the time to explain. Really appreciate it.  I have tried entering various CSS as per your advice, and by trial and error, it's coming along.  The only thing I can't find is the image name or ID, even if I use the inspection element, I'm not sure how the image I brought in would have been tagged.

    Peter

  • Profile Image
    JotForm Support

    Answered by jonathan on November 25, 2014 at 07:56 PM

    Hi Peter,

    You were referring to this jotform http://www.jotformpro.com/form/43286804994973 ?

    Using the Chrome inspector, you can check the ID# of the image like this

    So for that image, the ID# is "#id_3" .

    Hope this help. Please tell us if you need further assistance.

    Thanks.