Google Apps Form for Website Visitor Contact
Unknown
08:55
Cloud based Apps
,
Contact
,
data capture
,
Embed form
,
Form designer
,
Gmail
,
Google Apps
,
Google Apps for Work
,
Google Docs
,
Google Drive
,
Google Form
,
HTML
,
iframe
,
office admin
,
Visitor
,
Website
16 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 |
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 |
![]() |
Google Drive - Website folder |
![]() |
Google Drive showing link to the Dog Almighty - Contact Form |
![]() |
Google Drive - Create 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
Subscribe to:
Post Comments
(
Atom
)
This comment has been removed by the author.
ReplyDeleteGreat Article Artificial Intelligence Projects
DeleteProject Center in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai
Pretty blog, so many ideas in a single site, thanks for the informative article, keep update more article.
ReplyDeletesoftware testing course in Chennai
Thanks for sharing, nice post! Post really provice useful information!
ReplyDeleteTì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ẻ.
Thanks for providing such an awesome information. This will be really helpful for me. Keep us updated with more such posts.
ReplyDeleteMobile Testing Training in Chennai
Mobile Appium Training in Chennai
Ionic Training in Chennai
Placement Training in Chennai
Excel Training in Chennai
VMware Training in Chennai
Microsoft Dynamics CRM Training in Chennai
The post you wrote which is full of informative content. I Like it very much. Keep on posting!!
ReplyDeleteAngularjs Training in Chennai
Angularjs course in Chennai
Selenium Training in Chennai
Software Testing Training in Chennai
Java Training in Chennai
AngularJS Training in Anna Nagar
AngularJS Training in T Nagar
Thanks for sharing, nice post! Post really provice useful information!
ReplyDeleteGiaonhan247 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ẻ.
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.
ReplyDeleteSpoken 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
ReplyDeleteAwesome 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
ReplyDeleteAwesome 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
Such A nice post... thanks For Sharing !!Great information for new guy like Hanuman Chalisa Lyrics
ReplyDeleteReally it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
ReplyDeleteWeb Designing Training in Chennai
Web Designing Course in Chennai
Web Designing Training in Bangalore
Web Designing Course in Bangalore
Web Designing Training in Hyderabad
Web Designing Course in Hyderabad
Web Designing Training in Coimbatore
Web Designing Training
Web Designing Online Training
wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
ReplyDeleteThis article resolved my all queries.good luck an best wishes to the team members.learn digital marketing use these following link
Digital Marketing Course in Chennai
Liên hệ Aivivu, đặt vé máy bay tham khảo
ReplyDeletevé máy bay đi Mỹ khứ hồi
vé máy bay phú quốc về sài gòn
đặt vé máy bay huế hà nội
vé máy bay đi đà lạt
vé máy bay đi huế giá rẻ
taxi sân bay nội bài
บาคาร่า
ReplyDeleteคาสิโนออนไลน์
ufabet
ufa
เว็บบอล
เว็บแทงบอล
ReplyDeleteufabet
ufa
พวงหรีด
โควิด