Format/customize Form Collapse styles

  • NALIAForms
    Asked on February 16, 2015 at 6: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 

  • Jeanette JotForm Support
    Replied on February 16, 2015 at 9: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-

     

  • NALIAForms
    Replied on February 16, 2015 at 9:16 PM

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

  • Ashwin JotForm Support
    Replied on February 17, 2015 at 5: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!

  • NALIAForms
    Replied 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??Format/customize Form Collapse styles Image 1 Screenshot 20

  • Ashwin JotForm Support
    Replied 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!

  • NALIAForms
    Replied on February 17, 2015 at 1: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

  • Sean
    Replied on February 17, 2015 at 3: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!

  • NALIAForms
    Replied on February 17, 2015 at 3:55 PM

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

  • Jeanette JotForm Support
    Replied on February 17, 2015 at 4: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!