Hi, I would like to submit a campaign web form (unstyled html) but handle the form validation on my site. The reason I would like to do this is because an invalid required field in infusionsoft redirects away from the form. It’s quite messy looking.
Once I have determined the form is valid with javascript, I want to serialize the form fields and post it to the form URL. But it hisses at me about too many redirects and I never make it to success.
I found an old stack question from years ago that claimed they achieved this result by “wrapping the whole thing in an iframe tag” but there wasn’t a code example what was wrapped or where.
infusionForm.form({
fields: {
'inf_field_FirstName': 'empty',
'inf_field_Email': 'empty',
},
});
if (infusionForm.form('is valid')) {
let serial = infusionForm.serialize();
$.ajax({
url : 'https://xxxxx.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxxxxxxxx',
type : "POST",
data : serial,
dataType: "jsonp",
cache : false,
success : function(data) {
console.log(data);
}
});
} else {
infusionForm.form('validate form');
return false;
}
1 Like
This infusionsoft issue suggests that you cant post to the form URL directly “but it will accept forms that have the registered id’s that are a match in the database for that form. ie, their servers have the values of those “inf_form_xid” and will only accept information from that form”.
Essentially, this is what I have done by modifying the unstyled HTML to match my sites theme, and when I leave the action as the infusionsoft URL instead of a custom function, it works. I still see the multiple “too many redirects” console messages though, before it redirects my page to the success landing page.
How can I hook into the form submit to handle the form validation before the POST to infusionsoft (or cancel the POST entirely)?
Okay, sometimes I just have to ask myself the right question to figure something out. I’m still learning. Apparently, onSubmit in the form tag will supersede the POST. I have only ever handled form submits through jquery before so this feels pretty elementary.
Hopefully my errors will show somebody else the way.
Solution is to add onSubmit=“return validateInfusionForm()” to your form tag.
function validateInfusionForm()
{
let infusionForm = $('.infusion-form');
infusionForm.form({
fields: {
'inf_field_FirstName': 'empty',
'inf_field_Email': 'empty',
},
});
if (infusionForm.form('is valid')) {
return true;
} else {
infusionForm.form('validate form');
return false;
}
}
@Michael_Earl I am inserting it like this: so on the end of the script. Does this seem to you like the right way to do it?
onsubmit="submitWebForm()">
<script type="text/javascript">
function submitWebForm() {
var form = document.forms[0];
var resolution = document.createElement('input');
resolution.setAttribute('id', 'screenResolution');
resolution.setAttribute('type', 'hidden');
resolution.setAttribute('name', 'screenResolution');
var resolutionString = screen.width + 'x' + screen.height;
resolution.setAttribute('value', resolutionString);
form.appendChild(resolution);
var pluginString = '';
if (window.ActiveXObject) {
var activeXNames = {'AcroPDF.PDF':'Adobe Reader',
'ShockwaveFlash.ShockwaveFlash':'Flash',
'QuickTime.QuickTime':'Quick Time',
'SWCtl':'Shockwave',
'WMPLayer.OCX':'Windows Media Player',
'AgControl.AgControl':'Silverlight'};
var plugin = null;
for (var activeKey in activeXNames) {
try {
plugin = null;
plugin = new ActiveXObject(activeKey);
} catch (e) {
// do nothing, the plugin is not installed
}
pluginString += activeXNames[activeKey] + ',';
}
var realPlayerNames = ['rmockx.RealPlayer G2 Control',
'rmocx.RealPlayer G2 Control.1',
'RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)',
'RealVideo.RealVideo(tm) ActiveX Control (32-bit)',
'RealPlayer'];
for (var index = 0; index < realPlayerNames.length; index++) {
try {
plugin = new ActiveXObject(realPlayerNames[index]);
} catch (e) {
continue;
}
if (plugin) {
break;
}
}
if (plugin) {
pluginString += 'RealPlayer,';
}
} else {
for (var i = 0; i < navigator.plugins.length; i++) {
pluginString += navigator.plugins[i].name + ',';
}
}
pluginString = pluginString.substring(0, pluginString.lastIndexOf(','));
var plugins = document.createElement('input');
plugins.setAttribute('id', 'pluginList');
plugins.setAttribute('type', 'hidden');
plugins.setAttribute('name', 'pluginList');
plugins.setAttribute('value', pluginString);
form.appendChild(plugins);
var java = navigator.javaEnabled();
var javaEnabled = document.createElement('input');
javaEnabled.setAttribute('id', 'javaEnabled');
javaEnabled.setAttribute('type', 'hidden');
javaEnabled.setAttribute('name', 'javaEnabled');
javaEnabled.setAttribute('value', java);
form.appendChild(javaEnabled);
jQuery('.infusion-submit button').attr('disabled', true);
}
// Function to validate the phone number
function validatePhoneNumber() {
var phoneNumberField = jQuery('inf_field_Phone1').val(); // Replace 'inf_custom_PhoneNumber' with the actual field ID of the phone number field in your form
// Define the allowed starting digits
var allowedStartingDigits = ['234']; // Add your desired starting digits in this array
// Check if the phone number starts with any of the allowed digits
var startsWithAllowedDigit = allowedStartingDigits.some(function(digit) {
return phoneNumberField.startsWith(digit);
});
// Check if the phone number exceeds 10 digits
var exceedsMaxDigits = phoneNumberField.replace(/[^0-9]/g, '').length > 10;
// If the phone number doesn't meet the criteria, prevent form submission
if (!startsWithAllowedDigit || exceedsMaxDigits) {
alert('Please enter a valid phone number.'); // Modify this alert message as per your requirement
return false; // Prevent form submission
}
// If the phone number is valid, allow form submission
return true;
}
// Attach the form submission event listener
jQuery(document).ready(function() {
jQuery('inf_form_74a7496a29a09933682b26c6fd933122').submit(function() {
return validatePhoneNumber();
});
});
</script>
There is a simple way to validate the form on your website so it won’t go to the ugly Keap page with the error messages. Simply add the “required” attribute to the end of the input tags for any required fields. In this example you will see the “required” attribute at the end of the input tag: (input class=“ifs-form-input” id=“inf_field_FirstName” name=“inf_field_FirstName” placeholder=“First Name” type=“text” required /). This should then be handled by your browser by displaying a message near the input field that says “Please fill out this field.” However, in order for it to work, the button cannot have the reCaptcha ID. Find the button code and remove the reCaptcha ID. Example: (button class=“infusion-recaptcha ifs-form-button” id=“recaptcha_xxxxxxxxxxxxxxx” type=“submit”). I’m not sure how removing the reCaptcha ID will effect the functionality of reCaptcha. I have a form from a few years ago and it doesn’t have a reCaptcha ID and a form I recently created has the reCaptcha ID. I don’t recall removing the reCaptcha ID from the old form so I believe Keap made a change to the form code and now includes the reCaptcha ID in the button. But I’m not 100% sure.