How To Create A Google Form And Make It Compatible With Mobile Use

Don Break 2016-12-28 14:00:00

Say you want to create a survey using Google Forms, because you’re familiar with the platform. The problem is, your target audience is going to be on their mobile devices, and Google Forms tends to be too wide for mobile use. So what can you do to make it more user-friendly and responsive?

First, we’ll go over the basics of how to create a Google Form. Let’s say you want to collect contact info.

[1] Sign into your Google Account and click on Documents in your menu bar. Click the Create button and choose the Form tool.

[2] Click on the Add item button within the Forms editor and look at the different types of items that are available. To make it easier on the people who will be filling out your forms, you can use “Choose from a list” or “Multiple choice” to offer data from a drop-down option. You will also need to collect other info like phone number, name, and email in text boxes. Keep the data collection as minimal as possible.

[3] Choose your theme from one of the many offered. You can also use the Sample or Plain Form if you don’t like any of the background themes. Click Apply.

[4] Follow the steps to create your form. Make sure you delete the sample questions.

[5] Save your form.

To Embed the Form on Your Blog

[1] Go back to your Docs homepage and open the spreadsheet of the form you created. Note: you will see all of the submissions to your form.

[2] Choose “Form” on the menu bar and click “Go to live form”.

[3] Use the Find function (Ctrl+F or Command+F) to find the term “form action”. You will see this code:

<div class="ss-form><form action="YOUR_FORM_URL" method="POST" id=“ss-form">
See where this line of code is, and then find this part:
[4] Copy from the first line mentioned to the next line mentioned, and paste this somewhere safe. You will use this in a minute.

[5] Go to your blog dashboard and create a new page for your blog. Open it and go to the HTML editing section.

[6] Paste in your code.

[7] The form should appear on your blog.

Make Your Form Compatible With Phones and Tablets

You have a few options, actually. You may be able to learn more about your mobile options on the ProntoForms website.

Option 1

When you paste the embed code into your website or blog, find the “width” seeing in the code. The default width is “760” and you need to change that to “100%”. This will make the form reset itself to the width of whichever size screen upon which it is viewed.

Option 2

  1. In Google Docs, set the theme for your form to “Plain.”
  2. Each survey page should have one question each, with four to five answers, which will get rid of the need to scroll to find the continue/submit button.
  3. Use page breaks. Offer multiple choice options to customize the questions offered and the order.
  4. Embed the code from Google into the web page or blog.
  5. Use a meta tag in the <head> to set a viewport.
  6. Set your iFrame width to 320 or similar and trim the height down to make it as short as possible. Make sure you don’t lose the bottom of any of the pages.
  7. Test and adjust as necessary.

Option 3

Change the width in Google Forms before you paste the code. Change the width to 360 for a phone or to about 560 for a tablet. To do this, go to File > Embed and change the width. Hit tab so it updates the code for you, and paste it into your blog or website.

Back to list