Showing posts with label iframe. Show all posts
Showing posts with label iframe. Show all posts

Google Apps Website Visitor Contact Form to Email

Unknown 02:53 , , , , , , , , , , , , ,

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
 












Read More

Google Apps Form for Website Visitor Contact

Unknown 08:55 , , , , , , , , , , , , , , ,

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
  





Read More
Subscribe to: Posts ( Atom )

Labels