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

    Format/customize Form Collapse styles

    Asked by NALIAForms on February 16, 2015 at 06:05 PM

    Is it possible to turn the collapse heading into a black underline and black arrow (medium size) only.

    I am trying to achieve a more minimalistic look. I dont like the box 

    form collapse style form collapses form collapse styles form collapse CSS
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on February 16, 2015 at 09:04 PM

    Are you looking for something like this:

    http://form.jotformpro.com/form/43145921788968

    That form was entirely modified with Form Designer, our tool to help you to give them a great style.

    Please check our tutorial and do get back to us should you need further help.

    http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-

     

  • Profile Image

    Answered by NALIAForms on February 16, 2015 at 09:16 PM

    Not quite. I just want a header with a separator and a smaller black arrow,..no frame and no background color

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 17, 2015 at 05:35 AM

    Hello NALIAForms,

    Please take a look at the following form and see if this is what you are looking to achieve:  http://form.jotformpro.com/form/50472115126950? 

    You can inject the following custom css code in your form to set the border and background color transparent:

    .form-collapse-table {

    background: transparent !important;

    border-color: transparent !important;

    }

    Please be noted that arrow is actually an image and it is possible to to change the arrow image by injecting following custom css code (you need to replace the text "YOUR IMAGE URL" with your image URL):

    .form-collapse-right-hide {

    background: url(YOUR IMAGE URL) no-repeat center;

    }

    The following guide should help you on how to inject custom css code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by NALIAForms on February 17, 2015 at 11:32 AM

    Awesome! Thanks,,..however here is a example of the type of look I am going for. I hope this gives you an idea of the finished look I want. Also, can you please give me a example of your comment 

    "Please be noted that arrow is actually an image and it is possible to to change the arrow image by injecting following custom css code (you need to replace the text "YOUR IMAGE URL" with your image URL):"

    Can I just upload a image to replace the arrow??

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 17, 2015 at 12:43 PM

    Hello NALIAForms,

    What I meant was that, you can display your own image instead of default arrow image. Here are the steps you should follow:

    1. Upload the arrow image in your server. You can also upload image in JotForm as well and you may like to take a look at the following thread on how to upload image and use it in your form:  http://www.jotform.com/answers/393576 

    2. Grab the URL of the image you have uploaded.

    3. Paste the URL in place of the bold text in following custom css code:

    .form-collapse-right-hide {

    background: url(ARROW IMAGE URL SHOULD BE PASTED HERE) no-repeat center;

    }

    Example:

    If you arrow image URL is :  http://www.jotform.com/image/blackArrow.jpg

    then your custom css code should be:

    .form-collapse-right-hide {

    background: url(http://www.jotform.com/image/blackArrow.jpg) no-repeat center;

    }

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by NALIAForms on February 17, 2015 at 01:26 PM

    Cooool!! Thanks that helps!! How about separator? I want the seperator to show as illustrated in the example I sent. I want to remain constant. The explain you sent me only shows the separator when field collapse. Please advice

  • Profile Image

    Answered by Sean on February 17, 2015 at 03:25 PM

    Hello NALIAForms

    I am glad that my colleague suggestion is working out for you. I have also looked into your most recent request and I was able to amend the CSS code below to place a black separator between each collapse.

    Here is the test form:
    http://form.jotformpro.com/form/50476117080955

    .form-collapse-table {
    background: transparent !important;
    border-color: transparent !important;
    border-bottom: 2px solid #000 !important;
    }

    Do let us know if further assistance is needed.


    Cheers!

  • Profile Image

    Answered by NALIAForms on February 17, 2015 at 03:55 PM

    Man you guys are awesome!! I am about to upgrade my service plan! Your customer service is great!!! Thanks!

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on February 17, 2015 at 04:37 PM

    We are very happy to hear you are now a raving fan of us, never hesitate to contact us whenever you need our help.

    Cheers!