Google Apps Website Visitor Contact Form to Email

1 comment

Use a Google Apps Form to capture and email website visitor contact information

Following on from our previous article, which explained how to set up a Google Apps Form to capture the details of a visitor to your website that wants to get in touch with you, we outline how the from can be added to your website.  This Blog post also explains how and where the data is captured, and how the enquiries can be emailed directly to you Gmail Inbox.

The first article was titled "Google Apps Form for Website Visitor Contact" and can be read at the following web address:


Adding a Google Apps Form to your web page


At this stage you should have the HTML code that you copied from your Google Apps account for your embedded form, and it should 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.


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.

Dog Almighty Form: HTML in DreamWeaver

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.

Dog Almighty Contact Form (Responses)
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
Try logging out of Google and then accessing your 'viewform' URL (web address).  You should be able to see a version that can't be modified, but can accept responses.

By the same token if you change the 'viewform' part of the URL to be 'edit' and you can make changes to the form, when you're not logged into your Google domain account, there is an issue.

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

...or in our example:


The web address should automatically change to have 'viewform?edit_requested=true' on the end, and a button to 'Request edit access' should be visible, but the end user shouldn't be able to 'hack' your form!

Contact Form - Request edit access

Managing Form Responses using Email

Once you've got the form set-up, in place on your web page and or happy that people can access it correctly, it's now time to think about the last element.  This is setting up a routine to pick up the form entries from the spreadsheet and send them to somebody within your organisation via an email.

To send an email from the Contact Form a 'script' is required.  In this case, we did not write the script, we picked up one from somebody who had already used this 'from to email' function before and had a script ready made to do the job.  You will be able to find the necessary scripts by searching on the Google search engine, but the one we deployed should work.

The script is as follows:

/* Send Google Form by Email v2.0 */
/* For customization, contact the developer at amit@labnol.org */
/* Tutorial: http://www.labnol.org/?p=20884 */
function Initialize() {
  var triggers = ScriptApp.getScriptTriggers();
  
  for(var i in triggers) {
    ScriptApp.deleteTrigger(triggers[i]);
  }
  
  ScriptApp.newTrigger("SendGoogleForm")
  .forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
  .onFormSubmit()
  .create();
  
}
function SendGoogleForm(e) 
{  
  try 
  {      
    // You may replace this with another email address
    var email = Session.getActiveUser().getEmail();
    
    // Optional but change the following variable
    // to have a custom subject for Google Form email notifications
    var subject = "Dog Almighty! Website Enquiry";
    
    var s = SpreadsheetApp.getActiveSheet();
    var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];    
    var message = "";    
    
    // Only include form fields that are not blank
    for ( var keys in columns ) {
      var key = columns[keys];
      if ( e.namedValues[key] && (e.namedValues[key] != "") ) {
        message += key + ' :: '+ e.namedValues[key] + "\n\n"; 
      }
    }
        
    // This is the MailApp service of Google Apps Script
    // that sends the email. You can also use GmailApp for HTML Mail.
    
    MailApp.sendEmail(email, subject, message); 
    
  } catch (e) {
    Logger.log(e.toString());
  }
    
}

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
 












1 comment :

  1. thanks for share information of google apps website tracker you can also study visitors by
    Who is visiting my website Tool

    ReplyDelete