Google Apps Website Visitor Contact Form to Email

Unfortunately, at this stage you are going to need to work with the HTML of your web page to get the form in the right place.  If you are using a visual editor, usually known as WYSIWYG (what you see is what you get), pasting the form directly into the editor will not work.  To clarify, a visual editor is one that looks like a word processor and does not show the 'source code'.  The likely result is you will get a version of the of the source code in your page and not the working form.

It would be difficult to cover all  the possibilities here, but as a general tip you need to look for something along the lines or HTML, Source or 'Edit source'.

When editing the Alpha Dog Services from, used on the Dog Almighty! website, we use website editing software tool called DreamWeaver, as we created the pages from a website they'd had designed a number of years ago and work directly with the HTML.

Including the HTML for your form from Google Apps alone should be enough, however, we added some HTML comments before and after it as well as placing the <IFRAME> in a container tag (HTML element).  In this case that means we used a 'layer', which can be seen as a <div> tag.

Our complete code for the form looked like this:

<!-- -------------------- Google Apps for Work Form --------------------- -->

<div id="google-form-container" style="width: 430px; height: 1700px;">

<iframe src="https://docs.google.com/a/alphadogservices.co.uk/forms/d/1sTvoxBvtbJDBnFNsXv2SVQmivvFH0BaOKAIZJgKvb2g/viewform?embedded=true" width="425" height="1650" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

</div> <!-- google-form-container -->

<!-- ------------------ Google Apps for Work Form <END> --------------------- --> 

We used the layer to control the height available to the form within the page, so that there wasn't a separate scroll bar at the side of the form as well as the page itself.  Also, you may need to consider the width of the form as well.

If everything has gone according to plan so far, you should no have a web page on your website that displays the new form ready for your customers to start sending you enquiries!

The next stage is to test that it works, and then to ensure you know when somebody has submitted an enquiry you get to know about it straight away!

Testing and Settings

If you go back to you Google Drive, in the same location as your newly created form, you should notice that there has also been a new spreadsheet created automatically.  It will have the same name (TITLE) as your form, but with '(Responses)' on the end.  This is where all the entries are submitted and recorded.  The Google Apps user that has created the form will be automatically notified (by email) each time the form is modified.  This is both when a user on your domain makes a direct edit in the spreadsheet, as well as when a customers details are inserted into the spreadsheet from a form submission.

An important thing to consider here is whether the person who has created the form is the one who needs to know that there has been an enquiry and subsequently respond to it.  In our example the form was created using the 'Webmaster' account, but it is actually 'Rachel', who runs the business, that needs to pick up, pardon the pun, the leads!

It's not going to be convenient or efficient to keep checking the spreadsheet to see what somebody is asking when they have sent an enquiry.  Whilst it's useful to have the spreadsheet for a record, it's going to be much easier to reply directly to an email.

Contact Form (Responses) Spreadsheet

To share the form with other people in your organisation you need to add 'Collaborators'.  This is done from the 'File' menu in the form (not the Spreadsheet) using the 'Add collaborators' option.

Contact Form - Add Collaborators

What's very important is that you add 'Collaborators' (those who need to work with the form and it's responses), but you do not have an editable version of the form visible on the web.  If the form isn't visible on the web then you won't be able to embed it in you website, however if you don't have the editing locked down somebody (outside of your domain) could effectively access your form and break it.

Contact Form - Sharing Settings

As far as making sure the website visitors can see and complete the form online is concerned, you need to make sure you uncheck (option is not selected) the 'Require Alphadogservices.co.uk login to view this form' option.

Add caption

When you check this option, you will be alerted that this will make the form viewable outside of your domain.  For this application, this is OK.

Contact Form - Do not require sign-in? [OK]

If you can't get to your form viewing URL (web address) without being logged into Google, you've got a problem.  For example, the viewable form address will look something like this:

https://docs.google.com/a/alphadogservices.co.uk/forms/d/1sTvoxBvtbJDBnFNsXv2SVQmivvFH0BaOKAIZJgKvb2g/viewform

Your URL will have it's own unique domain and id but should have the same format.

• https://docs.google.com/a/[your-domain]/forms/d/[your-id]/viewform

• https://docs.google.com/a/[your-domain]/forms/d/[your-id]/edit

Contact Form - Request edit access

Managing Form Responses using Email

To add the script to your 'Form Responses' spreadsheet you need to access the 'Script editor' from the spreadsheet's 'Tools' menu.

Contact Form (Responses) - Tools > Script editor

This will open up a new Tab (or Window) where you can paste the script from above.  Replace any existing script code if there is already something in the Code.gs Tab.

There is a variable (setting in the code) which controls the Subject line of the email.  In our example it is, var subject = "Dog Almighty! Website Enquiry"; (which should be on line 29 in the code), so you need to change this to suit your application.

Website Enquiry Form - Script (Code.gs)

Save the code (Press Ctrl+S Windows or Cmd+S on Mac) and give your project any name (say “Send Google Forms by Email”).

Go to the Run menu and choose Initialize.  The Google Script will now require you to authorize the script – just click the Accept button and you’re done.

Run Google Script - Initialize

If you need to disable notifications, open the script editor again and choose Resources -> Current Script Triggers and delete the Form trigger associated with the “On Form Submit” action.  You can also schedule Google Forms to stop accepting responses after a given date, although this isn't going to be a likely option for a website contact form.

The final test is to complete the form, check all the data validation rules are working as expected and submit your completed form.  A new set of responses should be recorded in your spreadsheet for the form and the information that has been submitted should have also been emailed to the creator of the form.

Dog Almighty Contact Form - Test Email Sent

That hopefully, should give you everything needed to managed the form and it's responses.  However, it the creator of the form is not the one who needs to deal with the responses on an ongoing basis, you may need to consider automating a process to forward the messages on to the appropriate Inbox.

This post is already quite involved and lengthy, so I think the forwarding will need to be covered in another post, coming soon...!

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