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:
