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;
}
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>