This tutorial assumes you have reviewed the Web Form Optimizer Basics:
Basics
Web Forms can either convert a visitor into a customer or if the Submit button is hidden, it can present information to the visitor. In this tutorial we will create a Web Form to represent a Header in a Landing Page. From within Web Form Optimizer we will hide the Submit button. We will also outline the special formatting Web Form Optimizer applies to a Header or Footer in a page.
1. Once you login, your list of Web Forms appear in a table. Click the New Form? bar to insert a generic Form name. Click the Form name to launch the Online Form Builder.
2. Click the pencil next to the Submit button and change the Form Name to Header. Click Save Changes.
3. Click the Flexible widget button in the left pane. The widget is added to the Form design. Click the Cube to edit the widget. Click the Edit Flexible Widget button. Click the Template icon in the upper left hand corner of the HTML editor and select Strong(as shown).
4. Change the Strong Background text to Web Form Optimizer - The World's Easiest Landing Page Builder with A/B Testing! Highlight the text and change the font to 16 (as shown). The larger font we will make our Header stand out from the rest of the page.
5. Click then Center icon (as shown) so our Header will span the width of the Landing Page. Click the Save Changes button to update the Form design.
6. Click the Theme accordion in the lower left hand corner of the Online Form Builder. Click the Licorice theme, and the Form design is updated. Click the Preview button at the top of the Online Form Builder to test our Header. Our Web Form currently has a Submit button but we will soon take care of that...
7. Click the Form tab and then click the Web Form Optimizer! bar to launch the tool. Click the pencil next to the Experiment to put it into edit mode. The Experiment is highlighted with a yellow background. Click the Next button in the lower right hand corner of the wizard.
8. You are now on Step 2 - Select Page. Click the pencil next to the first Landing Page. Click the Next button in the lower right hand corner of the wizard.
9. You are now on Step 3 - Select Forms. Click the Header radio button (as shown). Click the Submit checkbox to remove the checkmark (as shown).
10. When we hide the Submit button the Form Height changes. Web Form Optimizer containers will resize to fit the Height of the content; but to keep things nice and tight we need to adjust the Height of the Form...Click the Form name. Web Form Optimizer (WFO) will launch the Web Form in a new window or tab. Wait till the page is completely loaded and visible. WFO captures the latest Height and stores that in a cookie. Return to Web Form Optimizer and click the Update icon next to the Height textbox. The Height is updated.
Before:
After:
10. Click the Save button in the lower right hand corner of the wizard to Save Changes. Click the Previous tab and select the next Landing Page. Click the Next button in the lower right hand corner of the wizard. Click the Header radio button (as shown above in the After image). Click the Save button in the lower right hand corner of the wizard to Save Changes.
That was very easy. Both pages will use the same Header. Click the Share tab and the link to load a Landing Page variation. Click the browser refresh icon or press F5 on your keyboard to load the next Landing Page variation.
Notice how the Header expands to fit the width of the page and our 'title' is centered over the accordion container (as shown below). Also note that the Form name does not appear in a Header or Footer location. Each Landing Page can have one Header or Footer. This was a simple tutorial that shows you how to create a Landing Page Header. With this knowledge you can create a Footer. As you can imagine, this is just the tip of the iceberg...You can create all kinds of content with the Online Form Builder and then use it to Present information in a Landing Page!
I hope you found this tutorial helpful!
