jenningscreate
6/28/2018 - 6:20 PM
SeedLogix Multi-Step Form Integration
This code will allow you to create a multi-step form that integrates with the SeedLogix CMS.
How to Use This Code Create your multi-step form using the HTML below. Then, create a form in the SeedLogix CMS with the exact same fields (must be in the same order!) and set each one to a simple text input so that any value can be carried over.
How the jQuery Works First, the code loops through the li tags in the multi-step form (HTML below) and assigns IDs to each of the
NOTE: This version only supports select, input, and textarea form fields.
<script>
$(document).ready(function() {
$('#multistep-form li').each(function(i) {
$(this).attr('id', 'field-' + i);
});
});
</script>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
$('.custom-form li:not(.submit-li)').each(function(i) {
var fieldID = '#field-' + i;
if ($(fieldID).has('select')) {
var fieldValue = $(fieldID).find('option:selected').val();
$(this).find('input').attr('value', fieldValue);
} else {}
if ($(fieldID).has('input')) {
var fieldValue = $(fieldID).find('input').val();
$(this).find('input').attr('value', fieldValue);
} else {}
if ($(fieldID).has('textarea')) {
var fieldValue = $(fieldID).find('input').val();
$(this).find('input').attr('value', fieldValue);
} else {}
});
$('.custom-form #submit').click();
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
<div class="form-wrapper">
<div id="multistep-form">
<form action="/action_page.php" id="regForm" name="regForm">
<!-- Circles which indicates the steps of the form: -->
<div class="progress-bar" style="">
<span class="step active"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span>
</div>
<!-- One "tab" for each step in the form: -->
<div class="tab" style="display:block;">
<h2 class="cfLabel">Refinancing Information</h2>
<ul>
<li class="required-field">
<label>What type of property are you planning to refinance?</label>
<select name="2432" class="required">
<option value="Single Family Home">Single Family Home</option>
<option value="Townhouse">Townhouse</option>
<option value="Condo">Condo</option>
<option value="Multi-Family">Multi-Family</option>
<option value="Manufactured/Mobile">Manufactured/Mobile</option>
<option value="Not Sure">Not Sure</option>
</select>
</li>
<li class="required-field">
<label>How will the property be used?</label>
<select class="required" name="2405">
<option value="Primary Owner Occupied">
Primary Home
</option>
<option value="Second Home">
Second Home
</option>
<option value="Investment/Rental">
Investment/Rental
</option>
</select>
</li>
<li class="required-field">
<label>Approximate value of your home</label>
<select name="2434" class="required">
<option value="Not Sure">Not Sure</option>
<option value="$50,000 - $100,000">$50,000 - $100,000</option>
<option value="$100,000 - $150,000">$100,000 - $150,000</option>
<option value="$150,000 - $200,000">$150,000 - $200,000</option>
<option value="$200,000 - $250,000">$200,000 - $250,000</option>
<option value="$250,000 - $300,000">$250,000 - $300,000</option>
<option value="$300,000 - $350,000">$300,000 - $350,000</option>
<option value="$350,000 - $400,000">$350,000 - $400,000</option>
<option value="$400,000 - $450,000">$400,000 - $450,000</option>
<option value="$450,000 - $500,000">$450,000 - $500,000</option>
<option value="$500,000 - $550,000">$500,000 - $550,000</option>
<option value="$550,000 - $600,000">$550,000 - $600,000</option>
<option value="$600,000 - $650,000">$600,000 - $650,000</option>
<option value="$650,000 - $700,000">$650,000 - $700,000</option>
<option value="$700,000 - $750,000">$700,000 - $750,000</option>
<option value="$750,000 - $800,000">$750,000 - $800,000</option>
<option value="$800,000 - $850,000">$800,000 - $850,000</option>
<option value="$850,000 - $900,000">$850,000 - $900,000</option>
<option value="$900,000 - $950,000">$900,000 - $950,000</option>
<option value="$950,000 - $1,000,000">$950,000 - $1,000,000</option>
<option value="$1,000,000+">$1,000,000+</option>
</select>
</li>
<li class="required-field">
<label>I'm interested in an additional cash-out.</label>
<select class="required" name="2405">
<option value="Primary Owner Occupied">
No
</option>
<option value="Second Home">
Yes
</option>
</select>
</li>
<li class="required-field">
<label>Zip code of property</label>
<input type="text" name="2441" class="required text" placeholder="" value="">
</li>
</ul>
</div>
<!-- Page 2 -->
<div class="tab">
<h2 class="cfLabel">Credit History</h2>
<ul>
<li class="required-field">
<label>Approximate Credit Score</label>
<select class="required" name="2408">
<option value="Excellent">
Excellent
</option>
<option value="Pretty Good">
Pretty Good
</option>
<option value="Not Bad">
Not Bad
</option>
<option value="Need Help Rebuilding">
Need Help Rebuilding
</option>
<option value="Not Sure">
Not Sure
</option>
</select>
</li>
<li class="required-field">
<label>I or my spouse have served in the military.</label>
<select class="required" name="2405">
<option value="No">
No
</option>
<option value="Yes">
Yes
</option>
</select>
</li>
<li class="required-field">
<label>I currently have an FHA loan.</label>
<select class="required" name="2405">
<option value="No">
No
</option>
<option value="Yes">
Yes
</option>
</select>
</li>
<li class="required-field">
<label>I've had a foreclosure or bankruptcy in the last 7 years.</label>
<select class="required" name="2405">
<option value="No">
No
</option>
<option value="Yes">
Yes
</option>
</select>
</li>
</ul>
</div>
<!-- Page 3 -->
<div class="tab">
<h2 class="cfLabel">Your Information</h2>
<ul>
<li class="required-field">
<label>What is your approximate annual income?</label>
<select name="2416" class="required">
<option value="<$30,000"><$30,000</option>
<option value="$30,000 - $40,000">$30,000 - $40,000</option>
<option value="$40,000 - $50,000">$40,000 - $50,000</option>
<option value="$50,000 - $60,000">$50,000 - $60,000</option>
<option value="$60,000 - $70,000">$60,000 - $70,000</option>
<option value="$70,000 - $80,000">$70,000 - $80,000</option>
<option value="$80,000 - $90,000">$80,000 - $90,000</option>
<option value="$90,000 - $100,000">$90,000 - $100,000</option>
<option value="$100,000 - $120,000">$100,000 - $120,000</option>
<option value="$120,000 - $140,000">$120,000 - $140,000</option>
<option value="$140,000 - $160,000">$140,000 - $160,000</option>
<option value="$160,000 - $180,000">$160,000 - $180,000</option>
<option value="$180,000 - $200,000">$180,000 - $200,000</option>
<option value=">$200,000">>$200,000</option>
</select>
</li>
<li class="required-field">
<label>I'm interested in getting down payment assistance.</label>
<select class="required" name="2405">
<option value="No">
No
</option>
<option value="Yes">
Yes
</option>
</select>
</li>
<li class="required-field">
<label>I'm currently working with a real estate agent.</label>
<select class="required" name="2405">
<option value="No">
No
</option>
<option value="Yes">
Yes
</option>
</select>
</li>
</ul>
</div>
<!-- Page 4 -->
<div class="tab">
<h2 class="cfLabel">How can we contact you?</h2>
<ul>
<li class="required-field">
<label>First Name</label>
<input type="text" name="2419" class="required text" placeholder="" value="">
</li>
<li class="required-field">
<label>Last Name</label>
<input type="text" name="2420" class="required text" placeholder="" value="">
</li>
<li class="required-field">
<label>Email</label>
<input type="text" name="2421" class="required email" placeholder="" value="">
</li>
<li class="required-field">
<label>Phone</label>
<input type="text" name="2422" class="required text" placeholder="" value="">
</li>
</ul>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button id="prevBtn" onclick="nextPrev(-1)" type="button">Previous</button> <button id="nextBtn" onclick="nextPrev(1)" type="button">Next</button>
</div>
</div>
</form>
</div>
<div id="cms-form" style="display:none;">|@form-1642@|</div>
<p class="form-disclaimer"><img src="/users/u143/143632/privacy-65px.png">Your loan officer is the only person who will see and use this data. All data is secured and we will never share or sell your information with anyone.</p>
</div>