Preview Method for contact form 7

wp-contact-form-7

<script>
	jQuery(function($) {	
		// form preview 
		var validKey = {
			"your-name": "Full Name",
			"phone-number": "Phone Number",
			"date-of-birth": "Date Of Birth",
			"age" : "Age",
			"gender" : "Gender",
			"your-emai" : "Email",
			"temporary-address" : "Temporary Address",
			"permanent-address" : "Permanent Address",
			"education[]" : "Education",
			"previous-travel-history[]" : "Travel History",
			"profession[]" : "Profession",
			"monthly-income[]" : "Monthly Income",
			"event-and-entertainment[]" : "Which department would you like to make an appointment",
			"travel-and-tours" : "Which department would you like to make an appointment",
			"consultant-services" : "Which department would you like to make an appointment",
			"visa-documentation" : "Which department would you like to make an appointment",
			"for-all-in-one-spot" : "Which department would you like to make an appointment",
			"appointment-type" : "Choose an Appointment Type",
			"appointment-date" : "Appointment Date",
			"appointment-time-first-shift" : "First Shift",
			"appointment-time-second-shift" : "Second Shift"
		};
		
		$("#cf7mls-next-btn-cf7mls_step-4").on("click", function(e) {
			var resp = $("form.wpcf7-form").serializeArray();
			var trHTML = '';
			$.each(resp, function (i, userData) {
							console.log(userData);
				if(validKey.hasOwnProperty(userData.name)) {
					trHTML +=
						'<tr><td>'
						+ validKey[userData.name]
						+ ': </td><td>'			
						+ userData.value 
						+ '</td></tr>';
				}
			});
			$('#preview').html(trHTML);
		});

	});
</script>

<table class="table table-bordered">
  <tbody id="preview" ></tbody>
</table>



form 

<br>
<h2>Personal Information</h2>
<br>

[text* your-name]Your Name[/text*]
[number* phone-number]Phone Number[/number*]
[date* date-of-birth class:walcf7-datepicker placeholder]Date of Birth [/date*]
[number* age]Age[/number*]
[checkbox* gender label_first use_label_element exclusive "Male" "Female" "Other"]Gender[/checkbox*]
[email* your-email]Your Email[/email*]
[textarea temporary-address]Temporary Address[/textarea]
[textarea permanent-address]Permanent Address[/textarea]



<br>
<h2>Academic Background</h2>
<br>


[checkbox* education label_first use_label_element exclusive "High School" "Bachelor's Degree" "Master's Degree" "PDH"] EDUCATION [/checkbox*]

[checkbox* previous-travel-history label_first use_label_element exclusive "yes" "no"]Previous Travel History[/checkbox*]

[checkbox* profession label_first use_label_element exclusive "Student" "Employee" "Business Owner"] Profession[/checkbox*]

[checkbox* monthly-income label_first use_label_element exclusive "N/A" "10k-20k" "20k-50k" "50k-100k" "100K Plus"] Monthly Income[/checkbox*]



<br>
<h2>Which department would you like to make an appointment</h2>
<br>

[select event-and-entertainment 
"Surya International Award"
" - Announcement ceremony / Dubai"
" - Nomination ceremony / Japan"
" - Award ceremony / USA"
"..."
"International Musical Concert"
" - Sakura night / Canada"
] Event and Entertainment Event Tour Package [/select]

[select travel-and-tours 
"International Tour"
" - Dubai and Malaysia"
" - Japan and Korea"
" - Australia and New Zealand"
" - Europe and UK"
" - USA and Canada"
"..."
"Ticketing"
" - Domestic"
" - International"
] Travel and Tours Seasonal Tour Package [/select]

[select consultant-services 
Abroad study"
" - Japan and Korea"
" - Australia and New Zealand"
" - Europe and UK"
" - USA and Canada"
"..."
Language Classes
" - Japanese and Korean language"
"..."
"Test preparation"
" - IELTS /TOEFL/GRE/GMAT/SAT/PTE/OET"
] Consultant Services [/select]

[select visa-documentation 
"Globally Online Visa Service"
" - Japan and Korea"
" - Australia and New Zealand"
" - EUROPE and UK"
" - USA and Canada"
"..."
"Special Visa Offer"
" - Japan SSW"
" - UK Agriculture"
" - Job Recruitment Agency"
] Visa Documentation [/select]


[select for-all-in-one-spot 
"Surya international award international musical concert"
"International tour ticketing"
"Abroad study language classes test preparation"
"Globally online visa service job recruitment agency"
] For All In One Spot[/select]



<br>
<h2>Appointment Time</h2>
<br>
[radio appointment-type label_first use_label_element default:1 "Office Visit" "Phone Call"]Choose an Appointment Type[/radio]

<b>Choose a time</b>

[date* appointment-date class:walcf7-datepicker placeholder]Date[/date*]

[text appointment-time-first-shift class:walcf7-timepicker]First Shift[/text]

[text appointment-time-second-shift class:walcf7-timepicker]Second Shift[/text]


<br>
<h2>Preview</h2>
<br>

<table class="table table-bordered">
  <tbody id="preview" ></tbody>
</table>

[submit "Send"]