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

    Form Collapse--please help with my custom arrow icon

    Asked by clarkschool on February 26, 2016 at 11:48 AM

    Hi there,

    I am trying to use a custom arrow for the form collapse fields in my document.

    This is the arrow I'd like to use: http://vignette3.wikia.nocookie.net/4craft/images/1/1b/Left_Arrow_Red.png/revision/latest?cb=20140805210825

    But I can't figure out the correct CSS to be able to show the whole arrow--it keeps justifying left.

    Thanks for your help!

    Page URL:
    https://form.jotform.com/60494309623154

    icon arrow png thanks latest
  • Profile Image
    JotForm Support

    Answered by BJoanna on February 26, 2016 at 01:24 PM

    Is this what you wanted to achieve? 

     

    To achieve this I have downloaded your image to my computer. Then I have used Microsoft Office Picture Manager and I have re-sized your image. Then I have uploaded re-sized image to my form. 

    I have also added this CSS code to position image:

    .form-collapse-right-hide {

        padding-left : 15px;

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    This is URL of my re-sized image https://files.jotform.com/jufs/BJoanna/form_files/Arrowimage.png 

    Here is my cloned form: https://form.jotform.com/60564794100958 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by clarkschool on February 26, 2016 at 01:28 PM

    Excellent help--thank you! Really appreciate you going above and beyond.

  • Profile Image

    Answered by clarkschool on February 26, 2016 at 01:35 PM

    So that I may do this myself in the future:

    1. What are the percentage/pixel amounts that you used to resize the image?

    2. Are you using a specific tool to create a URL for an image saved locally? I've tried to used the URL created from saving in my Google docs, but that doesn't seem to work (it's as if Jotform does not like to or can't reach into GDocs and retrieve the image, or GDocs won't allow access).

  • Profile Image
    JotForm Support

    Answered by BJoanna on February 26, 2016 at 02:01 PM

    When I re-sized image I have set size of image to be 60 x 53 px

    Then I have uploaded image form my computer to JotForm. I used image field and I selected Upload Image File option. 

    Then I have chose image from my folder and uploaded image.

    Then I have copied Image Source.

    Finally I have pasted image source to Form Designer, instead of URL of previous image.

    Also thank you for your kind words. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by clarkschool on February 26, 2016 at 02:22 PM

    Ah ha! A new trick! Thank you!

  • Profile Image
    JotForm Support

    Answered by BJoanna on February 26, 2016 at 03:05 PM

    You're welcome :)

    Feel free to contact us if you have any other questions. 

  • Profile Image

    Answered by clarkschool on February 29, 2016 at 11:06 AM

    Hi again, what would I enter for code if I wanted the arrow's background to be transparent? It is currently white on gray, which I not what I'd like.

    Thank you!

     

    ETA: Nevermind--I figured out how to copy the one you linked to, so I was able to make it transparent in that way...

  • Profile Image
    JotForm Support

    Answered by BJoanna on February 29, 2016 at 11:59 AM

    Unfortunately it is not possible to make background of image transparent. Your original image that I used was transparent. I would suggest you to resize your original image and then add resized transparent image to your form. 

    You can also clone my form to your account and then use your cloned form. Inside of this guide you can find how to clone form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if you need further assistance.