Google Apps Form for Website Visitor Contact

19 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
  





19 comments :

  1. This comment has been removed by the author.

    ReplyDelete
  2. Pretty blog, so many ideas in a single site, thanks for the informative article, keep update more article.
    software testing course in Chennai

    ReplyDelete
  3. Thanks for sharing, nice post! Post really provice useful information!

    Tìm hiểu về quy định gửi hàng đi mỹ và hướng dẫn cách mua sách trên amazon giá rẻ với trang web mua sắm trực tuyến ở mỹ cũng như phí ship hàng từ mỹ về việt nam giá rẻ.

    ReplyDelete
  4. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhan247 chuyên dịch vụ mua hộ hàng mỹ uy tín trên website pandora úc hay dịch vụ order hàng mỹ vận chuyển ship hàng mỹ về Việt Nam uy tín và hướng dẫn cách mua hàng trên amazon ship về việt nam giá rẻ.

    ReplyDelete
  5. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Spoken English Class in Coimbatore
    Spoken English in Coimbatore
    Best Spoken English Coaching Centre in Coimbatore
    IELTS Classes in Coimbatore
    best IELTS Coaching Center in Coimbatore
    German Language course in Coimbatore
    German Language in Coimbatore

    ReplyDelete

  6. Awesome post. I am a normal visitor of your blog and appreciate you taking the time to maintain the excellent site. I’ll be a frequent visitor for a long time.

    ACP Sheet
    ACP Sheet Price
    Aluminium Composite Panel

    ReplyDelete

  7. Awesome post. I am a normal visitor of your blog and appreciate you taking the time to maintain the excellent site. I’ll be a frequent visitor for a long time.

    ACP Sheet
    ACP Sheet Price
    Aluminium Composite Panel

    ReplyDelete
  8. With special privileges and services, UEFA BET offers opportunities for small capitalists. Together ufa with the best websites that collect the most games With a minimum deposit starting from just 100 baht, you are ready to enjoy the fun with a complete range of betting that is available within the website

    ufabet , our one another option We are a direct website, not through an agent, where customers can have great confidence without deception The best of online betting sites is that our Ufa will give you the best price

    หาคุณกำลังหาเกมส์ออนไลน์ที่สามารถสร้างรายได้ให้กับคุณ เรามีเกมส์แนะนำ เกมยิงปลา รูปแบบใหม่เล่นง่ายบนมือถือ คาสิโนออนไลน์ บนคอม เล่นได้ทุกอุปกรณ์รองรับทุกเครื่องมือ มีให้เลือกเล่นหลายเกมส์ เล่นได้ทั่วโลกเพราะนี้คือเกมส์ออนไลน์แบบใหม่ เกมยิงปลา

    อีกทั้งเรายังให้บริการ เกมสล็อต ยิงปลา แทงบอลออนไลน์ รองรับทุกการใช้งานในอุปกรณ์ต่าง ๆ HTML5 คอมพิวเตอร์ แท็บเล็ต สมาทโฟน คาสิโนออนไลน์ และมือถือทุกรุ่น เล่นได้ตลอด 24ชม. ไม่ต้อง Downloads เกมส์ให้ยุ่งยาก ด้วยระบบที่เสถียรที่สุดในประเทศไทย

    ReplyDelete
  9. Probably the most genuine football betting UFABET that's over and above description Find fun, excitement and excitement with slot video games, hundred no cost acknowledgement, fast withdrawal. In case you would like to relax slots for cash No need to deposit a lot, without minimum, without need to talk about, squander time simply because UFABET is really reduced, paid heavily, a number of good promotions are waiting for you. Ready to assure enjoyable, no matter if it is Joker SlotXo fruit slot, we can telephone call it an internet slot internet site for you especially. Able to relax Like the support team which is going to facilitate slot formulas as well as strategies of actively playing So you can be sure that every moment of fun and pleasure We'll be there for you to provide the customers of yours the best appearance and also total satisfaction.
    บาคาร่า
    สล็อต
    ufa
    แทงบอล

    ReplyDelete
  10. In case someone is showing signs of extreme wealth or might be in the spotlight, then bodyguard company
    one can consider seeking additional protection in the form of armed guards.

    ReplyDelete
  11. Any creature can look at the WiFi Password Hacker Online section in the diagram and would like to use it for free. Hack Wifi Password Online Android

    ReplyDelete
  12. I have read your blog. It is really helpful. If you want to excel in your class 11 studies, enroll in our online tuition for 11th class today and experience the benefits of personalized learning from the comfort of your home.
    For more info Contact us: +91-9654271931, +971-505593798 or visit Online Tutoring Sites for Class 11

    ReplyDelete
  13. Pretty blog, so many ideas in a single site, thanks for the informative article. Discover the key to unlocking your full potential in your AS Level exams with Ziyyara’s comprehensive online AS Level courses.
    Book A Free Demo Today visit AS level courses online

    ReplyDelete