THIS ARTICLE WILL HELP YOU:
  • Optimize a form on a B2B or lead generation site
  • Create variations using Optimizely's Visual Editor and Code Editor
  • Hide form fields and still pass your data validation process
  • Brainstorm test ideas for lead generation forms

Forms are a prime opportunity for website optimization. If you run a B2B or lead generation site, the following scenario may sound familiar:

Your company sets a quarterly goal for new leads, so you create a simple form that captures the visitor’s name and email. When you share the form with stakeholders, you start to receive requests for additional fields. Soon, you’re requesting the visitor’s company name, job title, phone number, city, recommendation source, and more. Your long form collects more information, but your completion rates drop.

For most organizations, optimizing a form is a practice of balancing quality versus quantity. Some fields provide valuable information so you can identify high-quality leads and tailor marketing efforts for particular customer segments. Others add unnecessary weight and cause friction in the funnel.

Testing can help you find the sweet spot: an optimized form that collects the information you need from prospects who will make an impact on your business.

Let’s return to the example above. Imagine that you’ve decided to streamline your form. Your hypothesis is:

If we streamline the form visually by removing extra fields and text, the completion rate will increase by 8-12% because it’s clean and easy to fill out.

This article covers three ways to test that hypothesis. It also shows you how to build those experiments with the Visual Editor and Code Editor.

Use this example to:

  • Brainstorm your own test ideas based on concepts shown here
  • Practice creating a variation with Optimizely's Visual and Code Editors

If you're looking for more test ideas, check out this list of ideas for B2B and lead generation sites. It includes several more ideas for optimizing the look and feel of your forms.

Hide a form field

Let’s begin by creating a variation that strips the form down to the necessary fields.

First, identify the fields you truly need and the ones you don’t. One great way to optimize any lead generation form is to reduce the number of steps a visitor must complete and remove clutter.

Imagine, for example, that the phone number field isn’t a vital requirement for the form below. You’d like to test whether removing the field will increase form completions.

Let’s walk through how to use the Visual Editor to hide the field.

  1. Navigate to the Optimizely Home page and click New Experiment. Enter the URL of the website you’d like to test and name the experiment.

  2. Click the phone number field and select Remove from the menu.

  3. In the Remove dialog, select Make element invisible to hide the element and click Done.



    Please note that the Remove element from page option takes the element off the page. The Make element invisible option hides the field from view but maintains spacing in relation to other elements.

    Remove the field label as well.

  4. Click Save now to keep the changes in your variation.

    Then, follow Steps 2-6 in this Six steps to build an experiment article (you've already built the variation): 
    Define URL targeting (where your experiment will run)
    Create audiences (decide who will see it)
    Set traffic allocation
    Set goals (to measure your success)
    QA and publish your test

That’s it! Now you know how to remove a form field with the Visual Editor.

Ready for something more advanced? Check out the next section to learn how to auto-populate a hidden field using the Code Editor.

Auto-fill your hidden form field

Sometimes, you can’t simply hide a field in your form. Many organizations use a data validation process to ensure that form submissions are complete. If you hide a required field, visitors won’t be able to submit the information that’s needed to pass the validator.

Fortunately, you can use Optimizely’s Code Editor to auto-populate your hidden field. For example, inject a generic phone number (such as 333-333-3333) to complete the form submission. Then when your team reviews the submissions, they can use that number to identify visitors who saw that variation.

We’ll show you how to enter the Code Editor and add the few lines of code below:

  1. Load your site into the Editor.

  2. Click Edit Code to open the Code Editor.

  3. Then, click the field you’d like to hide and select Custom JavaScript from the menu. This shows you the name of the element (such as “#phone”).

  4. Add the.valcode to the end of$(“#YOURELEMENT”)so it becomes $(“#YOURELEMENT”).val(“333-333-3333”).

    For example, $(“#phone”) becomes $(“#phone”).val(“333-333-3333”).

    Then, click Apply. You should see the phone number appear in the field.

    You can replace "333-333-3333" with any phone number you prefer.

  5. To hide the field, select it in the Visual Editor and click Remove. In the Remove dialog, select Make element invisible.

    Don’t forget to remove the field label as well.

  6. Once you’re done creating your variation, follow Steps 2 - 6 in this Six steps to build an experiment article. Hit Publish when you’re ready to launch your experiment.

Fantastic! Now you know how to auto-populate hidden form fields using the Code Editor.

Want to take it one step further? The next section covers how to streamline a form by removing the field labels (such as First Name, Last Name, and Work Email).

Use placeholder text

What if your form already includes only a few, necessary fields? Another way to streamline the form is to use placeholder text instead of labels.

Below, we show you how to use custom JavaScript to insert placeholder labels directly into the field. When visitors enter their own information, it replaces the text.

  1. Load your site into the Editor.

  2. Click Edit Code to open the Code Editor.

  3. Then, click the field you’d like to hide and select Custom JavaScript from the menu. This will show the name of your element $(“#YOURELEMENT”). For example, $(“#phone”).

  4. Now, use the “placeholder” attribute to inject the label into the field as placeholder text.

    If you're using HTML5:

    Add the .attr code at the end, so it becomes:

    $(“#YOURELEMENT’).attr(“placeholder”,”Phone”);
    

    For example:

    $(“#phone’).attr(“placeholder”,”Phone”);


    If you’re not using HTML5
    , replace the code with the following and substitute YOURELEMENT with the actual name of your element:

    $('#YOURELEMENT’).css("color","#aaaaaa");
    $('#phone').val("Phone");
    $('#phone').focus(function(){
        //Check val for email
         
        if($(this).val() == 'Phone'){
            $(this).val('');
            $(this).css("color","#000000");
        }
    }).blur(function(){
        //check for empty input
        if($(this).val() == 'Phone'){
            $(this).val('');
            $(this).css("color","#aaaaaa");
        }
        if($(this).val() === ''){
            $(this).css("color","#aaaaaa");
            $(this).val('Phone');
        }
    });
    
    [<input class=​"lego-text-input" id=​"phone" name=​"phone_number" type=​"tel" style=​"color:​ rgb(170, 170, 170)​;​">​]
    
    
  5. Then, click Apply. You’ll see the placeholder text appear in the field.

  6. To remove the original label, select the element and click Remove. Select Make element invisible.

  7. Then, follow Steps 2 - 6 in this Six steps to build an experiment article. Hit Publish when you’re ready to launch your experiment.

That’s it! For more testing ideas, check out this article on 10 common experiments or join the discussion the Optiverse Community.