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

    Adding an image to the Slider field.

    Asked by bubbanel on October 01, 2013 at 06:53 AM

    I would like to add an image to the Slider form entry. As well as the Current Text title.

     

    slider field add an image insert an image
  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2013 at 07:09 AM

    That should be feasible. Let me try something and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2013 at 08:19 AM

    Please have a look at this clone of your form. If that's what you meant, here's what to do:

    1. Inject the following CSS:

    #id_5 .form-textbox {
    padding-top: 150px;
    }

    (Depending on the height of the image to be inserted, the value of the padding may need to be adjusted.)

    2. Click the slider field and then go to the Power Tools menu and add the desired image to the form. (Clicking the slider field before adding the image, ensures that it's inserted immediately after the slider in the form's HTML but not where it will appear. That's where the next step comes in.)

    3. Inject the following CSS to reposition the image:

    #id_17 img {
    position: absolute;
    top: -180px;
    left: 260px;
    }

    Depending on the image's dimensions, you may need to adjust the values of the top and left declarations. Also, if fields were added to the form since your post, the ID in the selector will be different.

    To better understand the above, feel free to clone my clone and examine it.

    If you need further help with this, please let us know.


    Thanks

  • Profile Image

    Answered by bubbanel on October 01, 2013 at 09:53 AM
    I have followed the instructions below but I cannot get the image to be shown in the slider field. Can you take a look at my update form and see what I have done wrong. You will also see the image I want to use but I

    Thanks

  • Profile Image

    Answered by bubbanel on October 01, 2013 at 09:54 AM

    I have followed the instructions but I cannot get the image to be shown in the slider field. Can you take a look at my update form and see what I have done wrong. You will also see the image I want to use but I

     

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by guilledutra on October 01, 2013 at 10:27 AM

    Hi,

    It seems that after you change the image, the id corresponding to that image field also changed. Could you substitute your current custom css for this other one.

    #id_5 .form-textbox {
    padding-top: 150px;
    }

    #id_13 img {
    position: absolute;
    top: -180px;
    left: 260px;
    }

     

    hope it helps

    Thanks

  • Profile Image

    Answered by pinoytech on October 01, 2013 at 10:29 AM

    Hi,

    I've fixed the issue of your form for you. Kindly check: http://www.jotform.co/form/32515073207850

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2013 at 11:06 AM

    @bubbanel

    If the vertically stretched appearance of the image isn't desireable, please make the following adjustments:

    1. With the form loaded in the form builder, click the image and then the Width button in the toolbar at the top of the form builder and increase the value there to 145:


    2.
    Alter the injected CSS as follows:

    #id_5 .form-textbox {
    padding-top: 150px;
    }

    #id_13 img {
    position: absolute;
    top: -207px;
    left: 225px;
    }

    3. Save the form when done

  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2013 at 11:11 AM

    Incidentally, as you'll notice in the screenshot, the image will not appear correctly positioned in the form builder. However, it will be correct at the form's URL. The result should look the same as this clone.


    Cheers

  • Profile Image

    Answered by bubbanel on October 01, 2013 at 11:21 AM
    Thanks for your help. It is working perfectly now.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2013 at 11:45 AM

    Glad we could help.