How to Create An “Offline” Customer Signup Form for iPads

If you have a shop or you’re attending a trade show, then you’ll probably want to consider how you can subscribe people to your newsletter “offline”, without sending them to your website. Traditionally you’d use a notepad and pen, but this is incredibly time-consuming, as someone will have to manually type in the details (plus, bad handwriting and input errors can cause additional problems.)

In this tutorial, I’ll show you a much more effective way of getting people to sign up, using the MailPoet iFrame form.

There are a number of processes to follow to set up your signup form on an iPad:

1. Create your signup form
2. Install the “kiosk” app
3. Set up your accessibility options

Create a signup form for iPads

In MailPoet->Settings->Forms select an existing form or create a new form. Under the Save button, click iFrame link.

Copy the code to a text document, then get the URL (the long URL in the src= section shown in the image above) and copy it. Visit a URL shortening service like bit.ly and shorten your URL. This makes it much quicker to type it into your app later.

Write down your new shortened URL. Keep in mind most of them use a combination of lowercase and capital letters, so make sure you note the correct case or your URL won’t work properly.

Style your new iPad signup form

If you aren’t already using the iFrame code for something else, then the page probably looks pretty plain, and you’ll need to bring your best CSS skills. Remember that if you are using the iFrame code elsewhere, and you’ve already customized the iframe.css file, then your changes will be applied to all instances of the form.

If you haven’t already set up your iframe.css file, you can download our example file which already has some basic styles. This file needs to be uploaded via FTP to the folder wp-content/uploads/wysija/css. If the CSS folder doesn’t exist, create it, then upload the file. Don’t rename the file, as it needs to remain iframe.css.

Some design considerations for iPad: As people will be using the touch screen, it’s a good idea to have plenty of space around each of the fields, so that people can operate the form easily with their fingers. Using larger fonts will also help with readability, especially from a distance. Finally, make sure the submit button is large and easy to press.

Here’s what the final form looks like:

Install the “kiosk” app

Without a kiosk app installed, the user still has the ability to go backward and forwards in the history and type in the address bar, which we don’t want them to do.

I installed the app Kiosk Pro Lite, which has all the functionality I need. Once you’ve installed it, set the homepage to be your signup page (now is the time to use that shortened URL!) and change the “Idle Time Limit” to be around 20 seconds. The idle timeout is how long after the last touch of the screen until it resets. I set mine to about 10 seconds but you can always adjust this if you find it’s too short.

Under Display in the settings, I disabled everything:

Note that if you change any of the CSS after you’ve already loaded the page in the kiosk app, caching will occur, so you won’t see your changes. I couldn’t work out a way to prevent this or refresh the page, so make sure that you’re happy with your design before viewing it in the app.

Limit the accessibility

You can create a special mode on the iPad to prevent people leaving the app by pressing the home button. To do this, go to Settings -> General -> Accessibility -> Guided Access and click “Enable”. Set up a pin code to escape guided access mode in future.

Go live with your signup form

Now you’re ready to launch your new iPad signup form, so open up Kiosk Pro Lite and select “Run Kiosk Presentation”. Triple tap on the home key to enable Guided Access and press “Start”. You’re now ready to collect offline signups.

To escape Guided Access, triple click the home key and enter the passcode.

Want to learn more about making better signup forms? Check out our definitive guide on improving your signup forms.