- 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 are 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 by writing custom code.
Use this example to:
- Brainstorm your own test ideas based on concepts shown here
- Practice creating a variation with Optimizely's Visual
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 us walk through how to use the Visual Editor to hide the field.
-
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
-
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 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.
-
Click Save 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 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:
-
From the Experiments dashboard, click the name of the experiment.
-
Select the variation you want to enhance with custom code. This opens the Editor.
-
Click the Variation Code Editor icon on the top-right of 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.
Don’t forget to remove the field label as well
- 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.
-
From the Experiments dashboard, click the name of the experiment.
-
Select the variation you want to enhance with custom code. This opens the Editor.
-
Then, click the field you’d 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'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 substituteYOURELEMENT
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);">]
-
Then, click Apply. You’ll see the placeholder text appear in the field.
-
To remove the original label, select the element and click Removed. Or select Hidden.
-
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.