How to have multiple collapse bar forms on one page?

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

  • Profile Image
    pinoytech
    Answered 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!