Do something with Campaign Web Form before POST submission to infusionsoft

API Q&A
#1

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

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)?

#3

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