It is well known that reducing the number of fields on your forms almost always increases the number of submissions. One way to do this is to combine all the name fields (salutation, first name, middle name, last name, and suffix) into a single field. This works by displaying a single “Full name” field. As your visitor types in their full name, a snippet of JavaScript parses their name into the appropriate parts (first name, last name, etc) and fills in hidden name fields for them.

The first step is to create a custom text field for your contact records. This is needed for the web form. It also makes it so you have a copy of the original name entered by the visitor just in case the name parser doesn’t work as expected. If you aren’t sure how to create a custom field, follow these instructions provided by Infusionsoft. For this example, I named this field Full name. Once your field is created, click the View the field database names (for the API) link to find the field’s database name. You’ll need this name in a later step.

Next, edit your web form. If you don’t already have an Infusionsoft name field on your form, add it. Edit the name field to show all five fields. If you want Last Name to be required, set Required to On. If you want Last Name to be optional, set Required to Off. Don’t worry, none of these fields will be visible to your visitor.

Add your custom full name text field to your web form and mark it as required. You can change the label to anything you’d like.

Last, add an HTML snippet with the following contents:

Update 8/19/2014: We’ve updated the code to work with web forms that are configured to have the label appear above the input field.

<script src="https://d1zcb7keu4rf07.cloudfront.net/free/javascript-name-parser/browser-shims.js"></script>
<script src="https://d1zcb7keu4rf07.cloudfront.net/free/javascript-name-parser/parse-names.js"></script>
<script>
jQuery(document).ready(function () {
    // Hide name fields
    jQuery('#inf_field_Title').parent().parent().hide();
    jQuery('#inf_field_FirstName').parent().parent().hide();
    jQuery('#inf_field_MiddleName').parent().parent().hide();
    jQuery('#inf_field_LastName').parent().parent().hide();
    jQuery('#inf_field_Suffix').parent().parent().hide();
    
    jQuery('label[for=inf_field_Title]').parent().parent().hide();
    jQuery('label[for=inf_field_FirstName]').parent().parent().hide();
    jQuery('label[for=inf_field_MiddleName]').parent().parent().hide();
    jQuery('label[for=inf_field_LastName]').parent().parent().hide();
    jQuery('label[for=inf_field_Suffix]').parent().parent().hide();

    // Update name fields with parsed content of full name field
    jQuery('#inf_custom_Fullname').on('input', function() {
        var parsed = NameParse.parse(jQuery('#inf_custom_Fullname').val());
        jQuery('#inf_field_Title').val(parsed.salutation);
        jQuery('#inf_field_FirstName').val(parsed.firstName);
        jQuery('#inf_field_MiddleName').val(parsed.initials);
        jQuery('#inf_field_LastName').val(parsed.lastName);
        jQuery('#inf_field_Suffix').val(parsed.suffix);
    });
});
</script>

If your custom field’s database name isn’t Fullname, change the two lines above from Fullname to your field’s name.

Save and publish your web form. That is it! As your visitor types their name, the JavaScript will take it apart and put it in the hidden Infusionsoft name fields. When they submit the form, the hidden fields will put the name parts in the correct fields in the contact record.