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

    How to have multiple collapse bar forms on one page?

    Asked by scout555 on July 16, 2012 at 01:02 AM

    Hello,

    I was trying to put two forms, which both contained collapse bars on the same page, but now the bars won't open. I used the following code:                                                

     

    <script src="//max.jotfor.ms/min/g=jotform?3.0.3729" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init();

    </script>

    <link target="_blank" href="http://max.jotfor.ms/min/g=formCss?3.0.3729" rel="nofollow noopener" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotform.us/css/styles/nova.css?3.0.3729" rel="nofollow noopener" />

    <style type="text/css">

        .form-label{

            width:0px !important;

        }

        .form-label-left{

            width:0px !important;

        }

        .form-line{

            padding-top:0px;

            padding-bottom:0px;

        }

        .form-label-right{

            width:px !important;

        }

        .form-all{

            width:255px;

            background:Transparent;

            color:#555 !important;

            font-family:'Lucida Grande';

            font-size:13px;

        }

    .form-collapse-mid {

    font-size: 14px !important;

    }

    .form-line{

    padding:0;

    }.form-collapse-table,

    .form-collapse-mid,

    .form-collapse-right,

    .form-collapse-right-hide {

    height:30px;

    }#collapse-text_1,

    #collapse-text_5,

    #collapse-text_6,

    #collapse-text_3,

    #collapse-text_4 {

    margin-top:7px;

    }.form-section, .form-section-closed {

    margin-bottom: 0px !important;

    }

    a {

    color: #411CE6

    }

     

    </style>

     

    <form class="jotform-form" action="http://submit.jotform.us/submit/21968651272157/" method="post" name="form_21968651272157" id="21968651272157" accept-charset="utf-8">

      <input type="hidden" name="formID" value="21968651272157" />

      <div class="form-all">

        <ul class="form-section">

        </ul>

        <ul class="form-section-closed" style="height: 60px;clear:both;" id="section_3">

          <li id="cid_3" class="form-input-wide">

            <div class="form-collapse-table" id="collapse_3"><span class="form-collapse-mid" id="collapse-text_3">Treasury Securities</span><span class="form-collapse-right form-collapse-right-hide">&nbsp;</span>

            </div>

          </li>

          <li class="form-line" id="id_4">

            <div id="cid_4" class="form-input-wide">

              <div id="text_4" class="form-html">

                <p>

                  <a title="Treasury Bills" target="_blank" href="http://ampleassets.webnode.com/treasury-bills/" rel="nofollow noopener" >Treasury Bills</a>

                </p>

                <p>

                  <a title="Treasury Notes" target="_blank" href="http://ampleassets.webnode.com/treasury-notes/" rel="nofollow noopener" >Treasury Notes</a>

                </p>

                <p>

                  <a title="Treasury Bonds" target="_blank" href="http://ampleassets.webnode.com/treasury-bonds/" rel="nofollow noopener" >Treasury Bonds</a>

                </p>

                <p>

                  <a title="Treasury Inflation" target="_blank" href="http://ampleassets.webnode.com/treasury-inflation/" rel="nofollow noopener" >Treasury Inflation</a>

                </p>

                <p>

                  <a title="EE/E Savings Bonds" target="_blank" href="http://ampleassets.webnode.com/ee-e-savings-bonds/" rel="nofollow noopener" >EE/E Savings Bonds</a>

                </p>

                <p>

                  <a title="I Savings Bonds" target="_blank" href="http://ampleassets.webnode.com/i-savings-bonds/" rel="nofollow noopener" >I Savings Bonds</a>

                </p>

                <p>

                  <a title="Auctions" target="_blank" href="http://ampleassets.webnode.com/auctions/" rel="nofollow noopener" >Auctions</a>

                </p>

                <p>

                  <a title="Payroll Securities" target="_blank" href="http://ampleassets.webnode.com/payroll-securities/" rel="nofollow noopener" >Payroll Securities</a>

                </p>

              </div>

            </div>

          </li>

          <li style="display:none">

            Should be Empty:

            <input type="text" name="website" value="" />

          </li>

        </ul>

      </div>

      <input type="hidden" id="simple_spc" name="simple_spc" value="21968651272157" />

      <script type="text/javascript">

      document.getElementById("si" + "mple" + "_spc").value = "21968651272157-21968651272157";

      </script>

    </form>

     

    <script src="//max.jotfor.ms/min/g=jotform?3.0.3729" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init();

    </script>

    <link target="_blank" href="http://max.jotfor.ms/min/g=formCss?3.0.3729" rel="nofollow noopener" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotform.us/css/styles/nova.css?3.0.3729" rel="nofollow noopener" />

    <style type="text/css">

        .form-label{

            width:150px !important;

        }

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:0px;

            padding-bottom:0px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:255px;

            color:#050505 !important;

            font-family:'Lucida Grande';

            font-size:13px;

        }

        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{

            color:#050505;

        }

     

        /* Injected CSS Code */

    .form-collapse-mid {

    font-size: 14px !important;

    }

    .form-line{

    padding:0;

    }.form-collapse-table,

    .form-collapse-mid,

    .form-collapse-right,

    .form-collapse-right-hide {

    height:30px;

    }#collapse-text_1,

    #collapse-text_5,

    #collapse-text_6,

    #collapse-text_3,

    #collapse-text_4 {

    margin-top:7px;

    }.form-section, .form-section-closed {

    margin-bottom: 0px !important;

    }

    a {

    color: #411CE6

    }

        /* Injected CSS Code */

    </style>

     

    <form class="jotform-form" action="http://submit.jotform.us/submit/21968438022153/" method="post" name="form_21968438022153" id="21968438022153" accept-charset="utf-8">

      <input type="hidden" name="formID" value="21968438022153" />

      <div class="form-all">

        <ul class="form-section">

        </ul>

        <ul class="form-section-closed" style="height: 60px;clear:both;" id="section_1">

          <li id="cid_1" class="form-input-wide">

            <div class="form-collapse-table" id="collapse_1"><span class="form-collapse-mid" id="collapse-text_1">Planning Provisions</span><span class="form-collapse-right form-collapse-right-hide">&nbsp;</span>

            </div>

          </li>

          <li class="form-line" id="id_2">

            <div id="cid_2" class="form-input-wide">

              <div id="text_2" class="form-html">

                <p>

                  <a title="Retirement" target="_blank" href="http://ampleassets.webnode.com/retirement/" rel="nofollow noopener" >Retirement</a>

                </p>

                <p>

                  <a title="Education" target="_blank" href="http://ampleassets.webnode.com/education/" rel="nofollow noopener" >Education</a>

                </p>

                <p>

                  <a title="Estate" target="_blank" href="http://ampleassets.webnode.com/estate/" rel="nofollow noopener" >Estate</a>

                </p>

                <p>

                  <a title="Savings Bonds" target="_blank" href="http://ampleassets.webnode.com/savings-bonds/" rel="nofollow noopener" >Savings Bonds</a>

                </p>

                <p>

                  <a title="Will" target="_blank" href="http://ampleassets.webnode.com/will/" rel="nofollow noopener" >Will</a>

                </p>

              </div>

            </div>

          </li>

          <li style="display:none">

            Should be Empty:

            <input type="text" name="website" value="" />

          </li>

        </ul>

      </div>

      <input type="hidden" id="simple_spc" name="simple_spc" value="21968438022153" />

      <script type="text/javascript">

      document.getElementById("si" + "mple" + "_spc").value = "21968438022153-21968438022153";

      </script>

    </form>

    Page URL:
    ampleassets.webnode.com

  • Profile Image

    Answered by pinoytech on July 16, 2012 at 02:48 AM

    Hi there,

    Thank you for your inquiry.

    There are few possible options to embed multiple forms on a single page:

    1. Using iFrame -  you can add more than 1 iFrame in a single page without having it to conflict.

    2. Adding 1 script embedded form and 1 iFrame

    3. Adding 2 HTML full source codes

    If you need further assistance, feel free to contact us again anytime.

    Have a great day!