Google Apps Form for Website Visitor Contact

No comments

Use a Google Apps Form to capture website visitor contact information


Google Apps for Business, which incidentally has recently become known as Google Apps for Work, is a collection of Cloud based Apps that allow you to carry out many office admin tasks in one place, using your own domain name (like mybusiness.co.uk) and linked to your branded business email (Gmail).

In this article we look at how you can use a Google Apps Form to capture the details of a visitor to your website that wants to get in touch with you.  To be able to use this method, you will need to have access to the HTML (code that makes your web pages work) of the page where you would like the form to be placed.  Beyond that, it’s a relatively straightforward process.  There are a few steps, but it isn’t hugely complicated and shouldn’t take too long to get up and running.

So why use a Google Apps Form in the first place?

Well there are a good number of options out there, but the real advantage of the Google Apps approach is that the set-up and recorded information all end up being in one place, within your Google Drive.  This means that you don’t have to log-on to another system.  All the end user input is placed in a spreadsheet within your Google Drive and enquiries from customers can also be emailed directly to your Gmail Inbox.

There are now a good number of costs effective, easy to use, online website builders, such as Wix and Weebly.  However, one area you may struggle is if you need to capture more information than the basic website contact form allows.

You may consider getting a (web) developer to make you a data capture from to put in you website, but you may need to go back to them if you want to change the questions and the type of information you record.  With the Google Apps Form the questions are very easy to modify, both adding, removing and changing the order of them.

You may consider using another online form builder, but as pointed out above that’s another place to access to make changes and potentially retrieve the data captured.

How do I create a Google Apps Form and use it on my Website?

OK, that’s enough with the introduction.  How does it work and more importantly how to get a Google Apps data capture form up and running on my own web site?  Now, everything does rely on you having a Google Apps for Work account attached to your domain name (web site address, minus the www), but assuming this is already the case, most of the set-up is done in your Google Drive.

In this example we’re going to use a website form already that was already created by AWP Computer Services for one of our clients, Alpha Dog Services, which is used on their Dog Almighty! website.

http://www.dog-almighty.co.uk/contact.htm
 Dog Almighty - Contact Form: http://www.dog-almighty.co.uk/contact.htm


Accessing Google Drive

From your Google (Apps for Work) account, once you’re logged in, you’ll be able to access your Google Drive.

Google Drive - Google Apps for Work


Your Google Drive is the place that all your files that are stored in the Cloud (well on your account Google servers at least) can be accessed, this includes the files created using the various Google Docs Apps (including Docs, Sheets, Forms, Slides & Sites) as well as other documents and files you may have uploaded.

Google Drive page
Whilst Alpha Dog Services have been using their GMail account to its full potential, and their Drive quite often, they set up a separate user (on their domain) for us and we created the necessary form here.  Even though there aren't any other document shared with us here at the moment, we thought it made sense to create a new folder (called 'Website') to ensure that the form for the website wasn't confused with other things in the future.

Google Drive - Website folder
Within this ‘Website’ folder we created a new form, for the data capture needed by the website’s ‘Contact Us’ page.  This can be seen as “Dog Almighty - Contact Form”.

Google Drive showing link to the Dog Almighty - Contact Form
However, if the necessary form hadn't been created, it would be a case of starting a new form by using the "Create" button at the top of the menu on the left hand side of the page.

Google Drive - Create Form
As mentioned, our form is already in place, so in the style of ‘Blue Peter’ - here’s one we made earlier!  Clicking on the link for the 'Dog Almighty - Contact Form' will open a Form designer page within a new tab in our web browser.

Dog Almighty - Contact Form

The Form designer in our example already has all the key elements populated with information, but if you were creating a new form it would be a case of renaming your form, configuring some basic settings and then starting to set up your specific individual questions in the order and format you would like them.

Rename your Google Form


After this, you can skip over the From Settings options, as you shouldn’t require anything in the three checkboxes that are available.  Moving on, you can now start to set up your own individual questions and the format of how you would like your enquirers to respond.  To begin setting up a new question, or to edit an already existing question you click in the pencil (Edit) icon at the top right of the question panel.

Contact Form - Edit question

You are able to chose from one of the following data capture types (Questions types):
  • Text
  • Paragraph
  • Multiple Choice
  • Checkboxes
  • Choose from a List
  • Scale
  • Grid
  • Date
  • Time

Google Form - Questions types

Once you've chosen which format of question best suits the information you are trying to capture, you can add some basic data validation rules to ensure that you are getting the right sort of answer for your question.  Here you can also decide whether you question is one that is essential.  If it is, you can tick the 'Required question' option to make it mandatory.

Create question - Data Validation

A typical example of the use of the Data Validation features would be used when you are asking the person who is completing the from to provide their email address.  Once you have set the 'Question Type' to 'Text' you are able use the Advanced settings to create a validation rule that ensures the data entered is in the format of an email address.

Advanced settings - Validation: Must be an email address

Completing your form and putting in your web site

Once you are happy that you have included all the questions you required for you contact page form you are ready to take the necessary steps to allow the form to be used on your website.  The first step is to set up the rules for the 'Confirmation Page'.  Here you can create a personalised message that the end user will see after they have completed and submitted the form.  You can also decide whether you want to provide a link with your 'Thank you' message that will let users navigate back to a blank form and submit another answer.

From Confirmation Page Settings
The final part of you form design is to get the HTML code that you will need to include in the web page where you want your form to be seen.

To do this you have two options.  The first option is to click the 'Send Form' button.  This will subsequently take you to a pop-up window that will allow you to share your form, along with also providing a an 'Embed' button to allow you to access the HTML you need.  

Send form - Embed
The second option is to select 'Embed' from the Google Form's 'File' menu.

Google Form - 'File' menu: Embed
Both of the above options will take you to a window where you can copy the required HTML code from.  The code can then be used to include in the HTML of your contact web page.  The HTML generated by Google is an IFRAME that has the URL (web address) of your published form.  Before you copy your HTML code, you can set the sizes of the IFRAME.  This is important, as you may only have a specific width available for you form within your web page.  Also, you ideally need to ensure you have allowed enough height for the complete form, as it isn't user friendly and can be confusing to whoever is completing the form if they are required to scroll up and down to see all of the questions.


Embed form

The HTML code that you copy for your embedded form will be similar to this:

 <iframe src="https://docs.google.com/forms/d/1sTvoxBvtbJDBnFNsXv2SVQmivvFH0BaOKAIZJgKvb2g/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">
Loading...
</iframe>

Where the 'src' attribute of the <iframe> element represents the URL (web address) of the form itself.


OK you're now ready to start using the contact form, in the next Blog Post we'll explain the necessary step to start using the data collected by your form and more importantly how to set up an automated email to let people in your company know when a customer has entered their details into your form.


If you would like to some help and advice about setting up Google Forms or you have questions about any other part of Google Apps for Work, please get in touch with AWP Computer Services to discuss your options.

 CALL AWP Computer Services on 01772 698078
  





No comments :

Post a Comment