Add a Full Name Field to a Marketo Form

We know that shorter web forms improve conversion rates. The Javascript code sample below allows you to make your forms even shorter by merging the First and Last Name fields into one Full Name field.

When visitors are typing in their full name, the script will automatically break the text into first and last name fields. For known visitors the script will join the first and last names, and then copy them to the new field so they won’t have to fill the field again. Here is how to set this up.

Step One
Create a new custom field in Marketo called Full Name. No need to create it in your CRM platform, as the script will only use this field to display the full name.

Step Two
Add this field to all your web forms. Set your first name and last name fields as hidden. In the Javascript, change the “splitFullName” configuration to contain the 3 field names.

Note: Please make sure these names do not appear anywhere else on the page.

Step Three
Insert the Javascript into all your landing pages at the bottom of the code, before the tag.

<script>
MktoForms2.whenReady(function (form){
        function splitFullName(a,b,c){
                String.prototype.capitalize = function(){
                        return this.replace( /(^|s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
                };
                document.getElementsByName(c)[0].oninput=function(){
                        var fullName = document.getElementsByName(c)[0].value;
                        if((fullName.match(/ /g) || []).length ===0 || fullName.substring(fullName.indexOf(" ")+1,fullName.length) === ""){
                                var first = fullName.capitalize();;
                                var last = "null";
                        }else if(fullName.substring(0,fullName.indexOf(" ")).indexOf(".")>-1){
                                var first = fullName.substring(0,fullName.indexOf(" ")).capitalize() + " " + fullName.substring(fullName.indexOf(" ")+1,fullName.length).substring(0,fullName.substring(fullName.indexOf(" ")+1,fullName.length).indexOf(" ")).capitalize();
                                var last = fullName.substring(first.length +1,fullName.length).capitalize();
                        }else{
                                var first = fullName.substring(0,fullName.indexOf(" ")).capitalize();
                                var last = fullName.substring(fullName.indexOf(" ")+1,fullName.length).capitalize();
                        }
                        document.getElementsByName(a)[0].value = first;
                        document.getElementsByName(b)[0].value = last;
                };
                //Initial Values
                if(document.getElementsByName(c)[0].value.length < 2 && document.getElementsByName(b)[0].value.length.length >2 && document.getElementsByName(a)[0].value.length.length >2 ){
                        var first = document.getElementsByName(a)[0].value.capitalize();
                        var last = document.getElementsByName(b)[0].value.capitalize();
                        var fullName =  first + " " + last ;
                        console.log(fullName);
                        document.getElementsByName(c)[0].value = fullName;
                }
        }
        splitFullName("FirstName","LastName","leadFullName");
});
</script>

MktoForms2.whenReady(function (form){

function splitFullName(a,b,c){

String.prototype.capitalize = function(){

return this.replace( /(^|s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );

};

document.getElementsByName(c)[0].oninput=function(){

var fullName = document.getElementsByName(c)[0].value;

if((fullName.match(/ /g) || []).length ===0 || fullName.substring(fullName.indexOf(" ")+1,fullName.length) === ""){

var first = fullName.capitalize();;

var last = "null";

}else if(fullName.substring(0,fullName.indexOf(" ")).indexOf(".")>-1){

var first = fullName.substring(0,fullName.indexOf(" ")).capitalize() + " " + fullName.substring(fullName.indexOf(" ")+1,fullName.length).substring(0,fullName.substring(fullName.indexOf(" ")+1,fullName.length).indexOf(" ")).capitalize();

var last = fullName.substring(first.length +1,fullName.length).capitalize();

}else{

var first = fullName.substring(0,fullName.indexOf(" ")).capitalize();

var last = fullName.substring(fullName.indexOf(" ")+1,fullName.length).capitalize();

}

document.getElementsByName(a)[0].value = first;

document.getElementsByName(b)[0].value = last;

};

//Initial Values

if(document.getElementsByName(c)[0].value.length < 2 && document.getElementsByName(b)[0].value.length.length >2 && document.getElementsByName(a)[0].value.length.length >2 ){

var first = document.getElementsByName(a)[0].value.capitalize();

var last = document.getElementsByName(b)[0].value.capitalize();

var fullName = first + " " + last ;

console.log(fullName);

document.getElementsByName(c)[0].value = fullName;

}

splitFullName("FirstName","LastName","leadFullName");

});

</script>

Note: This code works only with Marketo Forms 2.0.

Here are a few examples of the expected results:

Latest Blog Posts