Skip navigation
SPLEX2012
Currently Being Moderated

Adding Form to My website makes it Crash and not Start up

Nov 20, 2012 4:19 PM

This is my Site

http://splexcity.biz/test/html5/index.html#!/page_MORE

 

 

on the Menu Bar Clicking Services and on the Bottom Right is a button i made called Bookings.... In there it will open another section where i edit the words Insert Form Here. But When I do It Crashes Site My =(

 

 

-------------------------------------Code For booking Form------------

 

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

<script type="text/javascript">

  JotForm.init(function(){

     $('input_11').hint('ex: myname@example.com');

     JotForm.setCalendar("14");

     JotForm.setCalendar("19");

     $('input_17').hint('ex: 23');

     JotForm.initCaptcha('input_21');

     JotForm.highlightInputs = false;

  });

</script>

<link href="http://max.jotfor.ms/min/g=formCss?3.1.861" rel="stylesheet" type="text/css" />

<link type="text/css" rel="stylesheet" href="http://jotform.us/css/styles/industrial_dark.css?3.1.861" />

<style type="text/css">

   .form-label{

       width:150px !important;

   }

   .form-label-left{

       width:150px !important;

   }

   .form-line{

       padding-top:12px;

       padding-bottom:12px;

   }

   .form-label-right{

       width:150px !important;

   }

   .form-all{

       width:650px;

       background:#000000;

       color:#FFFFFF !important;

       font-family:'Helvetica';

       font-size:12px;

   }

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

       color:#FFFFFF;

   }


</style>


<link type="text/css" rel="stylesheet" href="http://jotform.us/css/styles/buttons/form-submit-button-simple_carolin a_blue.css?3.1.861"/>

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

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

<div class="form-all">

   <ul class="form-section">

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

       <div class="form-header-group">

         <h2 id="header_1" class="form-header">

           Your Information

         </h2>

       </div>

     </li>

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

       <label class="form-label-left" id="label_10" for="input_10">

         Full Name<span class="form-required">*</span>

       </label>

       <div id="cid_10" class="form-input"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="10" name="q10_fullName10[first]" id="first_10" />

           <label class="form-sub-label" for="first_10" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q10_fullName10[last]" id="last_10" />

           <label class="form-sub-label" for="last_10" id="sublabel_last"> Last Name </label></span>

       </div>

     </li>

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

       <label class="form-label-left" id="label_11" for="input_11">

         E-mail<span class="form-required">*</span>

       </label>

       <div id="cid_11" class="form-input">

         <input type="email" class="form-textbox validate[required, Email]" id="input_11" name="q11_email11" size="30" />

       </div>

     </li>

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

       <label class="form-label-left" id="label_8" for="input_8">

         Phone Number<span class="form-required">*</span>

       </label>

       <div id="cid_8" class="form-input"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="tel" name="q8_phoneNumber8[area]" id="input_8_area" size="3">

           -

           <label class="form-sub-label" for="input_8_area" id="sublabel_area"> Area Code </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="tel" name="q8_phoneNumber8[phone]" id="input_8_phone" size="8">

           <label class="form-sub-label" for="input_8_phone" id="sublabel_phone"> Phone Number </label></span>

       </div>

     </li>

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

       <div class="form-header-group">

         <h2 id="header_12" class="form-header">

           Event Information

         </h2>

       </div>

     </li>

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

       <label class="form-label-left" id="label_16" for="input_16">

         Event Type<span class="form-required">*</span>

       </label>

       <div id="cid_16" class="form-input">

         <select class="form-dropdown validate[required]" style="width:150px" id="input_16" name="q16_eventType">

           <option>  </option>

           <option value="Wedding Reception "> Wedding Reception </option>

           <option value="High School Dance"> High School Dance </option>

           <option value="Middle School Dance "> Middle School Dance </option>

           <option value="College Dance"> College Dance </option>

           <option value="Private Party "> Private Party </option>

           <option value="Corporate Event "> Corporate Event </option>

           <option value="Club Event"> Club Event </option>

           <option value="Other "> Other </option>

         </select>

       </div>

     </li>

     <li class="form-line form-line-column" id="id_14">

       <label class="form-label-top" id="label_14" for="input_14">

         Event Start Date & Time<span class="form-required">*</span>

       </label>

       <div id="cid_14" class="form-input-wide"><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="month_14" name="q14_eventStart[month]" type="text" size="2" maxlength="2" value="" /><span class="date-separate"> /</span>

           <label class="form-sub-label" for="month_14" id="sublabel_month"> Month </label></span><span class="form-sub-label-container"><input class="noDefault form-textbox validate[required]" id="day_14" name="q14_eventStart[day]" type="text" size="2" maxlength="2" value="" /><span class="date-separate"> /</span>

           <label class="form-sub-label" for="day_14" id="sublabel_day"> Day </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="year_14" name="q14_eventStart[year]" type="text" size="4" maxlength="4" value="" />

           <label class="form-sub-label" for="year_14" id="sublabel_year"> Year </label></span><span class="form-sub-label-container"><div id="at_14">

             at

           </div>

           <label class="form-sub-label" for="at_14">     </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="hour_14" name="q14_eventStart[hour]" type="text" size="2" maxlength="2" value="" /><span class="date-separate"> :</span>

           <label class="form-sub-label" for="hour_14" id="sublabel_hour"> Hour </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="min_14" name="q14_eventStart[min]" type="text" size="2" maxlength="2" value="" />

           <label class="form-sub-label" for="min_14" id="sublabel_minutes"> Minutes </label></span><span class="form-sub-label-container"><select class="form-dropdown validate[required]" id="ampm_14" name="q14_eventStart[ampm]">

             <option value="AM"> AM </option>

             <option value="PM"> PM </option>

           </select>

           <label class="form-sub-label" for="ampm_14">     </label></span><span class="form-sub-label-container"><img alt="Pick a Date" id="input_14_pick" src="http://jotform.us/images/calendar.png" align="absmiddle" />

           <label class="form-sub-label" for="input_14_pick">     </label></span>

       </div>

     </li>

     <li class="form-line form-line-column" id="id_19">

       <label class="form-label-top" id="label_19" for="input_19">

         Event Ending Date & Time<span class="form-required">*</span>

       </label>

       <div id="cid_19" class="form-input-wide"><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="month_19" name="q19_eventEnding[month]" type="text" size="2" maxlength="2" value="" /><span class="date-separate"> /</span>

           <label class="form-sub-label" for="month_19" id="sublabel_month"> Month </label></span><span class="form-sub-label-container"><input class="noDefault form-textbox validate[required]" id="day_19" name="q19_eventEnding[day]" type="text" size="2" maxlength="2" value="" /><span class="date-separate"> /</span>

           <label class="form-sub-label" for="day_19" id="sublabel_day"> Day </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="year_19" name="q19_eventEnding[year]" type="text" size="4" maxlength="4" value="" />

           <label class="form-sub-label" for="year_19" id="sublabel_year"> Year </label></span><span class="form-sub-label-container"><div id="at_19">

             at

           </div>

           <label class="form-sub-label" for="at_19">     </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="hour_19" name="q19_eventEnding[hour]" type="text" size="2" maxlength="2" value="" /><span class="date-separate"> :</span>

           <label class="form-sub-label" for="hour_19" id="sublabel_hour"> Hour </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" id="min_19" name="q19_eventEnding[min]" type="text" size="2" maxlength="2" value="" />

           <label class="form-sub-label" for="min_19" id="sublabel_minutes"> Minutes </label></span><span class="form-sub-label-container"><select class="form-dropdown validate[required]" id="ampm_19" name="q19_eventEnding[ampm]">

             <option value="AM"> AM </option>

             <option value="PM"> PM </option>

           </select>

           <label class="form-sub-label" for="ampm_19">     </label></span><span class="form-sub-label-container"><img alt="Pick a Date" id="input_19_pick" src="http://jotform.us/images/calendar.png" align="absmiddle" />

           <label class="form-sub-label" for="input_19_pick">     </label></span>

       </div>

     </li>

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

       <label class="form-label-left" id="label_15" for="input_15">

         Event Location<span class="form-required">*</span>

       </label>

       <div id="cid_15" class="form-input">

         <table summary="" class="form-address-table" border="0" cellpadding="0" cellspacing="0">

           <tr>

             <td colspan="2"><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-line" type="text" name="q15_eventLocation[addr_line1]" id="input_15_addr_line1" />

                 <label class="form-sub-label" for="input_15_addr_line1" id="sublabel_addr_line1"> Street Address </label></span>

             </td>

           </tr>

           <tr>

             <td colspan="2"><span class="form-sub-label-container"><input class="form-textbox form-address-line" type="text" name="q15_eventLocation[addr_line2]" id="input_15_addr_line2" size="46" />

                 <label class="form-sub-label" for="input_15_addr_line2" id="sublabel_addr_line2"> Street Address Line 2 </label></span>

             </td>

           </tr>

           <tr>

             <td width="50%"><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-city" type="text" name="q15_eventLocation[city]" id="input_15_city" size="21" />

                 <label class="form-sub-label" for="input_15_city" id="sublabel_city"> City </label></span>

             </td>

             <td><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-state" type="text" name="q15_eventLocation[state]" id="input_15_state" size="22" />

                 <label class="form-sub-label" for="input_15_state" id="sublabel_state"> State / Province </label></span>

             </td>

           </tr>

           <tr>

             <td width="50%"><span class="form-sub-label-container"><input class="form-textbox validate[required] form-address-postal" type="text" name="q15_eventLocation[postal]" id="input_15_postal" size="10" />

                 <label class="form-sub-label" for="input_15_postal" id="sublabel_postal"> Postal / Zip Code </label></span>

             </td>

             <td><span class="form-sub-label-container"><select class="form-dropdown validate[required] form-address-country" name="q15_eventLocation[country]" id="input_15_country">

                   <option selected> Please Select </option>

                   <option selected="selected" value="United States"> United States </option>

                   <option value="Abkhazia"> Abkhazia </option>

                   <option value="Afghanistan"> Afghanistan </option>

                   <option value="Albania"> Albania </option>

                   <option value="Algeria"> Algeria </option>

                   <option value="American Samoa"> American Samoa </option>

                   <option value="Andorra"> Andorra </option>

                   <option value="Angola"> Angola </option>

                   <option value="Anguilla"> Anguilla </option>

                   <option value="Antigua and Barbuda"> Antigua and Barbuda </option>

                   <option value="Argentina"> Argentina </option>

                   <option value="Armenia"> Armenia </option>

                   <option value="Aruba"> Aruba </option>

                   <option value="Australia"> Australia </option>

                   <option value="Austria"> Austria </option>

                   <option value="Azerbaijan"> Azerbaijan </option>

                   <option value="The Bahamas"> The Bahamas </option>

                   <option value="Bahrain"> Bahrain </option>

                   <option value="Bangladesh"> Bangladesh </option>

                   <option value="Barbados"> Barbados </option>

                   <option value="Belarus"> Belarus </option>

                   <option value="Belgium"> Belgium </option>

                   <option value="Belize"> Belize </option>

                   <option value="Benin"> Benin </option>

                   <option value="Bermuda"> Bermuda </option>

                   <option value="Bhutan"> Bhutan </option>

                   <option value="Bolivia"> Bolivia </option>

                   <option value="Bosnia and Herzegovina"> Bosnia and Herzegovina </option>

                   <option value="Botswana"> Botswana </option>

                   <option value="Brazil"> Brazil </option>

                   <option value="Brunei"> Brunei </option>

                   <option value="Bulgaria"> Bulgaria </option>

                   <option value="Burkina Faso"> Burkina Faso </option>

                   <option value="Burundi"> Burundi </option>

                   <option value="Cambodia"> Cambodia </option>

                   <option value="Cameroon"> Cameroon </option>

                   <option value="Canada"> Canada </option>

                   <option value="Cape Verde"> Cape Verde </option>

                   <option value="Cayman Islands"> Cayman Islands </option>

                   <option value="Central African Republic"> Central African Republic </option>

                   <option value="Chad"> Chad </option>

                   <option value="Chile"> Chile </option>

                   <option value="People's Republic of China"> People's Republic of China </option>

                   <option value="Republic of China"> Republic of China </option>

                   <option value="Christmas Island"> Christmas Island </option>

                   <option value="Cocos (Keeling) Islands"> Cocos (Keeling) Islands </option>

                   <option value="Colombia"> Colombia </option>

                   <option value="Comoros"> Comoros </option>

                   <option value="Congo"> Congo </option>

                   <option value="Cook Islands"> Cook Islands </option>

                   <option value="Costa Rica"> Costa Rica </option>

                   <option value="Cote d'Ivoire"> Cote d'Ivoire </option>

                   <option value="Croatia"> Croatia </option>

                   <option value="Cuba"> Cuba </option>

                   <option value="Cyprus"> Cyprus </option>

                   <option value="Czech Republic"> Czech Republic </option>

                   <option value="Denmark"> Denmark </option>

                   <option value="Djibouti"> Djibouti </option>

                   <option value="Dominica"> Dominica </option>

                   <option value="Dominican Republic"> Dominican Republic </option>

                   <option value="Ecuador"> Ecuador </option>

                   <option value="Egypt"> Egypt </option>

                   <option value="El Salvador"> El Salvador </option>

                   <option value="Equatorial Guinea"> Equatorial Guinea </option>

                   <option value="Eritrea"> Eritrea </option>

                   <option value="Estonia"> Estonia </option>

                   <option value="Ethiopia"> Ethiopia </option>

                   <option value="Falkland Islands"> Falkland Islands </option>

                   <option value="Faroe Islands"> Faroe Islands </option>

                   <option value="Fiji"> Fiji </option>

                   <option value="Finland"> Finland </option>

                   <option value="France"> France </option>

                   <option value="French Polynesia"> French Polynesia </option>

                   <option value="Gabon"> Gabon </option>

                   <option value="The Gambia"> The Gambia </option>

                   <option value="Georgia"> Georgia </option>

                   <option value="Germany"> Germany </option>

                   <option value="Ghana"> Ghana </option>

                   <option value="Gibraltar"> Gibraltar </option>

                   <option value="Greece"> Greece </option>

                   <option value="Greenland"> Greenland </option>

                   <option value="Grenada"> Grenada </option>

                   <option value="Guadeloupe"> Guadeloupe </option>

                   <option value="Guam"> Guam </option>

                   <option value="Guatemala"> Guatemala </option>

                   <option value="Guernsey"> Guernsey </option>

                   <option value="Guinea"> Guinea </option>

                   <option value="Guinea-Bissau"> Guinea-Bissau </option>

                   <option value="Guyana"> Guyana </option>

                   <option value="Haiti"> Haiti </option>

                   <option value="Honduras"> Honduras </option>

                   <option value="Hong Kong"> Hong Kong </option>

                   <option value="Hungary"> Hungary </option>

                   <option value="Iceland"> Iceland </option>

                   <option value="India"> India </option>

                   <option value="Indonesia"> Indonesia </option>

                   <option value="Iran"> Iran </option>

                   <option value="Iraq"> Iraq </option>

                   <option value="Ireland"> Ireland </option>

                   <option value="Israel"> Israel </option>

                   <option value="Italy"> Italy </option>

                   <option value="Jamaica"> Jamaica </option>

                   <option value="Japan"> Japan </option>

                   <option value="Jersey"> Jersey </option>

                   <option value="Jordan"> Jordan </option>

                   <option value="Kazakhstan"> Kazakhstan </option>

                   <option value="Kenya"> Kenya </option>

                   <option value="Kiribati"> Kiribati </option>

                   <option value="North Korea"> North Korea </option>

                   <option value="South Korea"> South Korea </option>

                   <option value="Kosovo"> Kosovo </option>

                   <option value="Kuwait"> Kuwait </option>

                   <option value="Kyrgyzstan"> Kyrgyzstan </option>

                   <option value="Laos"> Laos </option>

                   <option value="Latvia"> Latvia </option>

                   <option value="Lebanon"> Lebanon </option>

                   <option value="Lesotho"> Lesotho </option>

                   <option value="Liberia"> Liberia </option>

                   <option value="Libya"> Libya </option>

                   <option value="Liechtenstein"> Liechtenstein </option>

                   <option value="Lithuania"> Lithuania </option>

                   <option value="Luxembourg"> Luxembourg </option>

                   <option value="Macau"> Macau </option>

                   <option value="Macedonia"> Macedonia </option>

                   <option value="Madagascar"> Madagascar </option>

                   <option value="Malawi"> Malawi </option>

                   <option value="Malaysia"> Malaysia </option>

                   <option value="Maldives"> Maldives </option>

                   <option value="Mali"> Mali </option>

                   <option value="Malta"> Malta </option>

                   <option value="Marshall Islands"> Marshall Islands </option>

                   <option value="Martinique"> Martinique </option>

                   <option value="Mauritania"> Mauritania </option>

                   <option value="Mauritius"> Mauritius </option>

                   <option value="Mayotte"> Mayotte </option>

                   <option value="Mexico"> Mexico </option>

                   <option value="Micronesia"> Micronesia </option>

                   <option value="Moldova"> Moldova </option>

                   <option value="Monaco"> Monaco </option>

                   <option value="Mongolia"> Mongolia </option>

                   <option value="Montenegro"> Montenegro </option>

                   <option value="Montserrat"> Montserrat </option>

                   <option value="Morocco"> Morocco </option>

                   <option value="Mozambique"> Mozambique </option>

                   <option value="Myanmar"> Myanmar </option>

                   <option value="Nagorno-Karabakh"> Nagorno-Karabakh </option>

                   <option value="Namibia"> Namibia </option>

                   <option value="Nauru"> Nauru </option>

                   <option value="Nepal"> Nepal </option>

                   <option value="Netherlands"> Netherlands </option>

                   <option value="Netherlands Antilles"> Netherlands Antilles </option>

                   <option value="New Caledonia"> New Caledonia </option>

                   <option value="New Zealand"> New Zealand </option>

                   <option value="Nicaragua"> Nicaragua </option>

                   <option value="Niger"> Niger </option>

                   <option value="Nigeria"> Nigeria </option>

                   <option value="Niue"> Niue </option>

                   <option value="Norfolk Island"> Norfolk Island </option>

                   <option value="Turkish Republic of Northern Cyprus"> Turkish Republic of Northern Cyprus </option>

                   <option value="Northern Mariana"> Northern Mariana </option>

                   <option value="Norway"> Norway </option>

                   <option value="Oman"> Oman </option>

                   <option value="Pakistan"> Pakistan </option>

                   <option value="Palau"> Palau </option>

                   <option value="Palestine"> Palestine </option>

                   <option value="Panama"> Panama </option>

                   <option value="Papua New Guinea"> Papua New Guinea </option>

                   <option value="Paraguay"> Paraguay </option>

                   <option value="Peru"> Peru </option>

                   <option value="Philippines"> Philippines </option>

                   <option value="Pitcairn Islands"> Pitcairn Islands </option>

                   <option value="Poland"> Poland </option>

                   <option value="Portugal"> Portugal </option>

                   <option value="Puerto Rico"> Puerto Rico </option>

                   <option value="Qatar"> Qatar </option>

                   <option value="Romania"> Romania </option>

                   <option value="Russia"> Russia </option>

                   <option value="Rwanda"> Rwanda </option>

                   <option value="Saint Barthelemy"> Saint Barthelemy </option>

                   <option value="Saint Helena"> Saint Helena </option>

                   <option value="Saint Kitts and Nevis"> Saint Kitts and Nevis </option>

                   <option value="Saint Lucia"> Saint Lucia </option>

                   <option value="Saint Martin"> Saint Martin </option>

                   <option value="Saint Pierre and Miquelon"> Saint Pierre and Miquelon </option>

                   <option value="Saint Vincent and the Grenadines"> Saint Vincent and the Grenadines </option>

                   <option value="Samoa"> Samoa </option>

                   <option value="San Marino"> San Marino </option>

                   <option value="Sao Tome and Principe"> Sao Tome and Principe </option>

                   <option value="Saudi Arabia"> Saudi Arabia </option>

                   <option value="Senegal"> Senegal </option>

                   <option value="Serbia"> Serbia </option>

                   <option value="Seychelles"> Seychelles </option>

                   <option value="Sierra Leone"> Sierra Leone </option>

                   <option value="Singapore"> Singapore </option>

                   <option value="Slovakia"> Slovakia </option>

                   <option value="Slovenia"> Slovenia </option>

                   <option value="Solomon Islands"> Solomon Islands </option>

                   <option value="Somalia"> Somalia </option>

                   <option value="Somaliland"> Somaliland </option>

                   <option value="South Africa"> South Africa </option>

                   <option value="South Ossetia"> South Ossetia </option>

                   <option value="Spain"> Spain </option>

                   <option value="Sri Lanka"> Sri Lanka </option>

                   <option value="Sudan"> Sudan </option>

                   <option value="Suriname"> Suriname </option>

                   <option value="Svalbard"> Svalbard </option>

                   <option value="Swaziland"> Swaziland </option>

                   <option value="Sweden"> Sweden </option>

                   <option value="Switzerland"> Switzerland </option>

                   <option value="Syria"> Syria </option>

                   <option value="Taiwan"> Taiwan </option>

                   <option value="Tajikistan"> Tajikistan </option>

                   <option value="Tanzania"> Tanzania </option>

                   <option value="Thailand"> Thailand </option>

                   <option value="Timor-Leste"> Timor-Leste </option>

                   <option value="Togo"> Togo </option>

                   <option value="Tokelau"> Tokelau </option>

                   <option value="Tonga"> Tonga </option>

                   <option value="Transnistria Pridnestrovie"> Transnistria Pridnestrovie </option>

                   <option value="Trinidad and Tobago"> Trinidad and Tobago </option>

                   <option value="Tristan da Cunha"> Tristan da Cunha </option>

                   <option value="Tunisia"> Tunisia </option>

                   <option value="Turkey"> Turkey </option>

                   <option value="Turkmenistan"> Turkmenistan </option>

                   <option value="Turks and Caicos Islands"> Turks and Caicos Islands </option>

                   <option value="Tuvalu"> Tuvalu </option>

                   <option value="Uganda"> Uganda </option>

                   <option value="Ukraine"> Ukraine </option>

                   <option value="United Arab Emirates"> United Arab Emirates </option>

                   <option value="United Kingdom"> United Kingdom </option>

                   <option value="Uruguay"> Uruguay </option>

                   <option value="Uzbekistan"> Uzbekistan </option>

                   <option value="Vanuatu"> Vanuatu </option>

                   <option value="Vatican City"> Vatican City </option>

                   <option value="Venezuela"> Venezuela </option>

                   <option value="Vietnam"> Vietnam </option>

                   <option value="British Virgin Islands"> British Virgin Islands </option>

                   <option value="US Virgin Islands"> US Virgin Islands </option>

                   <option value="Wallis and Futuna"> Wallis and Futuna </option>

                   <option value="Western Sahara"> Western Sahara </option>

                   <option value="Yemen"> Yemen </option>

                   <option value="Zambia"> Zambia </option>

                   <option value="Zimbabwe"> Zimbabwe </option>

                   <option value="other"> Other </option>

                 </select>

                 <label class="form-sub-label" for="input_15_country" id="sublabel_country"> Country </label></span>

             </td>

           </tr>

         </table>

       </div>

     </li>

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

       <label class="form-label-left" id="label_20" for="input_20"> Music Preference </label>

       <div id="cid_20" class="form-input">

         <div class="form-multiple-column"><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_0" name="q20_musicPreference[]" value="House" />

             <label for="input_20_0"> House </label></span><span class="clearfix"></span><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_1" name="q20_musicPreference[]" value="Hip-Hop" />

             <label for="input_20_1"> Hip-Hop </label></span><span class="clearfix"></span><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_2" name="q20_musicPreference[]" value="R&amp;B" />

             <label for="input_20_2"> R&amp;B </label></span><span class="clearfix"></span><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_20_3" name="q20_musicPreference[]" value="Dance" />

             <label for="input_20_3"> Dance </label></span><span class="clearfix"></span><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_4" name="q20_musicPreference[]" value="Reggae" />

             <label for="input_20_4"> Reggae </label></span><span class="clearfix"></span><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_5" name="q20_musicPreference[]" value="Top 40" />

             <label for="input_20_5"> Top 40 </label></span><span class="clearfix"></span><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_20_6" name="q20_musicPreference[]" value="Reggaeton" />

             <label for="input_20_6"> Reggaeton </label></span><span class="clearfix"></span><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_7" name="q20_musicPreference[]" value="Any Genres" />

             <label for="input_20_7"> Any Genres </label></span><span class="clearfix"></span><span class="form-checkbox-item"><input type="checkbox" class="form-checkbox" id="input_20_8" name="q20_musicPreference[]" value="Old School" />

             <label for="input_20_8"> Old School </label></span><span class="clearfix"></span>

         </div>

       </div>

     </li>

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

       <label class="form-label-left" id="label_17" for="input_17"> Number Of Guests </label>

       <div id="cid_17" class="form-input">

         <input type="number" class="form-textbox validate[Numeric]" id="input_17" name="q17_numberOf" size="5" />

       </div>

     </li>

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

       <label class="form-label-left" id="label_18" for="input_18"> Questions and/or Comments </label>

       <div id="cid_18" class="form-input">

         <textarea id="input_18" class="form-textarea" name="q18_questionsAndor" cols="40" rows="6"></textarea>

       </div>

     </li>

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

       <label class="form-label-left" id="label_21" for="input_21">

         Enter the message as it's shown<span class="form-required">*</span>

       </label>

       <div id="cid_21" class="form-input">

         <div class="form-captcha">

           <label for="input_21"> <img alt="Captcha - Reload if it's not displayed" id="input_21_captcha" class="form-captcha-image" style="background:url(http://jotform.us/images/loader-big.gif) no-repeat center;" src="http://jotform.us/images/blank.gif" width="150" height="41" /> </label>

           <div style="white-space:nowrap;">

             <input type="text" id="input_21" class="form-textbox validate[required]" name="captcha" style="width:130px;" />

             <img src="http://jotform.us/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_21');" />

             <input type="hidden" name="captcha_id" id="input_21_captcha_id" value="0" />

           </div>

         </div>

       </div>

     </li>

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

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

         <div style="text-align:center" class="form-buttons-wrapper">

           <button id="input_2" type="submit" class="form-submit-button form-submit-button-simple_carolina_blue">

             Submit

           </button>

         </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="22395037114145" />

<script type="text/javascript">

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

</script>

</form>

 

 

 

 

------------End-------

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 20, 2012 10:58 PM   in reply to SPLEX2012

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

    <script type="text/javascript">

      JotForm.init(function(){

         $('input_11').hint('ex: myname@example.com');

         JotForm.setCalendar("14");

         JotForm.setCalendar("19");

         $('input_17').hint('ex: 23');

         JotForm.initCaptcha('input_21');

         JotForm.highlightInputs = false;

      });

    </script>

    <link href="http://max.jotfor.ms/min/g=formCss?3.1.861" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" href="http://jotform.us/css/styles/industrial_dark.css?3.1.861" />

    <style type="text/css">

       .form-label{

           width:150px !important;

       }

       .form-label-left{

           width:150px !important;

       }

       .form-line{

           padding-top:12px;

           padding-bottom:12px;

       }

       .form-label-right{

           width:150px !important;

       }

       .form-all{

           width:650px;

           background:#000000;

           color:#FFFFFF !important;

           font-family:'Helvetica';

           font-size:12px;

       }

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

           color:#FFFFFF;

       }


    </style>


    <link type="text/css" rel="stylesheet" href="http://jotform.us/css/styles/buttons/form-submit-button-simple_carolin a_blue.css?3.1.861"/>

     

    This section of code should reside within your <head> tag, not where it says 'Insert Form Here'.

     

    The remaining section of code should go where it says 'Insert Form Here.

     

    I tried that and it does load the form successfully - not crashing.

     

    But, you should re-work your CSS. The div holding the form should support scrolling as the form is too long to be displayed.

     

    I think once you implement what I suggested above, you can edit the CSS the way you want it to display the form the way it should.

     

    By the way, any specific reason you're using a 3rd party form service? When I hit submit, I'm taken to jotform website - this is bad. Your users will leave your site when they hit 'Submit' which is the last thing you'd want!

     

    If you need some nice in-site form examples, there are many you can uses. Here are a few you could take a look at: http://www.webresourcesdepot.com/16-free-ajax-contact-forms-for-a-bett er-user-experience/ for some 16 types of freely available forms and http://luiszuno.com/blog/downloads/formy-little-html-contact-form/ for one of my personal favorites - Formy - a very simple, elegant form.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points