Adding an image to the Slider field.

  • Profile Image
    bubbanel
    Asked 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.

     

  • Profile Image
    abajan
    Answered on October 01, 2013 at 07:09 AM

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

  • Profile Image
    abajan
    Answered 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
    bubbanel
    Answered 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
    bubbanel
    Answered 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
    guilledutra
    Answered 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
    pinoytech
    Answered 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
    abajan
    Answered 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
    abajan
    Answered 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
    bubbanel
    Answered on October 01, 2013 at 11:21 AM
    Thanks for your help. It is working perfectly now.

    Thanks

  • Profile Image
    abajan
    Answered on October 01, 2013 at 11:45 AM

    Glad we could help.