- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Feature Experimentation
- Optimizely Full Stack (Legacy)
Forms are a prime opportunity for website optimization. If you run a B2B or lead generation site, the following scenario may sound familiar:
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.
Example form optimization
For this example, the hypothesis is: "If we streamline the form visually by removing extra fields and text, the completion rate will increase by 8-12% because it is 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 Web Experimentation Visual Editor and by writing custom code. Although the example experiment uses Web Experimentation, you can implement a similar experiment using Optimizely Feature Experimentation or Optimizely Full Stack (Legacy).
Use this example to brainstorm your own test ideas based on concepts shown here. If you are looking for more test ideas, check out this list of testing 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
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:
- 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.
- Select a variation to open the Visual Editor.
-
Click the phone number field and select Removed from the Visibility menu in the Element Changed pane.
-
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.
-
-
Remove the field label.
-
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:
-
From the Experiments dashboard, click the name of the experiment.
-
Select the variation you want to enhance with custom code. This opens the Visual Editor.
-
Click the Variation Code Editor icon from the Editor window to begin adding custom code.
-
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.
-
Add the
.val
code 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.
- For example,
- Click Save & Apply (JavaScript) or Save (CSS) to save your custom code. To cancel your changes, click Revert to Saved instead.
- To hide the field, select it in the Visual Editor and click Removed.
Do not forget to remove the field label as well.
- 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.
-
From the Experiments dashboard, click the name of the experiment.
-
Select the variation you want to enhance with custom code. This opens the Visual Editor.
-
Then, click the field you would like to hide. This will show the name of your element
$("#YOURELEMENT")
. For example,$("#phone")
. -
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);">]
-
-
Click Apply. You will see the placeholder text appear in the field.
-
To remove the original label, select the element and click Removed. Or select Hidden.
-
Hit Start Experiment when you are ready to launch your experiment.
Please sign in to leave a comment.