Optimize website forms using Experimentation

Hide a form field

To begin, start by creating a variation that strips the form down to the necessary fields.

First, identify the fields you truly need and the ones you do not. 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 is not a vital requirement for the form below. You would like to test whether removing the field will increase form completions.

Here is how to use the Web Experimentation Visual Editor to hide the field:

1. Navigate to the Optimizely application select your A/B test experiment. See Six steps to create an experiment in Optimizely Web Experimentation to learn how to set up an experiment.
2. Select a variation to open the Visual Editor.

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

4. Alternatively, you can hide the phone number field. To do so, select Hidden from the Visibility menu in the Element Changed pane.

   • Removed – Takes the element off the page.

   • Hidden – Hides the field from view, but maintains spacing in relation to other elements.

5. Remove the field label.

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

Auto-fill your hidden form field

Sometimes, you cannot 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 will not be able to submit the information that is 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.

This example uses the Web Experimentation Code Editor where you add a few lines of code to edit the field:

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 Visual Editor.

3. Click the Variation Code Editor icon from 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.

   Do not forget to remove the field label as well.

8. Click Start Experiment when you are ready to launch your experiment.

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.

This example uses 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 Visual Editor.

3. Then, click the field you would 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 are 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. Click Apply. You will see the placeholder text appear in the field.
   
   

6. To remove the original label, select the element and click Removed. Or select Hidden.

7. Hit Start Experiment when you are ready to launch your experiment.