This tutorial assumes you have reviewed the Web Form Optimizer Basics available here.

In this tutorial I am going to show you how to launch a Mobile Web Form from any paper based medium, like an Ad, Newspaper, Magazine, etc.  Then we are going to create a Landing Page that is viewable in an iPad, iPhone, Android or Windows 7 mobile device! 

Let's get started!

1.  Add a Flexible widget to a Web Form in the Online Form Builder.  Click the Cube and then the Edit Flexible Widget button.  In the HTML editor click the Template icon and select the Medium Text template (as shown).  Update the text to Signup! and click Save Changes in the left pane.  Our Web Form design is updated.

 

2.  Add a Textbox widget and click the Cube to open the Textbox Settings.  Update the Caption to Email:.  Click the Position checkbox which will position the Caption above the textbox.  Click the Required checkbox and Email validation radio button.  Click the Save Changes button to update the Form design.  Our Form now has a textbox that will not submit unless the Email textbox is populated and is in the proper format.

4.  Click the Button Maker widget to add a Button to our Form design.  Click the Cube to the left of the widget.  From within the Button Settings click the Submit radio button.  Change the Button Text, Font Size, Font Color, Top and Bottom Color, Button Width and Height to suit your needs. 

5.  Click the pencil next to the Submit button in the Form design and update the Form name to Mobile1 and then click Save Changes.  Click Theme in the lower left hand corner of the Online Form Builder and select Licorice.  Our Form design is updated. 

 

6.  We are now going to create a Landing Page for a Mobile device...Click the Form tab. Then click the Web Form Optimizer! bar to launch the tool.  Click a pencil next to an existing Experiment to put it into edit mode and then click Next in the wizard.  Create a New Landing Page in Step 2 of the wizard. Click the pencil next to the page to put it into edit mode.  Change the Effect from None to Transparent . Click Next in the wizard.

 

 

7.  You are now on Step 3 (the final step) of Web Form Optimizer.  If you have many Web Forms scroll to find Mobile1.  Click the Header radio button and remove the Submit button checkbox (as shown).  When we remove the Submit button the height of our Form requires a slight adjustment.  Click the Form name and Web Form Optimizer opens up a new browser window or tab with our Form.  Wait until the Form is completely visible and then return to Web Form Optimizer. Click the Update icon next to the Height textbox.  Click the Save button in the lower right hand corner of the wizard.

Before:

After:

 

8.  Click the Share tab.  Then click the link to test the Landing Page. Send the URL in the browser to an Email Address.  Click the link from within your Mobile device to test the page.

9.  Enter the URL for the Landing Page into a QR Code Generator  and click the Generate button. The tool creates an image for the web page (like the one shown below):

 

Download the image and with your favorite paint program print a copy.  With your iPhone or Android device scan the QR Code and your phone will load a Landing Page variation! 

Now you can create a QR Code and place it on your Business Card or Advertising and when scanned by a mobile device, it will launch a Mobile Web Form in a Landing Page!

Web Form Optimizer has been tested on Apple iPad, iPhone, Android and Windows Smart Phones.  I hope you enjoyed this tutorial!

iPhone:

iPad:

This tutorial assumes you have reviewed the Web Form Optimizer Basics available here.

In this tutorial I am going to show you how to insert a YouTube video into a Landing Page.  The Button Maker available in the Online Form Builder has an option to launch a dialog with content from another site, centered over the page. The button can be placed anywhere in a Web Form...

Let's get started!

1.  Add a Button Maker widget to a Web Form in the Online Form Builder.  Click the Cube to the left of the widget.  From within the Button Settings click the Dialog radio button.  Change the Button Text, Font Size, Font Color, Top and Bottom Color, Button Width and Height to suit your needs.

 

2.  Selection of the Dialog radio button reveals some extra settings.  Update the Dialog Title to World's Easiest! From within YouTube click the Embed option and paste the URL (in bold) into the provided textbox .  Update the Dialog Height and Width to match the video dimensions.  For example the YouTube code for this tutorial is:

<iframe width="560" height="315" src="http://www.youtube.com/embed/wPIpyV76nWE" frameborder="0" allowfullscreen></iframe>

 

3.  Click Save Changes to update the Form design. 

4.   Now let's put this simple 'play' button in a Landing Page.  Click the Form tab.  Click the Web Form Optimizer! bar to launch the tool.  In Step 1 click a pencil to put an Experiment into edit mode and then click Next in the wizard.  In Step 2 click a pencil next to a Landing Page and then click Next in the wizard.  In Step 3 (the final step) select a Location radio button for the 'play' button and deselect the Submit button checkbox.  

Example:

 

5.  Removing the Submit button from the Web Form changes the Height of the Form.  Click the Form name.  Web Form Optimizer opens up a new browser window or tab with the Form. Wait until the Form is visible. Return to Web Form Optimizer and click the Update icon next to the Height textbox.  Click the Save button in the wizard.

6.  Click the Share tab and click the link to test your Landing Page(s). 

 

In this Landing Page I selected a right radio button location.  Content in a left or right location is placed in a stackable accordion.  An accordion places Forms in a column, each separated by its Form name.  The center location places each Form name in a Tab from left to right.

 

When the user clicks our 'play!' button a dialog is centered over the Landing Page, and YouTube downloads the video.  For those interested, I created this video with PowerPoint 2010.  I hope you enjoyed this tutorial! 

 

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!

In the following we will build a Web Form that will convert a Visitor into a Customer.  We will then add a slight variation to a duplicated version.  From within Web Form Optimizer we will configure an Experiment with two Landing Pages and then launch an A/B test to find out which Page performs the best!

1.  Once you login, Web Forms appear in a table under the Form tab.  If this is the first time you have used the tool, click the New Form bar.  A generic form name is inserted into the list.

 

2.  Click the Form name to edit the Web Form.

3.  We are going to add a Label to the Form design that is color coordinated to the selected Theme.  It will be our call to action! Click the Flexible widget on your left.  It's added to the Web Form design.

 

4.  Click the Cube to the left of the Widget. Click the Edit Flexible Widget button.  An HTML editor appears.  Click the Template icon (as shown).

 

5.  Select the Medium template from the dialog.

 

6. Update the Medium Background text to, "Order Now and your first 3 Months are Free! Save $150!".  Click Save Changes in the left pane and your Web Form is updated.

 

7.  Click the Textbox widget.  It's added to the bottom of the Web Form design.  Click the Cube to edit it.  In the Textbox Settings pane on your left, update the Caption to Email Address:, click the M radio button for a medium font size, and click the Soft radio button for a Soft background.  Click the Required checkbox and the Email validation radio button.  Click Save Changes and your Web Form is updated.

8. Click the Pencil to the left of the Submit button. In the Submit Settings we can update the Submit button text, Form Name, Redirect URL, Submit Limit, Expiry Date and Email Results to information.

 

9.  Update the Form Name to, "Special Offer Ends Soon!".  In the Redirect URL textbox enter the full URL to your web site (Example: http://webformoptimizer.com).  Click Save Changes to update the Submit settings for our Web Form.

 

10.  At this point our Web Form is ready for the Web Form Optimizer; however we need another variation for an A/B Test.  Let's create a Copy of the Web Form with a slight variation.

11.  Click the Form tab. 

 

12.  Click the plus icon to create a duplicate of the Web Form.  The duplicate appears at the top of the table.  Notice how the Version Number for our duplicate has changed to a 2.  Click the duplicate Form name to edit it.

 

13.  Click the Cube to the left of the Order Now... text.  Click the Edit Flexible Widget button.  Update the text to,  "Save 33%! Order Now!".  Click Save Changes to update the Web Form.

14.  Click the Theme accordion in the lower left hand corner of the Online Form Builder.  Click the Licorice theme.  The Theme is automatically saved and the Form design is updated.

15.  Click Preview at the top of the Online Form Builder to test your Web Form.   

 

16.  Click the Submit button to test the Email validation.  Close the new window and return to the Online Form Builder.

 

17.  Now that we have two slightly different Web Forms, it's time to setup an Experiment in the Web Form Optimizer.  Click the Form tab.  Click the Web Form Optimizer! bar to open the tool in a new browser window.

 

Step 1.  Select an Experiment... Click the New Experiment? bar to create an Experiment with a generic name. Click the pencil to put the Experiment into edit mode.  The Experiment is highlighted with a yellow background.  Click the Next button in the lower right hand corner of the wizard.

 

Step 2. Select Page...Click the New Landing Page? bar to insert a Landing Page with a generic caption.  Click the pencil to put the Landing Page into edit mode.  The Landing Page is highlighted with a yellow background.  Update the caption to Web Form Optimizer. When the Landing Page loads the browser title or tab reflects the Landing Page Caption.   Click the Next button in the lower right hand corner of the wizard.

 

Step 3. Select Forms...This is the final step in creating a Landing Page.  Next to each Web Form is a set of radio buttons.  Each button represents a Location in a Landing Page.  Click the Center radio button to place version 1 of our Web Form into a Tab container.  Click the Save button in the lower right hand corner of the wizard.

 

Click the Previous button in the wizard to return to Step 2 - Select Page.  Click the New Landing Page? bar.  Click the pencil to put the second Landing Page into edit mode.  Update the caption to Web Form Optimizer. Change the Theme to Mint Chocolate.  The container in the Landing Page will use this theme.  In the Background textbox enter, "images/test1.png".  This is an image stored on our web server. You could enter any URL to an image.  The Landing Page background which will scale to fit the page.  Click the Next button in the lower right hand corner of the wizard.

 

Click the Left radio button to place version 2 of our Web Form into an Accoridon container.  Click the Save button in the lower right hand corner of the wizard.

 

At this point our Experiment is ready for testing.  Click the Share tab and in the Test Experiment accordion click the link to test a Landing Page.  A new browser window or tab opens with a Landing Page.  While logged into the system, a Landing Page Notification appears in the top right hand corner of the page.  This allows you to identify which Landing Page is being served and offers the latest statistics for this page.

 

Click the browser refresh icon in the address bar or press the F5 function key on your keyboard to load the next Landing Page. 

 

Web Form Optimizer loads the next Landing Page.  Notice the differences in pages. This version has a Mint Chocolate theme applied to the Landing Page container and notification.  In the background our test1.png image has scaled to fit the page.

 

Return to the Web Form Optimizer tab.  Click the Embed the Landing Page... accordion on the Share tab.  Follow the instructions to embed the Experiment into a web page on your site or blog. Your Experiment is ready to turn visitors into customers!

Tutorial Complete!

When the page loads, Web Form Optimizer (WFO) will serve one Landing Page variation to a visitor.  That visitor will always see the same Landing Page.  When a visitor views the page, Web Form Optimizer will record that as a Visit.  If the visitor clicks a Submit button on the page, WFO will record that as a Submit.  If a Landing Page variation exceeds the number of Control Visits and Submits (conversions) as defined in Step 1- Select Experiment, it becomes the Winner of the Experiment.  For more information on how Web Form Optimizer determines a Winner, click here.