B2B and lead generation sites: Optimize 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 us walk through how to use the Visual Editor to hide the field.

1. Navigate to the Optimizely Web Experimentation Home page and click New Experiment. Enter the URL of the website you’d like to test and name the experiment. You can learn more about creating experiments in the article on Six steps to create an experiment in Optimizely Web

2. Click the phone number field and select Removed from the Visibility menu in the Element Changed pane.

3. Alternatively, you can hide the phone number field. To do so, select Hidden from the Visibility menu n the Element Changed pane.
   Please note that the Removed option takes the element off the page. The Hidden option hides the field from view but maintains spacing in relation to other elements.

   Remove the field label as well.

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

5. Then, follow Steps 2-6 in this Six steps to build an experiment article (you've already built the variation): 

   1. Define URL targeting (where your experiment will run)

   2. Create audiences (decide who will see it)

   3. Set traffic allocation

   4. Set goals (to measure your success)

   5. 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 Web Experimentation'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. From the Experiments dashboard, click the name of the experiment.

2. Select the variation you want to enhance with custom code. This opens the Editor.

3. Click the Variation Code Editor icon on the top-right of the Editor window to begin adding custom code.

4. The Variation Code Editor window opens to the JavaScript tab, where you can add custom JavaScript to the variation. Click the CSS tab to add custom CSS.

5. 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”).
   • You can replace "333-333-3333" with any phone number you prefer.
6. Click Save & Apply (JavaScript) or Save (CSS) to save your custom code. To cancel your changes, click Revert to Saved instead.
7. To hide the field, select it in the Visual Editor and click Removed.

   Don’t forget to remove the field label as well

8. Once you are done creating your variation, follow Steps 2 - 6 in this Six steps toSix steps to create an experiment in Optimizely Web Experimentation build an experiment article. Hit Publish Experiment when you are 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. From the Experiments dashboard, click the name of the experiment.

2. Select the variation you want to enhance with custom code. This opens the Editor.

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

4. Now, use the custom HTML editor to make the changes:
   
   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 are 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 Removed. Or select Hidden.

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

That is it! For more testing ideas, check out this article on 10 common experiments.