<?php 
include('head.php');
include('header.php')
?>

<div id="bg">

<div id="container">

	<div id="">
	
		
 		<div id="editor_loading">
 			Loading... Please wait...
 		</div>
		
		<div id="content">
		<div class="post form_editor">
		<span id="selected_field_image" class="icon-arrow-right2 arrow-field-prop" ></span> 
		
<div id="main_body" class="integrated no_guidelines">
		
	<div id="form_container">
	
		<h1><a>Test Form for testing</a></h1>
		<form id="form_builder_preview" class="appnitro  top_label" method="post" action="#main_body">
					<div id="form_header" class="form_description">
			<h2 id="form_header_title">Test Form for testing</h2>
			<p id="form_header_desc">this form is for tesing purpose only</p>
		</div>				
			<ul  id="form_builder_sortable" title="Click field to edit. Drag to reorder.">
				
					<li id="li_1"  >
		<label class="description" for="element_1">Text </label>
		<div>
			<input id="element_1" name="element_1"     class="element text medium numfield_class " type="text" value=""   />
			 
		</div> 
		</li>		<li id="li_2"  >
		<label class="description" for="element_2">Paragraph </label>
		<div>
			<textarea id="element_2" name="element_2"    class="element textarea medium" rows="8" cols="90" ></textarea>
			 
		</div> 
		</li>		<li id="li_5"  class="time_field">
		<fieldset>
		<legend style="display: none">Time</legend>
		<span class="description">Time </span>
		<span>
			<input id="element_5_1" name="element_5_1"  class="element text " size="2" type="text" maxlength="2" value="" /> : 
			<label for="element_5_1">HH</label>
		</span>
		<span>
			<input id="element_5_2" name="element_5_2"  class="element text " size="2" type="text" maxlength="2" value="" />  
			<label for="element_5_2">MM</label>
		</span>
		
				<span>
			<select class="element select" style="width:5em"  id="element_5_4" name="element_5_4">
				<option value="AM" >AM</option>
				<option value="PM" >PM</option>
			</select>
			<label for="element_5_4">AM/PM</label>
			
		</span>
		</fieldset>
		 
		</li>		<li id="li_3"   class="multiple_choice">
		<span class="description">Multiple Choice </span>
		<div>
			<fieldset>
				<legend style="display: none">Multiple Choice</legend>
				<span><input id="element_3_1"  name="element_3" class="element radio element_3" type="radio" value="1"  />
<label class="choice" for="element_3_1">First option</label>
</span>
<span><input id="element_3_2"  name="element_3" class="element radio element_3" type="radio" value="2"  />
<label class="choice" for="element_3_2">Second option</label>
</span>
<span><input id="element_3_3"  name="element_3" class="element radio element_3" type="radio" value="3"  />
<label class="choice" for="element_3_3">Third option</label>
</span>

			</fieldset>
		</div> 
		</li>		<li id="li_4"  class="simple_name">
		<fieldset>
		<legend style="display: none">Full Name</legend>
		<span class="description">Full Name </span>
		<span class="simple_name_1">
			<input id="element_4_1" name="element_4_1"  type="text" class="element text" maxlength="255" size="8" value="" />
			<label for="element_4_1">First</label>
		</span>
		<span class="simple_name_2">
			<input id="element_4_2" name="element_4_2"  type="text" class="element text" maxlength="255" size="14" value="" />
			<label for="element_4_2">Last</label>
		</span></fieldset> 
		</li>
			
			</ul>
		</form>	
	</div>
</div>
		<div id="bottom_bar" style="display: none">
				
				<div id="bottom_bar_content" class="buttons_bar">
						 
						<a id="bottom_bar_save_form" href="#" class="bb_button bb_green"  alt="Save Form" title="Save Form">
					        <span class="icon-disk"></span>Save Form
					    </a>
					    
					    <a id="bottom_bar_add_field" class="bb_button bb_grey" href="#" alt="Add a New Field" title="Add a New Field">
					       <span class="icon-plus-circle"></span>Add Field
					    </a>
					   
					    <div id="bottom_bar_field_action">
						  	<span class="icon-arrow-right2 arrow-field-prop" ></span> 
						    <a id="bottom_bar_duplicate_field" href="#" class="bb_button bb_grey" alt="Duplicate Selected Field" title="Duplicate Selected Field">
						       <span class="icon-copy"></span>Duplicate
						    </a>
						    
						    <a id="bottom_bar_delete_field" href="#" class="bb_button bb_red" alt="Delete Selected Field" title="Delete Selected Field">
						        <span class="icon-remove"></span>Delete
						    </a>
					   </div> 
				</div>
				<div id="bottom_bar_loader">
					<span>
						<img src="images/loader.gif" width="32" height="32"/>
						<span id="bottom_bar_msg">Please wait... Synching...</span>
					</span>
				</div>
				
		</div>	
		<div id="bottom_bar_limit"></div>
        
        </div>   	
			 
		</div><!-- /#content -->
		
		<div id="sidebar">
		<div class="field_counts" style="width: 82%; margin-left: 17px;color: white; margin-bottom: 5px; font-size: 16px; text-align: right; text-align: center;background: #52b3aa;border-radius: 2px; height: 28px; font-family: 'globersemibold','Trebuchet MS','Lucida Grande',Tahoma,Arial,sans-serif;"></div>
			
		<div id="builder_tabs">
								<ul id="builder_tabs_btn" style="display: none">
									<li id="btn_add_field"><a href="#tab_add_field">Add a Field</a></li>
									<li id="btn_field_properties"><a href="#tab_field_properties">Field Properties</a></li>
									<li id="btn_form_properties"><a href="#tab_form_properties">Form Properties</a></li>
								</ul>
								<div id="tab_add_field">
									<div id="social" class="box">
										<ul>   		
											<li id="btn_single_line_text" class="box">
												<a id="a_single_line_text" href="#" title="Single Line Text">
													<span class="icon-font-size icon-font"></span><span class="blabel">Single Line Text</span>
												</a>
											</li>     
											  
											<li id="btn_number" class="box">
												<a id="a_number" href="#" title="Number">
													<span class="icon-seven-segment8 icon-font"></span><span class="blabel">Number</span>
												</a>
											</li>     
								          	
								          	<li id="btn_paragraph_text" class="box">
												<a id="a_paragraph_text" href="#" title="Paragraph Text">
													<span class="icon-paragraph-left icon-font"></span><span class="blabel">Paragraph Text</span>
												</a>
											</li>     
											<li id="btn_checkboxes" class="box">
												<a id="a_checkboxes" href="#" title="Checkboxes">
													<span class="icon-checkbox icon-font"></span><span class="blabel">Checkboxes</span>
												</a>
											</li>   	
											
											<li id="btn_multiple_choice" class="box">
												<a id="a_multiple_choice" href="#" title="Multiple Choice">
													<span class="icon-list icon-font"></span><span class="blabel">Multiple Choice</span>
												</a>
											</li>     
											  
											<li id="btn_drop_down" class="box">
												<a id="a_drop_down" href="#" title="Drop Down">
													<span class="icon-menu icon-font"></span><span class="blabel">Drop Down</span>
												</a>
											</li>     
								          	
								          	<li id="btn_name" class="box">
												<a id="a_name" href="#" title="Name">
													<span class="icon-user2 icon-font"></span><span class="blabel">Name</span>
												</a>
											</li>     
											<li id="btn_date" class="box">
												<a id="a_date" href="#" title="Date">
													<span class="icon-calendar icon-font"></span><span class="blabel">Date</span>
												</a>
											</li>   	
											
											<li id="btn_time" class="box">
												<a id="a_time" href="#" title="Time">
													<span class="icon-alarm icon-font"></span><span class="blabel">Time</span>
												</a>
											</li>     
											  
											<li id="btn_phone" class="box">
												<a id="a_phone" href="#" title="Phone">
													<span class="icon-phone icon-font"></span><span class="blabel">Phone</span>
												</a>
											</li>     
								          	
								          	<li id="btn_address" class="box">
												<a id="a_address" href="#" title="Address">
													<span class="icon-home icon-font"></span><span class="blabel">Address</span>
												</a>
											</li>     
											<li id="btn_website" class="box">
												<a id="a_website" href="#" title="Web Site">
													<span class="icon-link icon-font"></span><span class="blabel">Web Site</span>
												</a>
											</li>   	
											
											<li id="btn_price" class="box">
												<a id="a_price" href="#" title="Price">
													<span class="icon-coins icon-font"></span><span class="blabel">Price</span>
												</a>
											</li>     
											  
											<li id="btn_email" class="box">
												<a  id="a_email" href="#" title="Email">
													<span class="icon-envelope-opened icon-font"></span><span class="blabel">Email</span>
												</a>
											</li>     
								          	
								          	<li id="btn_matrix" class="box">
												<a id="a_matrix" href="#" title="Matrix Choice">
													<span class="icon-grid icon-font"></span><span class="blabel">Matrix Choice</span>
												</a>
											</li>     
											<li id="btn_file_upload" class="box">
												<a id="a_file_upload" href="#" title="File Upload">
													<span class="icon-file-upload icon-font"></span><span class="blabel">File Upload</span>
												</a>
											</li>  
											<li id="btn_section_break" class="box">
												<a id="a_section_break" href="#" title="Section Break">
													<span class="icon-marker icon-font"></span><span class="blabel">Section Break</span>
												</a>
											</li>     
											<li id="btn_page_break" class="box">
												<a id="a_page_break" href="#" title="Page Break">
													<span class="icon-file-plus icon-font"></span><span class="blabel">Page Break</span>
												</a>
											</li>   	
											<li id="btn_signature" class="box">
												<a id="a_signature" href="#" title="Signature">
													<span class="icon-quill icon-font"></span><span class="blabel">Signature</span>
												</a>
											</li>
											<li id="btn_media" class="box">
												<a id="a_media" href="#" title="Image / Video / HTML">
													<span class="icon-camera icon-font"></span><span class="blabel">Media</span>
												</a>
											</li>
											        			
					</ul>
										
					<div class="clear"></div>
									
			</div><!-- /#social -->
			
		</div>
				
		<div id="tab_field_properties" style="display: none">
			<div id="field_properties_pane" class="box"> <!-- Start field properties pane -->
				<form style="display: block;" id="element_properties" action="" onsubmit="return false;">
					
					<div id="element_inactive_msg">
						<div class="bullet_bar_top">
							<img class="left" src="images/bullet_green.png" />
							<img class="right" src="images/bullet_green.png"/>
						</div>
						
						<span class="icon-arrow-left" style="margin-top: 80px;color: #529214;font-size: 50px;display: block"></span>
						<h3>Please select a field</h3>
						<p id="eim_p">Click on a field on the left to change its properties.</p>
						 
						<div class="bullet_bar_bottom">
							<img class="left" src="images/bullet_green.png" />
							<img class="right" src="images/bullet_green.png"/>
						</div>
					</div>
					
					<div id="element_properties_form">
						<div class="bullet_bar_top">
							<img class="left" src="images/bullet_green.png" />
							<img class="right" src="images/bullet_green.png"/>
						</div>
						<div class="num" id="element_position">12</div>
						<ul id="all_properties">
						<div class="prop_custom_cssnew">
						<li class="" id="prop_custom_cssnew">
							<label class="desc" for="element_custom_cssnew">
							Database Column Name
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This determines column names of your form elements stored in database"/>
							</label>
							
							<div id="element_db_cols"></div>
						</li>
					    </div>
						<li id="prop_element_label">
								<label class="desc" for="element_label">Field Label <img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Field Label is one or two words placed directly above the field."/>
								</label>
								<textarea id="element_label" name="element_label" class="textarea" /></textarea>
						</li>
						
						<li class="leftCol" id="prop_element_type">
							<label class="desc" for="element_type">
							Field Type 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Field Type detemines what kind of data can be collected by your field. After you save the form, the field type cannot be changed."/>
							</label>
							<select class="select full" id="element_type" name="element_type" autocomplete="off" tabindex="12">
							<option value="text">Single Line Text</option>
							<option value="textarea">Paragraph Text</option>
							<option value="radio">Multiple Choice</option>
							<option value="checkbox">Checkboxes</option>
							<option value="select">Drop Down</option>
							<option value="number">Number</option>
							<option value="simple_name">Name</option>
							<option value="date">Date</option>
							<option value="time">Time</option>
							<option value="phone">Phone</option>
							<option value="money">Price</option>
							<option value="url">Web Site</option>
							<option value="email">Email</option>
							<option value="address">Address</option>
							<option value="file">File Upload</option>
							<option value="section">Section Break</option>
							<option value="matrix">Matrix Choice</option>
							<option value="media">Media</option>
							</select>
						</li>
						
						<li class="rightCol" id="prop_element_size">
							<label class="desc" for="element_size">
							Field Size 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This property sets the visual appearance of the field in your form. It does not limit nor increase the amount of data that can be collected by the field."/>
							</label>
							<select class="select full" id="element_size" autocomplete="off" tabindex="13">
							<option value="small">Small</option>
							<option value="medium">Medium</option>
							<option value="large">Large</option>
							</select>
						</li>
						
						<li class="rightCol" id="prop_choice_columns">
							<label class="desc" for="element_choice_columns">
							Choice Columns 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Set the number of columns being used to display the choices. Inline columns means the choices are sitting next to each other."/>
							</label>
							<select class="select full" id="element_choice_columns" autocomplete="off">
							<option value="1">One Column</option>
							<option value="2">Two Columns</option>
							<option value="3">Three Columns</option>
							<option value="9">Inline</option>
							</select>
						</li>
						
						<li class="rightCol" id="prop_date_format">
							<label class="desc" for="field_size">
							Date Format 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can choose between American and European Date Formats"/>
							</label>
							<select class="select full" id="date_type" autocomplete="off">
							<option id="element_date" value="date">MM / DD / YYYY</option>
							<option id="element_europe_date" value="europe_date">DD / MM / YYYY</option>
							</select>
						</li>
						
						<li class="rightCol" id="prop_name_format">
							<label class="desc" for="name_format">
							Name Format 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Two formats available. A normal name field, or an extended name field with title and suffix."/>
							</label>
							<select class="select full" id="name_format" autocomplete="off">
							<option id="element_simple_name" value="simple_name" selected="selected">Normal</option>
							<option id="element_name" value="name" selected="selected">Normal + Title</option>
							<option id="element_simple_name_wmiddle" value="simple_name_wmiddle" selected="selected">Full</option>
							<option id="element_name_wmiddle" value="name_wmiddle">Full + Title</option>
							</select>
						</li>
						
						<li class="rightCol" id="prop_phone_format">
							<label class="desc" for="field_size">
							Phone Format 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can choose between American and International Phone Formats"/>
							</label>
							<select class="select full" id="phone_format" name="phone_format" autocomplete="off">
							<option id="element_phone" value="phone">### - ### - ####</option>
							<option id="element_simple_phone" value="simple_phone">International</option>
							</select>
						</li>
						
						<li class="rightCol" id="prop_currency_format">
							<label class="desc" for="field_size">
							Currency Format
							</label>
							<select class="select full" id="money_format" name="money_format" autocomplete="off">
							<option id="element_money_usd" value="dollar">&#36; - Dollars</option>
							<option id="element_money_euro" value="euro">&#8364; - Euros</option>
							<option id="element_money_pound" value="pound">&#163; - Pounds Sterling</option>
							<option id="element_money_yen" value="yen">&#165; - Yen</option>
							<option id="element_money_baht" value="baht">&#3647; - Baht</option>
							<option id="element_money_forint" value="forint">&#70;&#116; - Forint</option>
							<option id="element_money_franc" value="franc">CHF - Francs</option>
							<option id="element_money_koruna" value="koruna">&#75;&#269; - Koruna</option>
							<option id="element_money_krona" value="krona">kr - Krona</option>
							<option id="element_money_pesos" value="pesos">&#36; - Pesos</option>
							<option id="element_money_rand" value="rand">R - Rand</option>
							<option id="element_money_reais" value="reais">R&#36; - Reais</option>
							<option id="element_money_ringgit" value="ringgit">RM - Ringgit</option>
							<option id="element_money_rupees" value="rupees">Rs - Rupees</option>
							<option id="element_money_zloty" value="zloty">&#122;&#322; - Złoty</option>
							<option id="element_money_riyals" value="riyals">&#65020; - Riyals</option>
							</select>
						</li>
						
						<li class="clear" id="prop_choices">
							<fieldset class="choices">
							<legend>
							Choices 
							<img class="helpmsg" src="images/icons/help3.png" style="vertical-align: top; " title="Use the plus and minus buttons to add and delete choices. Click on the choice to make it the default selection."/>
							</legend>
							<ul id="element_choices">
							<li>
								<input type="radio" title="Select this choice as the default." class="choices_default" name="choices_default" />
								<input type="text" value="First option" autocomplete="off" class="text" id="choice_1" /> 
								<a href="#" class="add_choice" title="Add Choice" id="choiceadd_1"><span class="icon-plus-circle"></span></a>
								<a href="#" class="del_choice" title="Remove Choice" id="choicedel_1"><span class="icon-cancel-circle"></span></a>  
							</li>	
							</ul>
							
							<div id="element_choices_action">
								<a href="#" id="bulk_import_choices"><span class="icon-list"></span> Bulk Insert</a>
								<a href="#" id="toggle_hidden_choices" style="display: none">Hidden (<var id="hidden_choices_counter">0</var>)</a>
							</div> 

							<ul id="element_choices_hidden" style="display: none">
							<li>
								<input type="radio" title="Select this choice as the default." class="choices_default_hidden" name="choices_default_hidden" />
								<input type="text" value="" autocomplete="off" class="text" id="choicehidden_1" /> 
								<a href="#" class="unhide_choice" title="Unhide Choice" id="choiceunhide_1"><span class="icon-plus-circle"></span></a>
								<a href="#" class="trash_choice" title="Remove Choice" id="choicetrash_1"><span class="icon-cancel-circle"></span></a>  
							</li>	
							</ul>

							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_choices_other">
							<fieldset class="choices">
							<legend>
							Choices Options 
							</legend>
							
							<span>	
									<input id="prop_choices_other_checkbox" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_choices_other_checkbox">Allow Client to Add Other Choice</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enable this option if you would like to allow your client to write his own answer if none of the other choices are applicable. A text field will be added to the last choice. Enter the label below this checkbox."/>
									<div style="margin-bottom: 5px;margin-top: 3px;padding-left: 20px">
										<img src="images/icons/tag_green.png" style="vertical-align: middle"> <input id="prop_other_choices_label" style="width: 220px" class="text" value="" size="25" type="text">
									</div>
									<span id="prop_choices_randomize_span" style="display: none">
									<input id="prop_choices_randomize" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_choices_randomize">Randomize Choices</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enable this option if you would like the choices to be shuffled around each time the form being displayed."/>
									</span>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_matrix_row">
							<fieldset class="choices">
							<legend>
							Rows 
							<img class="helpmsg" src="images/icons/help3.png" style="vertical-align: top; " title="Enter rows labels here. Use the plus and minus buttons to add and delete matrix row. "/>
							</legend>
							<ul id="element_matrix_row">
							<li>
								<input type="text" value="First Question" autocomplete="off" class="text" id="matrixrow_1" /> 
								<img title="Add" alt="Add" src="images/icons/add.png" style="vertical-align: middle" > 
								<img title="Delete" alt="Delete" src="images/icons/delete.png" style="vertical-align: middle" > 
							</li>	
							</ul>
							
							<div style="text-align: center;padding-top: 5px;padding-bottom: 10px">
								<a href="#" id="bulk_import_matrix_row"><span class="icon-list"></span> Bulk Insert Rows</a>
							</div> 
							
							</fieldset>
							
						</li>
						<li class="clear" id="prop_matrix_column">
							<fieldset class="choices">
							<legend>
							Columns 
							<img class="helpmsg" src="images/icons/help3.png" style="vertical-align: top; " title="Enter column labels here. Use the plus and minus buttons to add and delete matrix column. "/>
							</legend>
							<ul id="element_matrix_column">
							<li>
								<input type="text" value="First Question" autocomplete="off" class="text" id="matrixcolumn_1" /> 
								<img title="Add" alt="Add" src="images/icons/add.png" style="vertical-align: middle" > 
								<img title="Delete" alt="Delete" src="images/icons/delete.png" style="vertical-align: middle" > 
							</li>	
							</ul>
							
							<div style="text-align: center;padding-top: 5px;padding-bottom: 10px">
								<a href="#" id="bulk_import_matrix_column"><span class="icon-list"></span> Bulk Insert Columns</a>
							</div> 
							
							</fieldset>
							
						</li>
						<li id="prop_breaker"></li> 
						
						<li class="leftCol" id="prop_options">
							<fieldset class="fieldset">
							<legend>Rules</legend>
							<span style="display: block">
								<input id="element_required" class="checkbox" value="" type="checkbox">
								<label class="choice" for="element_required">Required</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this rule will make sure that a user fills out a particular field. A message will be displayed to the user if they have not filled out the field."/>
							</span>
							<span id="element_unique_span" style="display: block">
								<input id="element_unique" class="checkbox" value="" type="checkbox"> 
								<label class="choice" for="element_unique">No Duplicates</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this rule will verify that the data entered into this field is unique and has not been submitted previously."/>  
							</span>
							<span id="element_readonly_span" style="display: block">
								<input id="element_readonly" class="checkbox" value="" type="checkbox"> 
								<label class="choice" for="element_readonly">Read Only</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If enabled, users won't be able to change the value of this field."/>  
							</span>
							</fieldset>
						</li>

						<li class="leftCol" id="prop_media_type">
							<fieldset class="fieldset">
							<legend>Media Type</legend>
							
							<input id="element_media_image" name="element_media_type" class="radio" value="" checked="checked" type="radio">
							<label class="choice" for="element_media_image">Image</label>
							
							<span style="display: block;margin: 1px 0">
								<input id="element_media_video" name="element_media_type" class="radio" value="" type="radio">
								<label class="choice" for="element_media_video">Video</label> 
							</span>
							</fieldset>
						</li>
						
						<li class="rightCol" id="prop_access_control">
							<fieldset class="fieldset">
							<legend>Field Visibility</legend>
							
							<input id="element_public" name="element_visibility" class="radio" value="" checked="checked" type="radio">
							<label class="choice" for="element_public">Visible</label>
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This is the default option. The field will be accessible by anyone when the form is made public."/> 
							
							<span style="display: block;margin: 1px 0">
								<input id="element_hidden" name="element_visibility" class="radio" value="" type="radio">
								<label class="choice" for="element_hidden">Hidden</label> 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Field will not be shown to users when the form is made public. Useful to collect information that is not entered by the users (e.g. populated from URL parameters)"/>
							</span>
							
							<span id="admin_only_span">
								<input id="element_private" name="element_visibility" class="radio" value="" type="radio">
								<label class="choice" for="element_private">Admin Only</label> 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Similar as hidden, but the field can't be used to collect any data from the public form. The field will only visible inside MachForm entry manager. Useful to add additional information to a submitted entry."/>
							</span>
							</fieldset>
						</li>
						
						<li class="clear" id="prop_time_options">
							<fieldset class="choices">
							<legend>
							Time Options 
							</legend>
							
							<span>	
									<input id="prop_time_showsecond" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_time_showsecond">Show Seconds Field</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this will enable Seconds field on your time field."/>
									<br/>
									<input id="prop_time_24hour" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_time_24hour">Use 24 Hour Format</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This will enable 24-hour notation in the form hh:mm (for example 14:23) or hh:mm:ss (for example, 14:23:45)"/>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_data_encryption">
							<fieldset class="choices">
							<legend>
							Data Encryption 
							</legend>
							
							<span>	
									<input id="prop_encrypt_data" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_encrypt_data">Encrypt Field Data</label>
									<img id="tooltip_is_encrypted" class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="To be able using this feature, you'll need to enable <strong>Data Encryption</strong> option on your <strong>Form Properties</strong> and generate the encryption keys."/>
							</span>
							
							</fieldset>
							
						</li>

						<li class="clear" id="prop_text_options">
							<fieldset class="choices">
							<legend>
							Text Option 
							</legend>
							
							<span>	
									<input id="prop_text_as_password" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_text_as_password">Display as Password Field</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this will display the field as a password field and masked all the characters (shown as asterisks or circles)."/>
							</span>
							
							</fieldset>
							
						</li>

						<li class="clear" id="prop_email_options">
							<fieldset class="choices">
							<legend>
							Email Field Option 
							</legend>
							
							<div style="padding-bottom: 5px">
									<input id="prop_enable_email_confirmation" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_enable_email_confirmation">Enable Email Confirmation Field</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="A second email address field will be displayed, and users are required to input the same email address twice, ensuring that it is entered correctly."/>
							</div>
							<div id="prop_enable_email_confirmation_div" style="display: none; margin-left: 25px;margin-bottom: 10px">
										<label class="desc" for="prop_confirmation_field_label">Confirmation Field Label</label>
										<input id="prop_confirmation_field_label" name="prop_confirmation_field_label" style="width: 90%" class="text" value=""  type="text">
							</div>
							
							</fieldset>
							
						</li>

						<li class="clear" id="prop_choice_limit">
							<fieldset class="choices" style="padding-bottom: 10px">
							<legend style="background-color: #dc6666; border-color: #dc6666">
							Choices Limit 
							</legend>
							
							<span style="padding-left: 5px">	
								  <label class="choice">Client must select</label> 
								  <select class="select" id="prop_choice_limit_rule" name="prop_choice_limit_rule" autocomplete="off" style="margin: 0 3px">
										<option value="atleast">at least</option>
										<option value="atmost">at most</option>
										<option value="exactly">exactly</option>
										<option value="between">between</option>
								  </select>  
								  
								  <span id="prop_choice_limit_qty_span" style="display: none">
									  <input id="prop_choice_limit_qty" style="width: 20px" class="text" value="" maxlength="255" type="text"> 
									  <label>choice</label>
								  </span>
								  <span id="prop_choice_limit_range_span" style="display: none">
									  <input id="prop_choice_limit_range_min" style="width: 20px" class="text" value="" maxlength="255" type="text"> and 
									  <input id="prop_choice_limit_range_max" style="width: 20px" class="text" value="" maxlength="255" type="text"> 
								  </span>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_matrix_options">
							<fieldset class="choices">
							<legend>
							Matrix Option 
							</legend>
							
							<span>	
									<input id="prop_matrix_allow_multiselect" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_matrix_allow_multiselect">Allow Multiple Answers Per Row</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this option will allow your client to select multiple answers for each row. This option can only being set once, when you initially added the matrix field. Once you have saved the form, this option can't be changed."/>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_address_options">
							<fieldset class="choices">
							<legend>
							Address Options 
							</legend>
							
							<span>	
									<input id="prop_address_hideline2" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_address_hideline2">Hide Address Line 2</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Hide the 'Address Line 2' field from the address field."/>
									<br/>
									<input id="prop_address_us_only" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_address_us_only">Restrict to U.S. State Selection</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this will limit the country selection to United States only and the state field will be populated with U.S. state list"/>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_date_options">
							<fieldset class="choices">
							<legend>
							Date Options 
							</legend>
							
							<span>	
									<input id="prop_date_range" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_date_range">Enable Minimum and/or Maximum Dates</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can set minimum and/or maximum dates within which a date may be chosen."/>
									
									<div id="prop_date_range_details" style="display: none;">

										<div style="margin-left: 23px;margin-top: 10px">
											Set range using 
											<select class="select" id="prop_date_range_format_switcher" name="prop_date_range_format_switcher" autocomplete="off">
												<option value="fixed">fixed</option>
												<option value="relative">relative</option>
											</select> dates:
										</div>
										
										<div id="prop_date_range_fixed">
											<div id="form_date_range_minimum">
												<label class="desc">Minimum Date:</label>  
												
												<span>
												<input type="text" value="" maxlength="2" size="2" style="width: 2em;" class="text" name="date_range_min_mm" id="date_range_min_mm">
												<label for="date_range_min_mm">MM</label>
												</span>
												
												<span>
												<input type="text" value="" maxlength="2" size="2" style="width: 2em;" class="text" name="date_range_min_dd" id="date_range_min_dd">
												<label for="date_range_min_dd">DD</label>
												</span>
												
												<span>
												 <input type="text" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="date_range_min_yyyy" id="date_range_min_yyyy">
												 <label for="date_range_min_yyyy">YYYY</label>
												</span>
												
												<span style="height: 30px;padding-right: 10px;">
												<input type="hidden" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="linked_picker_range_min" id="linked_picker_range_min">
												<div style="display: none"><img id="date_range_min_pick_img" alt="Pick date." src="images/icons/calendar.png" class="trigger" style="margin-top: 3px; cursor: pointer" /></div>
												</span>	
											</div>
												
											<div id="form_date_range_maximum">
												<label class="desc">Maximum Date:</label> 
												
												<span>
												<input type="text" value="" maxlength="2" size="2" style="width: 2em;" class="text" name="date_range_max_mm" id="date_range_max_mm">
												<label for="date_range_max_mm">MM</label>
												</span>
												
												<span>
												<input type="text" value="" maxlength="2" size="2" style="width: 2em;" class="text" name="date_range_max_dd" id="date_range_max_dd">
												<label for="date_range_max_dd">DD</label>
												</span>
												
												<span>
												 <input type="text" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="date_range_max_yyyy" id="date_range_max_yyyy">
												<label for="date_range_max_yyyy">YYYY</label>
												</span>
												
												<span>
												<input type="hidden" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="linked_picker_range_max" id="linked_picker_range_max">
												<div style="display: none"><img id="date_range_max_pick_img" alt="Pick date." src="images/icons/calendar.png" class="trigger" style="margin-top: 3px; cursor: pointer" /></div>
												</span>
			 								</div>
		 								</div>

		 								<div id="prop_date_range_relative" style="display: none">
		 									<div id="form_date_range_minimum_relative">
												<label for="date_range_min_relative" class="desc">Minimum Date:</label>
												<input type="text" value="" size="3" maxlength="4" style="width: 2.2em;" class="text" name="date_range_min_relative" id="date_range_min_relative"> days ago
											</div>
												
											<div id="form_date_range_maximum_relative">
												<label for="date_range_max_relative" class="desc">Maximum Date:</label>
												<input type="text" value="" size="3" maxlength="4" style="width: 2.2em;" class="text" name="date_range_max_relative" id="date_range_max_relative"> days ahead
											</div>
		 								</div>
											
										<div style="clear: both"></div>
										
									</div>
									
									<div style="clear: both"></div>
									
									<input id="prop_date_selection_limit" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_date_selection_limit">Enable Date Selection Limit</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This is useful for reservation or booking form, so that you could allocate each day for a maximum number of customers. For example, setting the value to 5 will ensure that the same date can't be booked/selected by more than 5 customers."/>
									<div id="form_date_selection_limit" style="display: none">
											Only allow each date to be selected
											<input id="date_selection_max" style="width: 20px" class="text" value="" maxlength="255" type="text"> times
									</div>
									<div style="clear: both"></div>
									
									<input id="prop_date_past_future_selection" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_date_past_future_selection">Disable</label>
										<select class="select medium" id="prop_date_past_future" name="prop_date_past_future" autocomplete="off" disabled="disabled">
											<option id="element_date_past" value="p">All Past Dates</option>
											<option id="element_date_future" value="f">All Future Dates</option>
										</select>
									
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this option will disable either past or future dates selection."/>
									<div style="clear: both"></div>
									
									<input id="prop_date_disable_dayofweek" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_date_disable_dayofweek">Disable Days of Week</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Block or disable any particular day(s) of week in the calendar."/>
									<div id="div_disable_dayofweek_list" style="display: none">
										
											<span>
												<input id="dayofweek_0"  name="dayofweek_0" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_0">Sun</label>
											</span>
											<span>
												<input id="dayofweek_1"  name="dayofweek_1" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_1">Mon</label>
											</span>
											<span>
												<input id="dayofweek_2"  name="dayofweek_2" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_2">Tue</label>
											</span>
											<span>
												<input id="dayofweek_3"  name="dayofweek_3" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_3">Wed</label>
											</span>
											<span>
												<input id="dayofweek_4"  name="dayofweek_4" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_4">Thu</label>
											</span>
											<span>
												<input id="dayofweek_5"  name="dayofweek_5" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_5">Fri</label>
											</span>
											<span>
												<input id="dayofweek_6"  name="dayofweek_6" class="element checkbox dayofweek" type="checkbox" value="1"  />
												<label class="choice" for="dayofweek_6">Sat</label>
											</span>
										
									</div>
									<div style="clear: both"></div>
									
									<input id="prop_date_disable_specific" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_date_disable_specific">Disable Specific Dates</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Block or disable any specific date in the calendar. Use the datepicker to disable multiple dates."/>
									<div id="form_date_disable_specific" style="display: none">
											<textarea class="textarea" rows="10" cols="100" style="width: 175px;height: 45px" id="date_disabled_list"></textarea>
											<div style="display: none"><img id="date_disable_specific_pick_img" alt="Pick date." src="images/icons/calendar.png" class="trigger" style="vertical-align: top; cursor: pointer" /></div>
									</div>
							</span>
							
							</fieldset>
							
						</li>

						<li class="clear" id="prop_image_options">
							<fieldset class="choices" style="padding-bottom: 15px;">
							<legend>
							Image Options 
							</legend>
							
							<div class="left" style="padding-bottom: 5px">
								<input id="element_image_upload_file" name="element_image_type" class="radio" value="" type="radio">
								<label class="choice" for="element_image_upload_file">Upload Image</label>
							</div>
								
							<div class="left" style="padding-left: 15px;padding-bottom: 5px">
								<input id="element_image_set_url" name="element_image_type" class="radio" value="" type="radio">
								<label class="choice" for="element_image_set_url">Image URL</label>
							</div>

							<div style="clear: both"></div>

							<div id="div_image_src" style="display: block;margin-bottom: 10px">
								<input id="element_image_src" class="text large" name="element_image_src" value="" type="text">
							</div>

							<div id="div_image_upload_file" style="display: block;margin-top: 5px;margin-bottom: 10px; margin-left: 5px">
								<input id="element_image_file_uploader" name="element_image_file_uploader" class="element file" type="file" />
							</div>
							
							<div style="padding-left: 4px">
								<label class="desc" style="margin-bottom: 5px">Image Size (px)</label>
								<span>
								<input type="text" value="" class="text medium" name="element_image_width" id="element_image_width" style="width: 40px">
								<label for="element_image_width" class="desc" style="font-size: 95%;color: #222222">Width</label>
								</span>
								<div style="margin-left: 5px;margin-right: 5px;float: left">
									<div class="image-lock-ratio"></div>
									<span style="margin-left: 5px;width: 14px">
										<a id="element_image_ratio_lock" href="#"><span class="icon-lock5 icon-font"></span></a>
									</span>
									<div class="image-lock-ratio"></div>
								</div>
								<span>
								<input type="text" value="" class="text medium" name="element_image_height" id="element_image_height" style="width: 40px">
								<label for="element_image_height" class="desc" style="font-size: 95%;color: #222222">Height</label>
								</span>
							</div>

							<div style="clear: both;"></div>

							<label class="desc" style="margin-top: 10px;margin-left: 4px;">Image Alignment</label>
							<span>
								<input id="element_image_alignment_left"  name="element_image_alignment" class="element radio" type="radio" value="left"  />
								<label class="choice" for="element_image_alignment_left">Left</label>
							</span>
							<span>
								<input id="element_image_alignment_center"  name="element_image_alignment" class="element radio" type="radio" value="center"  />
								<label class="choice" for="element_image_alignment_center">Center</label>
							</span>
							<span>
								<input id="element_image_alignment_right"  name="element_image_alignment" class="element radio" type="radio" value="right"  />
								<label class="choice" for="element_image_alignment_right">Right</label>
							</span>

							<div style="clear: both; border-bottom: 1px dotted green;width: 90%;margin-left: 10px;margin-top: 15px;"></div>

							<label class="desc" for="element_media_image_alt" style="margin-left: 4px;margin-top: 10px">
							Alternative Text
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Provide a clear text alternative of the image for screen reader users. The text should let the user know what an image's content and purpose are."/>
							</label>
							
							<input id="element_media_image_alt" class="text large" name="element_media_image_alt" value="" type="text" style="margin-left: 4px;width: 255px">

							<label class="desc" for="element_media_image_href" style="margin-left: 4px;margin-top: 10px">
							Image Link
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Add a link to this image. (e.g. http://www.example.com)"/>
							</label>
							
							<input id="element_media_image_href" class="text large" name="element_media_image_href" value="" type="text" style="margin-left: 4px;width: 255px;margin-bottom: 10px">

							<input id="element_media_display_in_email" class="checkbox" value="" type="checkbox">
							<label class="choice" for="element_media_display_in_email">Display Image in Email</label>
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enable this option if you need to display the image within the notification email, review page and entries page."/>

							</fieldset>
							
						</li>

						<li class="clear" id="prop_video_options">
							<fieldset class="choices" style="padding-bottom: 15px;">
							<legend>
							Video Options 
							</legend>
							
							<label class="desc" for="element_media_video_src" style="margin-left: 4px;margin-top: 5px">
							YouTube URL / MP4 URL
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enter YouTube URL or direct link to *.mp4 file"/>
							</label>
							
							<input id="element_media_video_src" class="text large" name="element_media_video_src" value="" type="text" style="margin-left: 4px;width: 255px;">


							<label class="desc" style="margin-top: 10px;margin-left: 4px;">Video Player Size</label>
							<span>
								<input id="element_media_video_size_small"  name="element_media_video_size" class="element radio" type="radio" value="left"  />
								<label class="choice" for="element_media_video_size_small">Small</label>
							</span>
							<span>
								<input id="element_media_video_size_medium"  name="element_media_video_size" class="element radio" type="radio" value="center"  />
								<label class="choice" for="element_media_video_size_medium">Medium</label>
							</span>
							<span>
								<input id="element_media_video_size_large"  name="element_media_video_size" class="element radio" type="radio" value="right"  />
								<label class="choice" for="element_media_video_size_large">Large</label>
							</span>

							<div style="clear: both; border-bottom: 1px dotted green;width: 90%;margin-left: 10px;margin-top: 15px;margin-bottom: 15px"></div>

							<input id="element_media_video_muted" class="checkbox" value="" type="checkbox">
							<label class="choice" for="element_media_video_muted">Mute Video</label>

							<div style="clear: both;"></div>

							<input id="element_media_video_enable_caption" class="checkbox" value="" type="checkbox">
							<label class="choice" for="element_media_video_enable_caption">Enable Caption</label>
							
							<div id="div_video_caption_file" style="margin-left: 19px;width: 250px;display: none">
								<label class="desc" for="element_media_video_caption_file" style="margin-left: 4px;margin-top: 5px">
								Caption File URL (*.vtt)
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enter the full URL to *.vtt file (WebVTT)"/>
								</label>
								
								<input id="element_media_video_caption_file" class="text large" name="element_media_video_caption_file" value="" type="text" style="margin-left: 4px;width: 235px;margin-bottom: 0px">
							</div>

							</fieldset>
							
						</li>

						<li class="clear" id="prop_choice_max_entry">
							<fieldset class="choices" style="padding-bottom: 10px">
							<legend>
							Choice Limit 
							</legend>
							
							<span>	
									<input id="prop_choice_max_entry_enable" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_choice_max_entry_enable">Enable Choice Limit</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Limit the number of entries per choice option. Once a choice option has reached the maximum limit, it won't be available again for future selection. This is useful for reservation or booking form."/>
									<div id="form_choice_max_entry" style="display: none;padding-bottom: 0px">
											Only allow each choice to be selected
											<input id="choice_max_entry" style="width: 20px" class="text" value="" maxlength="255" type="text"> times
									</div>
									<div style="clear: both"></div>
							</span>
							
							</fieldset>
							
						</li>

						<li class="clear" id="prop_section_options">
							<fieldset class="choices">
							<legend>
							Section Break Options 
							</legend>
							
							<span>	
									<input id="prop_section_email_display" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_section_email_display">Display Section Break in Email</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enable this option if you need to display the content of the section break within the notification email, review page and entries page."/>
									
									<div style="clear: both"></div>
									
									<input id="prop_section_enable_scroll" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_section_enable_scroll">Enable Scrollbar</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="The section break will be set to a fixed height and a vertical scrollbar will be displayed as needed. This is useful to display large amount of text, such as terms and conditions, or contract agreement."/>
									<div id="div_section_size" style="display: none">
											Section Break Size:
											<select class="select" id="prop_section_size" autocomplete="off" tabindex="13" style="width: 100px">
												<option value="small">Small</option>
												<option value="medium">Medium</option>
												<option value="large">Large</option>
											</select>
									</div>
									<div style="clear: both"></div>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_file_options">
							<fieldset class="choices">
							<legend>
							Upload Options 
							</legend>
							
							<span>
							
									<input id="prop_file_enable_type_limit" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_enable_type_limit">Limit File Upload Type</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can block or only allow certain file types to be uploaded. Enter the file types extension into the textbox, separate them with commas. (example: jpg,gif,png,bmp)"/>
									<div id="form_file_limit_type" style="display: none">
											<select class="select" id="prop_file_block_or_allow" name="prop_file_block_allow" autocomplete="off" style="width: 90px">
											<option id="element_file_allow" value="a">Only Allow</option>
											<option id="element_file_block" value="b">Block</option>
											</select> <label class="choice" for="file_type_list">file types listed below:</label>
											<textarea class="textarea" rows="10" cols="100" style="width: 230px; height: 30px;margin-top: 5px" id="file_type_list"></textarea>
									</div>
									<div style="clear: both"></div>									
									<input id="prop_file_as_attachment" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_as_attachment">Send File as Email Attachment</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By default, all file uploads will be sent to your email as a download link. Checking this option will send the file as email attachment instead. WARNING: Don't enable this option if you expect to receive large files from your clients. If the files attached are larger than the allowed memory limit on your server, the email won't be sent."/>
									
									<div style="clear: both"></div>
									
									<input id="prop_file_enable_advance" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_enable_advance">Enable Advanced Uploader</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this option will enable advanced functionality, such as Upload Progress Bar, Multiple File Uploads, AJAX uploads, File Size Limit, etc. This option is recommended to be enabled."/>
										
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_file_advance_options">
							<fieldset class="choices">
							<legend>
							Advanced Uploader Options 
							</legend>
							
							<span>
									<input id="prop_file_auto_upload" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_auto_upload">Automatically Upload Files</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By default, the upload button or the form submit button need to be clicked to start uploading the file. By checking this option, the file will be automatically being uploaded as soon as the file being selected."/>
									<div style="clear: both"></div>
									
									<input id="prop_file_show_inline" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_show_inline">Enable inline attachment for Image Upload</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this option will show preview for uploaded image files."/>
									<div style="clear: both"></div>	
									
									<input id="prop_file_multi_upload" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_multi_upload">Allow Multiple File Upload</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this option will allow multiple files to be uploaded. You can also limit the maximum number of files to be uploaded."/>
									<div id="form_file_max_selection">
											Limit selection to a maximum 
											<input id="file_max_selection" style="width: 20px" class="text" value="" maxlength="255" type="text"> files
									</div>
									<div style="clear: both"></div>
									
									<input id="prop_file_limit_size" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_file_limit_size">Limit File Size</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can set the maximum size of a file allowed to be uploaded here."/>
									<div id="form_file_limit_size">
											Limit each file to a maximum 
											<input id="file_size_max" style="width: 20px" class="text" value="" maxlength="255" type="text"> MB
									</div>
									

							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_range">
							<fieldset class="range">
							<legend>
								Range
							</legend>
							
							<div style="padding-left: 2px">
								<span>
								<label for="element_range_min" class="desc">Min</label>
								<input type="text" value="" class="text" name="element_range_min" id="element_range_min">
								</span>
								<span>
								<label for="element_range_max" class="desc">Max</label>
								<input type="text" value="" class="text" name="element_range_max" id="element_range_max">
								</span>
								<span>
								<label for="element_range_limit_by" class="desc">Limit By
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can limit the amount of characters typed to be between certain characters or words, or between certain values in the case of number field. Leave the value blank or 0 if you don't want to set any limit."/></label>
								<select class="select" name="element_range_limit_by" id="element_range_limit_by">
									<option value="c">Characters</option>
									<option value="w">Words</option>
								</select>
								<select class="select" name="element_range_number_limit_by" id="element_range_number_limit_by">
									<option value="v">Value</option>
									<option value="d">Digits</option>
								</select>
								</span>
								
							</div>
							</fieldset>
						</li>

						<li class="clear" id="prop_default_value_text">
							<fieldset class="choices">
							<legend>
							Default Value
							</legend>
							
							<div class="left" style="padding-bottom: 5px">
								<input id="element_default_value_text_static" name="element_default_value_text_type" class="radio" value="" checked="checked" type="radio">
								<label class="choice" for="element_default_value_text_static">Text</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="The field will be prepopulated with the text you enter."/>
							</div>
								
							<div class="left" style="padding-left: 15px;padding-bottom: 5px">
								<input id="element_default_value_text_random" name="element_default_value_text_type" class="radio" value="" type="radio">
								<label class="choice" for="element_default_value_text_random">Random</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="The field will be prepopulated with random letters, numbers or both."/>
							</div>

							<div id="default_value_text_static_div">
								<input id="element_default_value_text" class="text large" name="element_default_value_text" value="" type="text">
							</div>

							<div id="default_value_text_random_div">
								<span>
									<strong>Length</strong> &#8674; <input id="element_text_default_length" style="width: 20px" class="text" value="" maxlength="255" type="text"> characters of 
									<select class="select" id="element_text_default_random_type" name="element_text_default_random_type" autocomplete="off">
											<option value="letter">letters</option>
											<option value="number">numbers</option>
											<option value="alphanum">alphanumeric</option>
											<option value="all">all</option>
									</select>
								</span>
								<span>
									<strong>Prefix</strong> &#8674; <input id="element_text_default_prefix" style="width: 60px" class="text" value="" maxlength="255" type="text">
								</span>
								<span>
									<strong>Letters Case</strong> &#8674; 
									<select class="select" id="element_text_default_case" name="element_text_default_case" autocomplete="off">
											<option value="u">uppercase</option>
											<option value="l">lowercase</option>
											<option value="b">both</option>
									</select>
								</span>
							</div>
							
							<span id="prop_default_value_text_autohide_span">	
									<input id="element_enable_placeholder_text" class="checkbox" value="" type="checkbox">
									<label class="choice" for="element_enable_placeholder_text">Auto Hide Default Value</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="As soon as the user types in the field, the default value will be automatically removed. Useful to provide short hint that describe the expected value of the field.<br/><br/>Tech terms: The default value will be used for the 'placeholder' attribute"/>
							</span>

							</fieldset>
							
						</li>

						<li class="clear" id="prop_number_advance_options">
							<fieldset class="choices">
							<legend>
							Advanced Option 
							</legend>
							
							<span>
									<input id="prop_number_enable_quantity" class="checkbox" value="" type="checkbox">
									<label class="choice" for="prop_number_enable_quantity">Enable as Quantity field</label>
									<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enable this option if your form has payment enabled and need to use quantity field to calculate the total price. Select the target field for the calculation from the dropdown list. Target field type must be one of the following: Multiple Choice, Drop Down, Checkboxes, Price."/>
									<div id="prop_number_quantity_link_div" style="display: none">
											Calculate with this field: <br />
											<select class="select large" id="prop_number_quantity_link" name="prop_number_quantity_link" style="width: 95%" autocomplete="off">
												<option value=""> -- No Supported Fields Available --</option>
											</select>
									</div>
							</span>
							
							</fieldset>
							
						</li>
						
						<li class="clear" id="prop_default_value" style="margin-top: 10px">
							<label class="desc" for="element_default">
							Default Value
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By setting this value, the field will be prepopulated with the text you enter."/>
							</label>
							
							<input id="element_default_value" class="text large" name="element_default_value" value="" type="text">
						</li>

						<li class="clear" id="prop_default_phone">
							<label class="desc" for="element_default_phone">
							Default Value
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By setting this value, the field will be prepopulated with the text you enter."/>
							</label>
							
							<input id="element_default_phone1" class="text" size="3" maxlength="3" name="element_default_phone1" value="" type="text"> - 
 							<input id="element_default_phone2" class="text" size="3" maxlength="3" name="element_default_phone2" value="" type="text"> - 
							<input id="element_default_phone3" class="text" size="4" maxlength="4" name="element_default_phone3" value="" type="text">
						</li>

						<li class="clear" id="prop_default_date">
							<label class="desc" for="element_default_date">
							Default Date
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Use the format ##/##/#### or any English date words, such as 'today', 'tomorrow', 'last friday', '+1 week', 'last day of next month', '3 days ago', 'monday next week'"/>
							</label>
							
							<input id="element_default_date" class="text large" name="element_default_date" value="" type="text">
						</li>

						<li class="clear" id="prop_default_time">
							<label class="desc" for="element_default_time">
							Default Time
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Example values: 'now', '+5 minute', '+2 hour', '-10 minute', '+2 hour 30 minute'"/>
							</label>
							
							<input id="element_default_time" class="text large" name="element_default_time" value="" type="text">
						</li>
						
						<li class="clear" id="prop_default_value_textarea" style="margin-top: 10px">
							<label class="desc" for="element_default_textarea">
							Default Value
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By setting this value, the field will be prepopulated with the text you enter."/>
							</label>
							
							<textarea class="textarea" rows="10" cols="50" id="element_default_value_textarea" name="element_default_value_textarea"></textarea>
						</li>
						
						<li class="clear" id="prop_placeholder" style="margin-bottom: 10px">
							<span>
								<input id="element_enable_placeholder" class="checkbox" value="" type="checkbox"> 
								<label class="choice" for="element_enable_placeholder">Auto Hide Default Value</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="As soon as the user types in the field, the default value will be automatically removed. Useful to provide short hint that describe the expected value of the field.<br/><br/>Tech terms: The default value will be used for the 'placeholder' attribute"/>
							</span>
						</li>

						<li class="clear" id="prop_default_country">
							<label class="desc" for="fieldaddress_default">
							Default Country
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By setting this value, the country field will be prepopulated with the selection you make."/>
							</label>
							<select class="select" id="element_countries" name="element_countries">
							<option value=""></option>
							
							<optgroup label="North America">
							<option value="Antigua and Barbuda">Antigua and Barbuda</option>
							<option value="Bahamas">Bahamas</option>
							<option value="Barbados">Barbados</option> 
							<option value="Belize">Belize</option> 
							<option value="Canada">Canada</option> 
							<option value="Costa Rica">Costa Rica</option> 
							<option value="Cuba">Cuba</option> 
							<option value="Dominica">Dominica</option> 
							<option value="Dominican Republic">Dominican Republic</option>
							<option value="El Salvador">El Salvador</option>
							<option value="Grenada">Grenada</option> 
							<option value="Guatemala">Guatemala</option> 
							<option value="Haiti">Haiti</option> 
							<option value="Honduras">Honduras</option> 
							<option value="Jamaica">Jamaica</option> 
							<option value="Mexico">Mexico</option> 
							<option value="Nicaragua">Nicaragua</option> 
							<option value="Panama">Panama</option> 
							<option value="Puerto Rico">Puerto Rico</option> 
							<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option> 
							<option value="Saint Lucia">Saint Lucia</option>
							<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option> 
							<option value="Trinidad and Tobago">Trinidad and Tobago</option>
							<option value="United States">United States</option>
							</optgroup>
							
							<optgroup label="South America">
							<option value="Argentina">Argentina</option>
							<option value="Bolivia">Bolivia</option> 
							<option value="Brazil">Brazil</option> 
							<option value="Chile">Chile</option> 
							<option value="Columbia">Columbia</option>
							<option value="Ecuador">Ecuador</option> 
							<option value="Guyana">Guyana</option> 
							<option value="Paraguay">Paraguay</option> 
							<option value="Peru">Peru</option> 
							<option value="Suriname">Suriname</option> 
							<option value="Uruguay">Uruguay</option> 
							<option value="Venezuela">Venezuela</option>
							</optgroup>
							
							<optgroup label="Europe">
							<option value="Albania">Albania</option>
							<option value="Andorra">Andorra</option>
							<option value="Armenia">Armenia</option>
							<option value="Austria">Austria</option>
							<option value="Azerbaijan">Azerbaijan</option>
							<option value="Belarus">Belarus</option>
							<option value="Belgium">Belgium</option>
							<option value="Bermuda">Bermuda</option>  
							<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
							<option value="Bulgaria">Bulgaria</option> 
							<option value="Croatia">Croatia</option> 
							<option value="Cyprus">Cyprus</option> 
							<option value="Czech Republic">Czech Republic</option>
							<option value="Denmark">Denmark</option> 
							<option value="Estonia">Estonia</option> 
							<option value="Finland">Finland</option> 
							<option value="France">France</option> 
							<option value="Georgia">Georgia</option>
							<option value="Germany">Germany</option>
							<option value="Greece">Greece</option>
							<option value="Guernsey">Guernsey</option>
							<option value="Hungary">Hungary</option> 
							<option value="Iceland">Iceland</option> 
							<option value="Ireland">Ireland</option> 
							<option value="Italy">Italy</option> 
							<option value="Latvia">Latvia</option> 
							<option value="Liechtenstein">Liechtenstein</option>
							<option value="Lithuania">Lithuania</option> 
							<option value="Luxembourg">Luxembourg</option> 
							<option value="Macedonia">Macedonia</option> 
							<option value="Malta">Malta</option> 
							<option value="Moldova">Moldova</option> 
							<option value="Monaco">Monaco</option> 
							<option value="Montenegro">Montenegro</option> 
							<option value="Netherlands">Netherlands</option> 
							<option value="Norway">Norway</option> 
							<option value="Poland">Poland</option> 
							<option value="Portugal">Portugal</option>
							<option value="Romania">Romania</option> 
							<option value="San Marino">San Marino</option>
							<option value="Serbia">Serbia</option>
							<option value="Slovakia">Slovakia</option>
							<option value="Slovenia">Slovenia</option> 
							<option value="Spain">Spain</option> 
							<option value="Sweden">Sweden</option> 
							<option value="Switzerland">Switzerland</option> 
							<option value="Ukraine">Ukraine</option> 
							<option value="United Kingdom">United Kingdom</option>
							<option value="Vatican City">Vatican City</option>
							</optgroup>
							
							<optgroup label="Asia">
							<option value="Afghanistan">Afghanistan</option>
							<option value="Bahrain">Bahrain</option>
							<option value="Bangladesh">Bangladesh</option>
							<option value="Bhutan">Bhutan</option>
							<option value="Brunei Darussalam">Brunei Darussalam</option>
							<option value="Myanmar">Myanmar</option>
							<option value="Cambodia">Cambodia</option>
							<option value="China">China</option>
							<option value="East Timor">East Timor</option>
							<option value="Hong Kong">Hong Kong</option> 
							<option value="India">India</option>
							<option value="Indonesia">Indonesia</option>
							<option value="Iran">Iran</option>
							<option value="Iraq">Iraq</option>
							<option value="Israel">Israel</option>
							<option value="Japan">Japan</option>
							<option value="Jordan">Jordan</option>
							<option value="Kazakhstan">Kazakhstan</option>
							<option value="North Korea">North Korea</option>
							<option value="South Korea">South Korea</option>
							<option value="Kuwait">Kuwait</option> 
							<option value="Kyrgyzstan">Kyrgyzstan</option> 
							<option value="Laos">Laos</option> 
							<option value="Lebanon">Lebanon</option> 
							<option value="Malaysia">Malaysia</option> 
							<option value="Maldives">Maldives</option> 
							<option value="Mongolia">Mongolia</option> 
							<option value="Nepal">Nepal</option> 
							<option value="Oman">Oman</option> 
							<option value="Pakistan">Pakistan</option> 
							<option value="Palestine">Palestine</option>
							<option value="Philippines">Philippines</option> 
							<option value="Qatar">Qatar</option> 
							<option value="Russia">Russia</option> 
							<option value="Saudi Arabia">Saudi Arabia</option> 
							<option value="Singapore">Singapore</option> 
							<option value="Sri Lanka">Sri Lanka</option>
							<option value="Syria">Syria</option>
							<option value="Taiwan">Taiwan</option> 
							<option value="Tajikistan">Tajikistan</option> 
							<option value="Thailand">Thailand</option> 
							<option value="Turkey">Turkey</option> 
							<option value="Turkmenistan">Turkmenistan</option> 
							<option value="United Arab Emirates">United Arab Emirates</option>
							<option value="Uzbekistan">Uzbekistan</option> 
							<option value="Vietnam">Vietnam</option> 
							<option value="Yemen">Yemen</option>
							</optgroup>
							
							<optgroup label="Oceania">
							<option value="Australia">Australia</option>
							<option value="Fiji">Fiji</option> 
							<option value="Kiribati">Kiribati</option>
							<option value="Marshall Islands">Marshall Islands</option> 
							<option value="Micronesia">Micronesia</option> 
							<option value="Nauru">Nauru</option> 
							<option value="New Zealand">New Zealand</option>
							<option value="Palau">Palau</option>
							<option value="Papua New Guinea">Papua New Guinea</option>
							<option value="Samoa">Samoa</option> 
							<option value="Solomon Islands">Solomon Islands</option>
							<option value="Tonga">Tonga</option> 
							<option value="Tuvalu">Tuvalu</option>  
							<option value="Vanuatu">Vanuatu</option>
							</optgroup>
							
							<optgroup label="Africa">
							<option value="Algeria">Algeria</option> 
							<option value="Angola">Angola</option> 
							<option value="Benin">Benin</option> 
							<option value="Botswana">Botswana</option> 
							<option value="Burkina Faso">Burkina Faso</option> 
							<option value="Burundi">Burundi</option> 
							<option value="Cameroon">Cameroon</option> 
							<option value="Cape Verde">Cape Verde</option>
							<option value="Central African Republic">Central African Republic</option>
							<option value="Chad">Chad</option>  
							<option value="Comoros">Comoros</option>  
							<option value="Congo">Congo</option>
							<option value="Djibouti">Djibouti</option> 
							<option value="Egypt">Egypt</option> 
							<option value="Equatorial Guinea">Equatorial Guinea</option> 
							<option value="Eritrea">Eritrea</option> 
							<option value="Ethiopia">Ethiopia</option> 
							<option value="Gabon">Gabon</option> 
							<option value="Gambia">Gambia</option> 
							<option value="Ghana">Ghana</option> 
							<option value="Guinea">Guinea</option> 
							<option value="Guinea-Bissau">Guinea-Bissau</option>
							<option value="Côte d'Ivoire">Côte d'Ivoire</option> 
							<option value="Kenya">Kenya</option> 
							<option value="Lesotho">Lesotho</option> 
							<option value="Liberia">Liberia</option> 
							<option value="Libya">Libya</option> 
							<option value="Madagascar">Madagascar</option> 
							<option value="Malawi">Malawi</option> 
							<option value="Mali">Mali</option>
							<option value="Mauritania">Mauritania</option> 
							<option value="Mauritius">Mauritius</option> 
							<option value="Morocco">Morocco</option> 
							<option value="Mozambique">Mozambique</option> 
							<option value="Namibia">Namibia</option>
							<option value="Niger">Niger</option>
							<option value="Nigeria">Nigeria</option> 
							<option value="Rwanda">Rwanda</option> 
							<option value="Sao Tome and Principe">Sao Tome and Principe</option>
							<option value="Senegal">Senegal</option> 
							<option value="Seychelles">Seychelles</option> 
							<option value="Sierra Leone">Sierra Leone</option>
							<option value="Somalia">Somalia</option> 
							<option value="South Africa">South Africa</option>
							<option value="Sudan">Sudan</option> 
							<option value="Swaziland">Swaziland</option> 
							<option value="United Republic of Tanzania">Tanzania</option>
							<option value="Togo">Togo</option> 
							<option value="Tunisia">Tunisia</option> 
							<option value="Uganda">Uganda</option> 
							<option value="Zambia">Zambia</option> 
							<option value="Zimbabwe">Zimbabwe</option>
							</optgroup>
							</select>
						</li>
						
						<li class="clear" id="prop_phone_default">
							<label class="desc" for="element_phone_default1">
							Default Value
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="By setting this value, the field will be prepopulated with the text you enter."/>
							</label>
							
							( <input id="element_phone_default1" class="text" size="3" name="text" value="" tabindex="11" maxlength="3" onkeyup="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" onblur="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" type="text"> ) 
							
							<input id="element_phone_default2" class="text" size="3" name="text" value="" tabindex="11" maxlength="3" onkeyup="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" onblur="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" type="text"> -
							<input id="element_phone_default3" class="text" size="4" name="text" value="" tabindex="11" maxlength="4" onkeyup="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" onblur="set_properties(JJ('#element_phone_default1').val().toString()+JJ('#element_phone_default2').val().toString()+JJ('#element_phone_default3').val().toString(), 'default_value')" type="text">
						</li>
						
						
						<li class="clear" id="prop_instructions">
							<label class="desc" for="element_instructions">
							Guidelines for User 
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This text will be displayed to your users while they're filling out particular field."/>
							</label>
							
							<textarea class="textarea" rows="10" cols="50" id="element_instructions"></textarea>
						</li>
						
						<li class="clear" id="prop_custom_css">
							<label class="desc" for="element_custom_css">
							Custom CSS Class
							<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This is an advanced option. You can add custom CSS classnames to the parent element of the field. This is useful if you would like to customize the styling for each of your field using your own CSS code. These custom class names will not appear live in the form builder, only on the live form."/>
							</label>
							
							<input id="element_custom_css" class="text large" name="element_custom_css" value="" maxlength="255" type="text">
						</li>

						<li class="clear" id="prop_section508_note">
							<div><span style="clear: both;font-size:150%;display: block" class="icon-info"></span> This field makes this form <a href="https://www.section508.gov" target="_blank">Section 508</a> non-compliant</div>
						</li>
						
						<li class="clear" id="prop_page_break_button" style="margin-top: 50px;margin-bottom: 50px">
								<fieldset style="padding-top: 15px">
								<legend>Page Submit Buttons</legend>
								
								<div class="left" style="padding-bottom: 5px">
								<input id="prop_submit_use_text" name="submit_use_image" class="radio" value="0" type="radio">
								<label class="choice" for="prop_submit_use_text">Use Text Button</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This is the default and recommended option. All buttons will use simple text. You can change the text being used on each page submit/back button."/>
								</div>
								
								<div class="left" style="padding-left: 5px;padding-bottom: 5px">
								<input id="prop_submit_use_image" name="submit_use_image" class="radio" value="1" type="radio">
								<label class="choice" for="prop_submit_use_image">Use Image Button</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Select this option if you prefer to use your own submit/back image buttons. Make sure to enter the full URL address to your images."/>
								</div>
								
								<div id="div_submit_use_text" class="left" style="padding-left: 8px;padding-bottom: 10px;width: 92%">
								<label class="desc" for="submit_primary_text">Submit Button</label>
								<input id="submit_primary_text" class="text large" name="submit_primary_text" value="" type="text">
								<label id="lbl_submit_secondary_text" class="desc" for="submit_secondary_text" style="margin-top: 10px">Back Button</label>
								<input id="submit_secondary_text" class="text large" name="submit_secondary_text" value="" type="text">
								</div>
								
								<div id="div_submit_use_image" class="left" style="padding-left: 8px;padding-bottom: 10px;width: 92%; display: none">
								<label class="desc" for="submit_primary_img">Submit Button. Image URL:</label>
								<input id="submit_primary_img" class="text large" name="submit_primary_img" value="http://" type="text">
								<label id="lbl_submit_secondary_img" class="desc" for="submit_secondary_img" style="margin-top: 10px">Back Button. Image URL:</label>
								<input id="submit_secondary_img" class="text large" name="submit_secondary_img" value="http://" type="text">
								</div>
								</fieldset>
						</li>
						
						</ul>
						<div class="bullet_bar_bottom">
							<img style="float: left" src="images/bullet_green.png" />
							<img style="float: right" src="images/bullet_green.png"/>
						</div>
					</div>
					
				</form>
			</div> <!-- end field properties pane -->
		</div>
		
		<div id="tab_form_properties" style="display: none">
			<div id="form_properties_pane" class="box">
				<div id="form_properties_holder">
						<div class="bullet_bar_top">
							<img style="float: left" src="images/bullet_pink.png" />
							<img style="float: right" src="images/bullet_pink.png"/>
						</div>

						<!--  start form properties pane -->
						<form id="form_properties" action="" onsubmit="return false;">
							<ul id="all_form_properties">
							<li class="form_prop">
								<label class="desc" for="form_title">Form Title 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="The title of your form displayed to the user when they see your form."/>
								</label>
								<input id="form_title" name="form_title" class="text large" value="" tabindex="1"  type="text">
							</li>
							<li class="form_prop">
								<label class="desc" for="form_description">Description 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This will appear directly below the form name. Useful for displaying a short description or any instructions, notes, guidelines."/>
								</label>
								<textarea class="textarea small" rows="10" cols="50" id="form_description" tabindex="2"></textarea>
							</li>
							<!--<li class="form_prop" style="margin-bottom: 20px">
								<span>
									<input id="form_name_hide" class="checkbox" value="" type="checkbox"> 
									<label class="choice" for="form_name_hide">Hide Title and Description from Public View</label>
								</span>
							</li>-->
							
							<li id="form_prop_confirmation" class="form_prop">
								<fieldset>
								<legend>Submission Confirmation</legend>
								
								<div class="left" style="padding-bottom: 5px">
								<input id="form_success_message_option" name="confirmation" class="radio" value="" checked="checked" type="radio">
								<label class="choice" for="form_success_message_option">Show Text</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This message will be displayed after your users have successfully submitted an entry. <br/><br/>You can enter any HTML codes, Javascript codes or Merge Tags as well."/>
								</div>
								
								<div class="left" style="padding-left: 15px;padding-bottom: 5px">
								<input id="form_redirect_option" name="confirmation" class="radio" value="" type="radio">
								<label class="choice" for="form_redirect_option">Redirect to Web Site</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="After your users have successfully submitted an entry, you can redirect them to another 
								website/URL of your choice.<br/><br/>You can insert Merge Tags into the URL to pass form data."/>
								</div>
								
								<textarea class="textarea" rows="10" cols="50" maxlength="100" id="form_success_message" tabindex="9" onkeyup="lookup(this);"></textarea>
								<span id="submitmessageerror" style="color:red;display:none;">Maximum 100 characters allowed.</span>
								<script> 
								function lookup(arg){
									document.getElementById("submitmessageerror").style.display = "none";
									var id = arg.getAttribute('id');
									var mexlength=arg.getAttribute('maxlength');
									 var value = (arg.value)?arg.value.length:0;
									 if(value == mexlength){
										document.getElementById("submitmessageerror").style.display = "block";
									}else{
										document.getElementById("submitmessageerror").style.display = "none";
									}
								}
								
								</script>
								<input id="form_redirect_url" class="text" name="form_redirect_url" value="http://" type="text">
								</fieldset>
							</li>
							
							<li id="form_prop_toggle" class="form_prop">
							<div style="text-align: right">
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="All settings below this point are optional. You can leave it as it is if you don't need it."/> <a href=""  id="form_prop_toggle_a">show more options</a> <img style="vertical-align: top;cursor: pointer" src="images/icons/resultset_next.gif" id="form_prop_toggle_img"/>
							</div> 
							</li>
							
							<li id="form_prop_language" class="leftCol advanced_prop form_prop">
								<label class="desc">
								Language 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can choose the language being used to display your form messages."/>
								</label>
								<div>
								<select autocomplete="off" id="form_language" class="select large">
								<option value="bulgarian">Bulgarian</option>
								<option value="chinese">Chinese (Traditional)</option>
								<option value="chinese_simplified">Chinese (Simplified)</option>
								<option value="czech">Czech</option>
								<option value="danish">Danish</option>
								<option value="dutch">Dutch</option>
								<option value="english">English</option>
								<option value="estonian">Estonian</option>
								<option value="finnish">Finnish</option>
								<option value="french">French</option>
								<option value="german">German</option>
								<option value="greek">Greek</option>
								<option value="hungarian">Hungarian</option>
								<option value="indonesia">Indonesia</option>
								<option value="italian">Italian</option>
								<option value="japanese">Japanese</option>
								<option value="korean">Korean</option>
								<option value="norwegian">Norwegian</option>
								<option value="polish">Polish</option>
								<option value="portuguese">Portuguese</option>
								<option value="romanian">Romanian</option>
								<option value="russian">Russian</option>
								<option value="slovak">Slovak</option>
								<option value="spanish">Spanish</option>
								<option value="swedish">Swedish</option>
								<option value="turkish">Turkish</option>
								</select>
								</div>
							</li>
							
							<li id="form_prop_label_alignment" class="rightCol advanced_prop form_prop">
								<label for="form_label_alignment" class="desc">Label Alignment 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Set the field label placement"/>
								</label>
								<div>
								<select autocomplete="off" id="form_label_alignment" class="select large">
								<option value="top_label">Top Aligned</option>
								<option value="left_label">Left Aligned</option>
								<option value="right_label">Right Aligned</option>
								</select>
								</div>
							</li>
							
							
								
						
							
							<li id="form_prop_processing" class="clear advanced_prop form_prop">
								<fieldset>
								<legend>Processing Options</legend>
									<!--<span>
										<input id="form_resume" class="checkbox" value="" type="checkbox"> 
										<label class="choice" for="form_resume">Allow Clients to Save and Resume Later</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Checking this will display additional link at the bottom of your form which would allow your clients to save their progress and resume later. This option only available if your form has at least two pages (has one or more Page Break field)."/>
									</span><br>-->
									<span>	
										<input id="form_review" class="checkbox" value="" type="checkbox">
										<label class="choice" for="form_review">Show Review Page Before Submitting</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If enabled, your clients will be prompted to a preview page that lets them double check their entries before submitting the form."/>
									</span><br>
								</fieldset>
							</li>
							
							<li class="clear advanced_prop form_prop" id="form_prop_resume" style="display: none;zoom: 1">
								<fieldset style="padding-top: 15px;padding-bottom: 20px">
								<legend>Resume Email Options</legend>
								
								<label class="desc" for="form_review_title">
								Resume Email Subject
								</label>
								
								<input id="form_resume_subject" class="text large" name="form_resume_subject" value="" maxlength="255" type="text">
								
								<label class="desc" for="form_resume_content">
								Resume Email Content 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can insert merge tags and HTML codes into Resume Email Subject and Resume Email Content."/>
								</label>
								
								<textarea class="textarea" rows="10" cols="50" id="form_resume_content" style="height: 5em"></textarea>
								
								<div style="border-bottom: 1px dashed green; height: 15px;margin: 5px 10px 10px 0"></div>

								<label class="desc" for="form_resume_from_name">
								From Name
								</label>
								<input id="form_resume_from_name" class="text large" name="form_resume_from_name" value="" maxlength="255" type="text">

								<label class="desc" for="form_resume_from_email_address">
								From Email
								</label>
								<input id="form_resume_from_email_address" class="text large" name="form_resume_from_email_address" value="" maxlength="255" type="text">

								</fieldset>
							</li>

							<li class="clear advanced_prop form_prop" id="form_prop_review" style="display: none;zoom: 1">
								<fieldset style="padding-top: 15px">
								<legend>Review Page Options</legend>
								
								<label class="desc" for="form_review_title">
								Review Page Title
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enter the title to be displayed on the review page."/>
								</label>
								
								<input id="form_review_title" class="text large" name="form_review_title" value="" maxlength="255" type="text">
								
								<label class="desc" for="form_review_description">
								Review Page Description 
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Enter some brief description to be displayed on the review page."/>
								</label>
								
								<textarea class="textarea" rows="10" cols="50" id="form_review_description" style="height: 2.5em"></textarea>
								<div style="border-bottom: 1px dashed green; height: 15px;margin-right: 10px"></div>
								<div class="left" style="padding-bottom: 5px;margin-top: 12px">
								<input id="form_review_use_text" name="form_review_option" class="radio" value="0" type="radio">
								<label class="choice" for="form_review_use_text">Use Text Button</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="This is the default and recommended option. All buttons on review page will use simple text."/>
								</div>
								
								<div class="left" style="padding-left: 5px;padding-bottom: 5px;margin-top: 12px">
								<input id="form_review_use_image" name="form_review_option" class="radio" value="1" type="radio">
								<label class="choice" for="form_review_use_image">Use Image Button</label>
								<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Select this option if you prefer to use your own submit/back image buttons. Make sure to enter the full URL address to your images."/>
								</div>
								
								<div id="div_review_use_text" class="left" style="padding-left: 8px;padding-bottom: 10px;width: 92%">
								<label class="desc" for="review_primary_text">Submit Button</label>
								<input id="review_primary_text" class="text large" name="review_primary_text" value="" type="text">
								<label id="lbl_review_secondary_text" class="desc" for="review_secondary_text" style="margin-top: 3px">Back Button</label>
								<input id="review_secondary_text" class="text large" name="review_secondary_text" value="" type="text">
								</div>
								
								<div id="div_review_use_image" class="left" style="padding-left: 8px;padding-bottom: 10px;width: 92%;display: none">
								<label class="desc" for="review_primary_img">Submit Button. Image URL:</label>
								<input id="review_primary_img" class="text large" name="review_primary_img" value="http://" type="text">
								<label id="lbl_review_secondary_img" class="desc" for="review_secondary_img" style="margin-top: 3px">Back Button. Image URL:</label>
								<input id="review_secondary_img" class="text large" name="review_secondary_img" value="http://" type="text">
								</div>
								</fieldset>
							</li>
							 
							<!--<li id="form_prop_protection" class="advanced_prop form_prop">
								<fieldset>
								<legend>Security</legend>
									<span>	
										<input id="form_password_option" class="checkbox" value=""  type="checkbox">
										<label class="choice" for="form_password_option">Turn On Password Protection</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If enabled, all users accessing the public form will then be required to type in the password to access the form. Your form is password protected."/>
										<div id="form_password" style="display: none">
											<img src="images/icons/key.png" alt="Password : " style="vertical-align: middle">
											<input id="form_password_data" autocomplete="off" style="width: 50%" class="text" value="" size="25"  type="text">
										</div>
									</span>
									
									<span style="clear: both;display: block">
										<input id="form_captcha" class="checkbox" value="" type="checkbox">
										<label class="choice" for="form_captcha">Turn On Spam Protection (CAPTCHA)</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If enabled, an image with random words will be generated and users will be required to enter the correct words in order to submit the form. This is useful to prevent abuse from bots or automated programs usually written to generate spam."/>
										<div id="form_captcha_type_option" style="display: block">
											
											<label class="choice" for="form_captcha_type">Type: </label>
											<select class="select" id="form_captcha_type" name="form_captcha_type" autocomplete="off">
												<option value="n">reCAPTCHA V2</option>
												<option value="i">Simple Image</option>
												<option value="t">Simple Text</option>
											</select>
											<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can select the difficulty level of the spam protection.
											 <br/>
											 <br/>
											 reCAPTCHA V2 : Display an image with distorted words. Improved version of reCAPTCHA by Google. If you use this, you'll need to fill your keys into the Settings page.
											 <br/>
											 <br/> 
											Simple Image : Display an image with a clear and sharp words. Most people will find this easy to read.
											 <br/>
											 <br/>
											Simple Text : Display a text (not an image) which contain simple question to solve."/>
										</div>
										<div id="form_prop_captcha508" style="display: none"><span style="vertical-align: middle;font-size:120%;" class="icon-info"></span> This type of CAPTCHA makes this form <a href="https://www.section508.gov" target="_blank">Section 508</a> non-compliant</div>
									</span>
									<span style="clear: both;display: block">
										<input id="form_unique_ip" class="checkbox" value="" type="checkbox">
										<label class="choice" for="form_unique_ip">Limit Entry Per IP Address</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Use this to prevent each client from filling out your form more than the allowed limit within a certain period. This is done by comparing client's IP Address."/>
										<div id="form_unique_ip_div" style="display: block">
											Maximum 
											<input id="form_unique_ip_maxcount" style="width: 25px" class="text" value="" maxlength="255" type="text"> entries per
											<select autocomplete="off" id="form_unique_ip_period" class="select">
												<option value="h">hour</option>
												<option value="d">day</option>
												<option value="w">week</option>
												<option value="m">month</option>
												<option value="y">year</option>
												<option value="l">lifetime</option>
											</select>
										</div>
									</span>
									<span style="clear: both;display: block">	
										<input id="form_limit_option" class="checkbox" value="" type="checkbox">
										<label class="choice" for="form_limit_option">Limit Submission</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="The form will be turned off after reaching the number of entries defined here."/>
										<div id="form_limit_div" style="display: none">
											<img src="images/icons/flag_red.png" alt="Maximum accepted entries : " style="vertical-align: middle"> Maximum accepted entries:
											<input id="form_limit" style="width: 20%" class="text" value="" maxlength="255" type="text">
										</div>
									</span>
									<span style="clear: both;display: block">
										 <input id="form_encryption_enable" class="checkbox" value="" type="checkbox">
										 <label class="choice" for="form_encryption_enable">Enable Data Encryption</label>
										 <img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If enabled, you'll be able to encrypt the data of <strong>Single Line Text</strong> and <strong>Paragraph Text</strong> fields on your form to add an extra layer of security.<br/><br/> Encrypted data can only be read with the <strong>Private Key</strong> known only to you, so if the data were to be compromised it could not be read. <br/><br/>Use this feature if you're collecting sensitive data."/>
								  	</span>
								</fieldset>
							</li>-->
							
							
							<!--<li id="form_prop_scheduling" class="clear advanced_prop form_prop">
								
								<fieldset>
								  <legend>Automatic Scheduling</legend> 
								 <div style="padding-bottom: 10px">
								 <input id="form_schedule_enable" class="checkbox" value="" style="float: left"  type="checkbox">
								 <label class="choice" style="float: left;margin-left: 5px;margin-right:3px;line-height: 1.7" for="form_schedule_enable">Enable Automatic Scheduling</label>
								  <img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If you would like to schedule your form to become active at certain period of time only, enable this option."/>
								 </div>
								<div id="form_prop_scheduling_start" style="display: none">
								
									<label class="desc">Only Accept Submission From Date: </label> 
									
									<span>
									<input type="text" value="" maxlength="2" size="2" style="width: 1.5em;" class="text" name="scheduling_start_mm" id="scheduling_start_mm">
									<label for="scheduling_start_mm">MM</label>
									</span>
									
									<span>
									<input type="text" value="" maxlength="2" size="2" style="width: 1.5em;" class="text" name="scheduling_start_dd" id="scheduling_start_dd">
									<label for="scheduling_start_dd">DD</label>
									</span>
									
									<span>
									 <input type="text" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="scheduling_start_yyyy" id="scheduling_start_yyyy">
									<label for="scheduling_start_yyyy">YYYY</label>
									</span>
									
									<span id="scheduling_cal_start">
											<input type="hidden" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="linked_picker_scheduling_start" id="linked_picker_scheduling_start">
											<div style="display: none"><img id="scheduling_start_pick_img" alt="Pick date." src="images/icons/calendar.png" class="trigger" style="margin-top: 3px; cursor: pointer" /></div>
									</span>
									<span>
									<select name="scheduling_start_hour" id="scheduling_start_hour" class="select"> 
									<option value="01">1</option>
									<option value="02">2</option>
									<option value="03">3</option>
									<option value="04">4</option>
									<option value="05">5</option>
									<option value="06">6</option>
									<option value="07">7</option>
									<option value="08">8</option>
									<option value="09">9</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
									</select>
									<label for="scheduling_start_hour">HH</label>
									</span>
									<span>
									<select name="scheduling_start_minute" id="scheduling_start_minute" class="select"> 
									<option value="00">00</option>
									<option value="15">15</option>
									<option value="30">30</option>
									<option value="45">45</option>
									</select>
									<label for="scheduling_start_minute">MM</label>
									</span>
									<span>
									<select name="scheduling_start_ampm" id="scheduling_start_ampm" class="select"> 
									<option value="am">AM</option>
									<option value="pm">PM</option>
									</select>
									<label for="scheduling_start_ampm">AM/PM</label>
									</span>

								</div>
									
								<div id="form_prop_scheduling_end" style="display: none">
								
									<label class="desc">Until Date:</label>
									<span>
									<input type="text" value="" maxlength="2" size="2" style="width: 1.5em;" class="text" name="scheduling_end_mm" id="scheduling_end_mm">
									<label for="scheduling_end_mm">MM</label>
									</span>
									
									<span>
									<input type="text" value="" maxlength="2" size="2" style="width: 1.5em;" class="text" name="scheduling_end_dd" id="scheduling_end_dd">
									<label for="scheduling_end_dd">DD</label>
									</span>
									
									<span>
									 <input type="text" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="scheduling_end_yyyy" id="scheduling_end_yyyy">
									<label for="scheduling_end_yyyy">YYYY</label>
									</span>
									
									<span id="scheduling_cal_end">
											<input type="hidden" value="" maxlength="4" size="4" style="width: 3em;" class="text" name="linked_picker_scheduling_end" id="linked_picker_scheduling_end">
											<div style="display: none"><img id="scheduling_end_pick_img" alt="Pick date." src="images/icons/calendar.png" class="trigger" style="margin-top: 3px; cursor: pointer" /></div>
									</span>
									<span>
									<select name="scheduling_end_hour" id="scheduling_end_hour" class="select"> 
									<option value="01">1</option>
									<option value="02">2</option>
									<option value="03">3</option>
									<option value="04">4</option>
									<option value="05">5</option>
									<option value="06">6</option>
									<option value="07">7</option>
									<option value="08">8</option>
									<option value="09">9</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
									</select>
									<label for="scheduling_end_hour">HH</label>
									</span>
									<span>
									<select name="scheduling_end_minute" id="scheduling_end_minute" class="select"> 
									<option value="00">00</option>
									<option value="15">15</option>
									<option value="30">30</option>
									<option value="45">45</option>
									</select>
									<label for="scheduling_end_minute">MM</label>
									</span>
									<span>
									<select name="scheduling_end_ampm" id="scheduling_end_ampm" class="select"> 
									<option value="am">AM</option>
									<option value="pm">PM</option>
									</select>
									<label for="scheduling_end_ampm">AM/PM</label>
									</span>

								</div>
								
								</fieldset>
							</li>-->

							<li id="form_prop_advanced_option" class="clear advanced_prop form_prop">
								
								<fieldset>
								  <legend>Advanced Option</legend> 
								  <!-- <div style="padding-bottom: 10px">
										 <input id="form_approval_enable" class="checkbox" value="1" style="float: left"  type="checkbox">
										 <label class="choice" style="float: left;margin-left: 5px;margin-right:3px;" for="form_approval_enable">Enable Approval Workflow</label>
										 <img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="If enabled, you'll be able to setup admin users to approve or deny submissions. <br/><br/>Once enabled, go to Form Manager and click the <strong>Approval</strong> link to configure the approvers and workflow."/>
								  </div> -->

								  <div style="padding-bottom: 10px">
										 <input id="form_custom_script_enable" class="checkbox" value="1" style="float: left"  type="checkbox">
										 <label class="choice" style="float: left;margin-left: 5px;margin-right:3px;line-height: 1.7" for="form_custom_script_enable">Load Custom Javascript File</label>
										 <img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="You can register your own custom javascript file to run inline with the form. Your script will be loaded each time the form is being displayed."/>
								  </div>
								  <div id="form_custom_script_div" style="display: none; margin-left: 25px;margin-bottom: 10px">
										<label class="desc" for="form_custom_script_url">Script URL:</label>
										<input id="form_custom_script_url" name="form_custom_script_url" style="width: 90%" class="text" value=""  type="text">
								  </div>
					
								</fieldset>
							</li>
							
							<li id="form_prop_breaker" class="clear advanced_prop form_prop"></li>
							
							<li id="prop_pagination_style" class="clear">
								<fieldset class="choices">
								<legend>
									Pagination Header Style 
									<img class="helpmsg" src="images/icons/help3.png" style="vertical-align: top; " title="When a form has multiple pages, the pagination header will be displayed on top of your form to let your clients know their progress. This is useful to help your clients understand how much of the form has been completed and how much left to be filled out."/>
								</legend>
								<ul>
									<li>
										<input type="radio" id="pagination_style_steps" name="pagination_style" class="choices_default" title="Complete Steps">
										<label for="pagination_style_steps" class="choice">Complete Steps</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="A complete series of all page titles will be displayed, along with the page numbers. The respective page title will be highlighted as the client continue to the next pages. Use this style if your form only has small number of pages."/>
									</li>
									<li>
										<input type="radio" id="pagination_style_percentage" name="pagination_style" class="choices_default" title="Progress Bar">
										<label for="pagination_style_percentage" class="choice">Progress Bar</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="A progress bar with a percentage number and the current active page title will be displayed. Use this style if your form has many pages or you need to put longer page title for each page."/>
									</li>
									<li>
										<input type="radio" id="pagination_style_disabled" name="pagination_style" class="choices_default" title="Disable Pagination Header">
										<label for="pagination_style_disabled" class="choice">Disable</label>
										<img class="helpmsg" src="images/icons/help2.png" style="vertical-align: top" title="Select this option if you prefer to disable the pagination header completely."/>
									</li>
								</ul>	
							</fieldset>
							</li>
							
							<li id="prop_pagination_titles" class="clear">
								<fieldset class="choices">
								<legend>
									Page Titles
									<img class="helpmsg" src="images/icons/help3.png" style="vertical-align: top; " title="Each page on your form will have its own title which you can specify here. This is useful to organize the form into meaningful content groups. Ensure that the titles of your form pages match your clients' expectations and succintly explain what each page is for. "/>
								</legend>
								<ul id="pagination_title_list">
									<li>
										<label for="pagetitleinput_1">1.</label> 
										<input type="text" value="" autocomplete="off" class="text" id="pagetitle_1" /> 
									</li>	
								</ul>	
							</fieldset>
								
							</li>
							
							</ul>
						</form>
						<!--  end form properties pane -->

						<div class="bullet_bar_bottom">
							<img style="float: left" src="images/bullet_pink.png" />
							<img style="float: right" src="images/bullet_pink.png"/>
						</div>
				</div>
			</div>
		</div>
	</div>	
		
</div><!-- /#sidebar -->

<div id="dialog-message" title="Error. Unable to complete the task." class="buttons" style="display: none">
	<img src="images/icons/warning.png" title="Warning" /> 
	<p>
		There was a problem connecting with your website server.<br/>
		Please try again within few minutes.<br/><br/>
		If the problem persist, please contact us and we'll get back to you immediately!
	</p>
</div>
<div id="dialog-warning" title="Error Title" class="buttons" style="display: none">
	<img src="images/icons/warning.png" title="Warning" /> 
	<p id="dialog-warning-msg">
		Error
	</p>
</div>
<div id="dialog-confirm-field-delete" title="Are you sure you want to delete this field?" class="buttons" style="display: none">
	<span class="icon-bubble-notification"></span> 
	<p>
		This action cannot be undone.<br/>
		<strong>All data collected by the field will be deleted as well.</strong><br/><br/>
	</p>
	
</div>
<div id="dialog-confirm-encryption-disable" title="Are you sure you want to turn off data encryption?" class="buttons" style="display: none">
	<span class="icon-bubble-notification"></span> 
	<p>
		Please be careful. This action cannot be undone.<br/>
		<strong>All existing data will remain encrypted, and you won't be able to view them anymore.</strong><br/><br/>
	</p>
	
</div>
<div id="dialog-confirm-choice-delete" title="Are you sure you want to delete this choice?" class="buttons" style="display: none">
	<span class="icon-bubble-notification"></span> 
	<p>
		This action cannot be undone.<br/>
		<strong>All collected data associated with this choice will be deleted as well.</strong><br/><br/>
	</p>
	
</div>
<div id="dialog-form-saved" title="Success! Your form has been saved" class="buttons" style="display: none">
	<span class="icon-checkmark-circle"></span> 
	<p>
		<strong>Do you want to continue editing this form?</strong><br/><br/>
	</p>	
</div>
<div id="dialog-form-corruption" title="Form Error" class="buttons" style="display: none">
	<span class="icon-cross2" style="color: red;left: 48% !important;position: absolute;top: -1px;"></span> 
	<p>
	<strong style="position: absolute;top: 8px;">Noticed errors with the Form. Please select Fix Form Errors to fix these errors. Otherwise, users will not be able to submit the Forms.</strong><br/><br/>
	</p>	
</div>
<input type="hidden" id="form-corruption-fix-config" value="1">
<input type='hidden' id='authTokenTrackActivity' value='AQIC5wM2LY4Sfcx_xQJeEB_h7b_8354v8UhrY3vjmtKAYBo.*AAJTSQACMDEAAlNLABQtNTY5NTI3MzY3MjY3MjI5NjM0OQACUzEAAA..*'><div id="dialog-insert-choices" title="Bulk insert choices" class="buttons" style="display: none"> 
	<form class="dialog-form">				
		<ul>
			<li>
				<label for="bulk_insert_choices" class="description">You can insert a list of choices here. Separate the choices with new line. </label>
				<div>
				<textarea cols="90" rows="8" class="element textarea medium" name="bulk_insert_choices" id="bulk_insert_choices"></textarea> 
				</div> 
			</li>
		</ul>
	</form>
</div>
<div id="dialog-insert-matrix-rows" title="Bulk insert rows" class="buttons" style="display: none"> 
	<form class="dialog-form">				
		<ul>
			<li>
				<label for="bulk_insert_rows" class="description">You can insert a list of rows here. Separate the rows with new line. </label>
				<div>
				<textarea cols="90" rows="8" class="element textarea medium" name="bulk_insert_rows" id="bulk_insert_rows"></textarea> 
				</div> 
			</li>
		</ul>
	</form>
</div>
<div id="dialog-insert-matrix-columns" title="Bulk insert columns" class="buttons" style="display: none"> 
	<form class="dialog-form">				
		<ul>
			<li>
				<label for="bulk_insert_columns" class="description">You can insert a list of columns here. Separate the labels with new line. </label>
				<div>
				<textarea cols="90" rows="8" class="element textarea medium" name="bulk_insert_columns" id="bulk_insert_columns"></textarea> 
				</div> 
			</li>
		</ul>
	</form>
</div> 
<div id="dialog-enable-data-encryption" title="Create Encryption Keys" class="buttons" style="display: none">
	<span class="icon-key"></span> 
	<p>
		Your data will be encrypted using secure Asymmetrical Cryptography system that uses <strong>Public Key</strong> and <strong>Private Key</strong> to encrypt and decrypt data.
		<br/><br/>
	</p>
	
</div> 
<div id="dialog-enable-data-encryption-success" title="Success! Save your Private Key" class="buttons" style="display: none">
	<span class="icon-checkmark-circle"></span> 
	<p>
		Your Public Key has been saved. Your <strong>Private Key</strong> is displayed below.<br/>

		<div id="div_dialog_encryption_success" style="padding: 15px;margin-top:10px">
			<input onclick="javascript: this.select()" type="text" value="" class="text" name="dialog-enable-encryption-private-key" id="dialog-enable-encryption-private-key" />
		</div> 

		<strong style="text-decorration: underline;font-size: 110%">Please copy and save it in a secure place!</strong><br/>
		
		<span style="font-size: 90%;display: block;margin-top:30px;margin-bottom: 20px">You'll need this private key to read/decrypt your data in the future.<br/>
		It cannot be recovered if you lose it.</span>
	</p>
	
</div> 
<div class="clear"></div>
	
	</div><!-- /#main -->
	
	<div id="footer">
		
		<p class="copyright">Copyright &copy;  2024</p>
		<div class="clear"></div>
		
	</div><!-- /#footer -->
	

</div><!-- /#container -->

</div><!-- /#bg -->

<script type="text/javascript" src="js/jquery.legacy.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

<script type="text/javascript" src="js/builder.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript" src="js/jquery.uploadifive.js"></script>
<link rel="stylesheet" href="js/video-js.css">
<script type="text/javascript" src="js/video.min.js"></script>
<script type="text/javascript" src="js/Youtube.js"></script>
<script type="text/javascript">
	$(function(){
	$('#li_1').data('field_properties',{"title":"Text","guidelines":"","size":"medium","is_required":"0","is_encrypted":"0","is_unique":"0","is_readonly":"0","is_private":"0","type":"text","position":"0","id":"1","is_db_live":1,"default_value":"","enable_placeholder":0,"constraint":"","css_class":"","range_min":0,"range_max":0,"range_limit_by":"c","choice_columns":1,"choice_has_other":0,"choice_other_label":null,"choice_limit_rule":"atleast","choice_limit_qty":1,"choice_limit_range_min":1,"choice_limit_range_max":1,"choice_max_entry":0,"time_showsecond":0,"time_24hour":0,"address_hideline2":0,"address_us_only":0,"date_enable_range":0,"date_range_min":"0000-00-00","date_range_max":"0000-00-00","date_enable_selection_limit":0,"date_selection_max":1,"date_disable_past_future":0,"date_past_future":"p","date_disable_dayofweek":0,"date_disabled_dayofweek_list":"","date_disable_specific":0,"date_disabled_list":"","file_enable_type_limit":1,"file_block_or_allow":"b","file_type_list":"php,php3,php4,php5,phtml,exe,pl,cgi,html,htm,js","file_as_attachment":0,"file_enable_advance":1,"file_auto_upload":1,"file_show_inline":1,"file_enable_multi_upload":1,"file_max_selection":5,"file_enable_size_limit":0,"file_size_max":2,"submit_use_image":0,"submit_primary_text":"Continue","submit_secondary_text":"Previous","submit_primary_img":null,"submit_secondary_img":null,"page_title":null,"matrix_allow_multiselect":0,"matrix_parent_id":0,"section_display_in_email":1,"section_enable_scroll":0,"number_enable_quantity":0,"number_quantity_link":null,"text_default_type":"static","text_default_length":10,"text_default_random_type":"letter","text_default_prefix":"","text_default_case":"u","email_enable_confirmation":0,"email_confirm_field_label":null,"media_type":"image","media_image_src":"","media_image_width":"","media_image_height":"","media_image_alignment":"l","media_image_alt":"","media_image_href":"","media_display_in_email":0,"media_video_src":"","media_video_size":"large","media_video_muted":0,"media_video_caption_file":"","options":""});
$('#li_2').data('field_properties',{"title":"Paragraph","guidelines":"","size":"medium","is_required":"0","is_encrypted":"0","is_unique":"0","is_readonly":"0","is_private":"0","type":"textarea","position":"1","id":"2","is_db_live":1,"default_value":"","enable_placeholder":0,"constraint":"","css_class":"","range_min":0,"range_max":0,"range_limit_by":"c","choice_columns":1,"choice_has_other":0,"choice_other_label":null,"choice_limit_rule":"atleast","choice_limit_qty":1,"choice_limit_range_min":1,"choice_limit_range_max":1,"choice_max_entry":0,"time_showsecond":0,"time_24hour":0,"address_hideline2":0,"address_us_only":0,"date_enable_range":0,"date_range_min":"0000-00-00","date_range_max":"0000-00-00","date_enable_selection_limit":0,"date_selection_max":1,"date_disable_past_future":0,"date_past_future":"p","date_disable_dayofweek":0,"date_disabled_dayofweek_list":"","date_disable_specific":0,"date_disabled_list":"","file_enable_type_limit":1,"file_block_or_allow":"b","file_type_list":"php,php3,php4,php5,phtml,exe,pl,cgi,html,htm,js","file_as_attachment":0,"file_enable_advance":1,"file_auto_upload":1,"file_show_inline":1,"file_enable_multi_upload":1,"file_max_selection":5,"file_enable_size_limit":0,"file_size_max":2,"submit_use_image":0,"submit_primary_text":"Continue","submit_secondary_text":"Previous","submit_primary_img":null,"submit_secondary_img":null,"page_title":null,"matrix_allow_multiselect":0,"matrix_parent_id":0,"section_display_in_email":1,"section_enable_scroll":0,"number_enable_quantity":0,"number_quantity_link":null,"text_default_type":"static","text_default_length":10,"text_default_random_type":"letter","text_default_prefix":"","text_default_case":"u","email_enable_confirmation":0,"email_confirm_field_label":null,"media_type":"image","media_image_src":"","media_image_width":"","media_image_height":"","media_image_alignment":"l","media_image_alt":"","media_image_href":"","media_display_in_email":0,"media_video_src":"","media_video_size":"large","media_video_muted":0,"media_video_caption_file":"","options":""});
$('#li_5').data('field_properties',{"title":"Time","guidelines":"","size":"medium","is_required":"0","is_encrypted":"0","is_unique":"0","is_readonly":"0","is_private":"0","type":"time","position":"2","id":"5","is_db_live":1,"default_value":"","enable_placeholder":0,"constraint":"","css_class":"","range_min":0,"range_max":0,"range_limit_by":"c","choice_columns":1,"choice_has_other":0,"choice_other_label":null,"choice_limit_rule":"atleast","choice_limit_qty":1,"choice_limit_range_min":1,"choice_limit_range_max":1,"choice_max_entry":0,"time_showsecond":0,"time_24hour":0,"address_hideline2":0,"address_us_only":0,"date_enable_range":0,"date_range_min":"0000-00-00","date_range_max":"0000-00-00","date_enable_selection_limit":0,"date_selection_max":1,"date_disable_past_future":0,"date_past_future":"p","date_disable_dayofweek":0,"date_disabled_dayofweek_list":"","date_disable_specific":0,"date_disabled_list":"","file_enable_type_limit":1,"file_block_or_allow":"b","file_type_list":"php,php3,php4,php5,phtml,exe,pl,cgi,html,htm,js","file_as_attachment":0,"file_enable_advance":1,"file_auto_upload":1,"file_show_inline":1,"file_enable_multi_upload":1,"file_max_selection":5,"file_enable_size_limit":0,"file_size_max":2,"submit_use_image":0,"submit_primary_text":"Continue","submit_secondary_text":"Previous","submit_primary_img":null,"submit_secondary_img":null,"page_title":null,"matrix_allow_multiselect":0,"matrix_parent_id":0,"section_display_in_email":1,"section_enable_scroll":0,"number_enable_quantity":0,"number_quantity_link":null,"text_default_type":"static","text_default_length":10,"text_default_random_type":"letter","text_default_prefix":"","text_default_case":"u","email_enable_confirmation":0,"email_confirm_field_label":null,"media_type":"image","media_image_src":"","media_image_width":"","media_image_height":"","media_image_alignment":"l","media_image_alt":"","media_image_href":"","media_display_in_email":0,"media_video_src":"","media_video_size":"large","media_video_muted":0,"media_video_caption_file":"","options":""});
$('#li_3').data('field_properties',{"title":"Multiple Choice","guidelines":"","size":"medium","is_required":"0","is_encrypted":"0","is_unique":"0","is_readonly":"0","is_private":"0","type":"radio","position":"3","id":"3","is_db_live":1,"default_value":"","enable_placeholder":0,"constraint":"","css_class":"","range_min":0,"range_max":0,"range_limit_by":"c","choice_columns":1,"choice_has_other":0,"choice_other_label":"Other","choice_limit_rule":"atleast","choice_limit_qty":1,"choice_limit_range_min":1,"choice_limit_range_max":1,"choice_max_entry":0,"time_showsecond":0,"time_24hour":0,"address_hideline2":0,"address_us_only":0,"date_enable_range":0,"date_range_min":"0000-00-00","date_range_max":"0000-00-00","date_enable_selection_limit":0,"date_selection_max":1,"date_disable_past_future":0,"date_past_future":"p","date_disable_dayofweek":0,"date_disabled_dayofweek_list":"","date_disable_specific":0,"date_disabled_list":"","file_enable_type_limit":1,"file_block_or_allow":"b","file_type_list":"php,php3,php4,php5,phtml,exe,pl,cgi,html,htm,js","file_as_attachment":0,"file_enable_advance":1,"file_auto_upload":1,"file_show_inline":1,"file_enable_multi_upload":1,"file_max_selection":5,"file_enable_size_limit":0,"file_size_max":2,"submit_use_image":0,"submit_primary_text":"Continue","submit_secondary_text":"Previous","submit_primary_img":null,"submit_secondary_img":null,"page_title":null,"matrix_allow_multiselect":0,"matrix_parent_id":0,"section_display_in_email":1,"section_enable_scroll":0,"number_enable_quantity":0,"number_quantity_link":null,"text_default_type":"static","text_default_length":10,"text_default_random_type":"letter","text_default_prefix":"","text_default_case":"u","email_enable_confirmation":0,"email_confirm_field_label":null,"media_type":"image","media_image_src":"","media_image_width":"","media_image_height":"","media_image_alignment":"l","media_image_alt":"","media_image_href":"","media_display_in_email":0,"media_video_src":"","media_video_size":"large","media_video_muted":0,"media_video_caption_file":"","options":{"1":{"position":1,"option":"First option","is_default":"0","is_hidden":"0","is_db_live":1},"2":{"position":2,"option":"Second option","is_default":"0","is_hidden":"0","is_db_live":1},"3":{"position":3,"option":"Third option","is_default":"0","is_hidden":"0","is_db_live":1}},"last_option_id":"3"});
$('#li_4').data('field_properties',{"title":"Full Name","guidelines":"","size":"medium","is_required":"0","is_encrypted":"0","is_unique":"0","is_readonly":"0","is_private":"0","type":"simple_name","position":"4","id":"4","is_db_live":1,"default_value":"","enable_placeholder":0,"constraint":"","css_class":"","range_min":0,"range_max":0,"range_limit_by":"c","choice_columns":1,"choice_has_other":0,"choice_other_label":null,"choice_limit_rule":"atleast","choice_limit_qty":1,"choice_limit_range_min":1,"choice_limit_range_max":1,"choice_max_entry":0,"time_showsecond":0,"time_24hour":0,"address_hideline2":0,"address_us_only":0,"date_enable_range":0,"date_range_min":"0000-00-00","date_range_max":"0000-00-00","date_enable_selection_limit":0,"date_selection_max":1,"date_disable_past_future":0,"date_past_future":"p","date_disable_dayofweek":0,"date_disabled_dayofweek_list":"","date_disable_specific":0,"date_disabled_list":"","file_enable_type_limit":1,"file_block_or_allow":"b","file_type_list":"php,php3,php4,php5,phtml,exe,pl,cgi,html,htm,js","file_as_attachment":0,"file_enable_advance":1,"file_auto_upload":1,"file_show_inline":1,"file_enable_multi_upload":1,"file_max_selection":5,"file_enable_size_limit":0,"file_size_max":2,"submit_use_image":0,"submit_primary_text":"Continue","submit_secondary_text":"Previous","submit_primary_img":null,"submit_secondary_img":null,"page_title":null,"matrix_allow_multiselect":0,"matrix_parent_id":0,"section_display_in_email":1,"section_enable_scroll":0,"number_enable_quantity":0,"number_quantity_link":null,"text_default_type":"static","text_default_length":10,"text_default_random_type":"letter","text_default_prefix":"","text_default_case":"u","email_enable_confirmation":0,"email_confirm_field_label":null,"media_type":"image","media_image_src":"","media_image_width":"0","media_image_height":"0","media_image_alignment":"l","media_image_alt":"","media_image_href":"","media_display_in_email":0,"media_video_src":"","media_video_size":"large","media_video_muted":0,"media_video_caption_file":"","options":""});
$('#form_header').data('form_properties',{"id":553604,"name":"Test Form for testing","name_hide":0,"active":1,"description":"this form is for tesing purpose only","redirect":"","redirect_enable":0,"approval_enable":0,"success_message":"Success! Your submission has been saved!","password":"","frame_height":"712","unique_ip":0,"unique_ip_maxcount":5,"unique_ip_period":"d","captcha":0,"captcha_type":"r","review":0,"encryption_enable":0,"encryption_public_key":null,"language":"english","resume_enable":0,"resume_subject":"Your submission to {form_name} has been saved","resume_content":"Thank you! Your submission to <b>{form_name}<\/b> has been saved.<br \/><br \/>You can resume the form at any time by clicking the link below:<br \/><a href=\"{resume_url}\">{resume_url}<\/a><br \/><br \/><br \/><br \/><b>IMPORTANT:<\/b><br \/>Your submission is considered incomplete until you resume the form and press the submit button.","resume_from_name":"Citus Health","resume_from_email_address":"no-reply@citushealth.ca","limit_enable":0,"limit":0,"label_alignment":"top_label","schedule_enable":0,"schedule_start_date":"0000-00-00","schedule_start_hour":"12:00:am","schedule_end_date":"0000-00-00","schedule_end_hour":"12:00:am","page_total":1,"pagination_type":"steps","review_primary_text":"Submit","review_secondary_text":"Previous","review_primary_img":"","review_secondary_img":"","review_use_image":0,"review_title":"Review Your Entry","review_description":"Please review your entry below. Click Submit button to finish.","custom_script_enable":0,"custom_script_url":""});
$('#form_header').data('is_new_form', 0);
$('#form_header').data('session_id','8f0afbbba11659b2cc9777adbe8c7dcd');
		$(".field_counts").html("You have used <span id='field_count_span'> 6</span> fields out of 1200 <input type='hidden' id='maximum_field_count' value='1200'><input type='hidden' id='activity_form_id' value='553604'>")
	});
</script></body>
</html><script type="text/javascript">
$( document ).ready(function() {
	$(document).on('click','#form_builder_preview li',function(event){
		var cols="";
		   var clicked = $(this).find(':input');
		   clicked.each(function(e) {
	           cols += $(this).attr('id')+', ';
	        });
		   $(".prop_custom_cssnew").show();
		   $("#prop_custom_cssnew").show();
           if(($(this).hasClass('page_break') || $(this).hasClass('media') || $(this).hasClass('section_break'))){
		       $("#element_db_cols").html("No element associated.");
            }else{
               if(($(this).find('.description').attr('for') != undefined) && (cols == "")){
	        		cols = $(this).find('.description').attr('for');
	                cols = cols.replace(/,\s*$/, "");
					$("#element_db_cols").html(cols);
				}else if(cols != ""){
				    if($(this).hasClass('matrix')){
					    var newcols;
	                    $('.matrix').on('click','tbody tr', function() {
							    var id = $(this).closest('tr').attr('id');
							    newcols = id.replace(/mr/, "");
							    cols = "element"+newcols;
							    $("#element_db_cols").show();
							    $("#element_db_cols").html(cols);
							    return false;
						});
	               
		                if(newcols == undefined){
		                    var colsempty="";
		                 	$('.matrix tbody tr').each(function() {
			                 	var id = $(this).closest('tr').attr('id');
			                    newcolsempty = id.replace(/mr/, "");
								colsempty += "element"+newcolsempty+", ";
							})
		                 	 colsempty = colsempty.replace(/,\s*$/, "");
		                 	 $("#element_db_cols").html(colsempty);
		                 	 return false;
		                 }
                    }else if(($(this).hasClass('simple_name') || $(this).hasClass('address') || $(this).hasClass('checkboxes'))){
				  		 cols = cols.replace(/,\s*$/, "");
					}else{
				        cols = cols.replace(/,\s*$/, "");
				  		 cols = cols.split(",")[0];
				  		 var count_ = (cols.match(/_/g)).length;
				  		 if(count_ == 2){
	                       cols = cols.substring(0, cols.lastIndexOf("_"));
				  		 }
				  	}
                      $("#element_db_cols").html(cols);
				  }else{
				      $("#element_db_cols").html("No element associated.");
				  }
            }
    });
});
</script>