Do something with Campaign Web Form before POST submission to infusionsoft

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>