Call: (209) 560-6611

Google Docs Contact Form

Date: May 7, 2012 Author: ang Category: Affordable Web Design Internet Tips Tutorials WordPress Tags: , Comments: 0

In this tutorial, I'm going to show you how to create a contact form for your website using Google Docs. I'm also going to show you how to install the contact form into your HTML or WordPress website.

How to create a contact form using Google Docs

  1. First we're going to create a contact form using Google Docs, so log into your Google Docs account: http://google.com/docs.
  2. Click the 'CREATE' button.
  3. Select 'Form'.
  4. Enter in 'Contact Form' in the field Titled 'Untitled form'.
  5. In the 'Question Title' field type 'What is your name?'.
  6. In the 'Help Test' field type 'Enter your first and last name."
  7. Set the 'Question Type' to 'Text'.
  8. Check the box next to 'Make this a required question.'
  9. Click the 'Done' button.
  10. Mouse hover over the 'Sample Question 2' field and click the 'pencil' edit icon button.
  11. In the 'Question Title' field enter 'What is your email address'.
  12. In the 'Help Text' field enter 'Enter you email address'.
  13. Set the 'Question type' to 'Text'.
  14. Check the box next to 'Make this a required question'.
  15. Click the 'Done' button.
  16. Click the 'Add item' button at the top of the screen.
  17. Select 'Paragraph text'.
  18. In the 'Question Title' field enter 'What is your message?'.
  19. In the 'Help Text' field enter 'Enter your message here'.
  20. Set the 'Questions type' to 'Paragraph text'.
  21. Check the box next to 'Make this a required question'.
  22. Click the 'Done' button.
    You can add more fields to your contact form if you like. I'm just going to keep it simple for this tutorial.
  23. Click 'More actions' at the top of the screen.
  24. Click 'Edit confirmation'.
  25. Replace the default text in the field with 'Thank you for contacting us, we will respond shortly.'.
  26. Click the 'Save' button.
  27. Click the 'See responses' button.
  28. Click 'Spreadsheet'. When someone sends their information, it will be saved to this spreadsheet so keep that in mind.
  29. Click on 'Tools'.
  30. Click on 'Notification rules'.
  31. Check the box 'A user submits a form'.
  32. Check the box 'Email - right away'. Now, every time someone submits data in the contact form, you will be notified via email.
  33. Click the 'Save' button.
  34. Click the 'Done' button.
  35. Click on 'Form'.
  36. Click on 'Edit form'.
  37. In the popup window click the 'More actions' button.
  38. Click 'Embed'.
  39. Copy the code snippet and close the popup windows.

Installing your Google Docs contact form into your WordPress website contact page.

  1. Log into your WordPress admin.
  2. Click on 'Pages'.
  3. Click on your 'Contact' page.
  4. Click the on the 'HTML' tab.
  5. Place the cursor where you want the contact form to appear.
  6. Paste the code snippet you copied into the page.
  7. Click the 'Publish' button.

The Google Docs form is very compact so you can also install the contact form into your WordPress widget.

Installing Google Docs form into your WordPress widget

  1. Log into your WordPress admin.
  2. Click on 'Appearance'.
  3. Click on 'widgets'.
  4. Drag a text widget into your sidebar area:
  5. Open the text widget and pate (Ctrl-v) the Google Docs form code snippet into the widget field.
  6. Click the 'Save' button.

Now you should see a contact form in the sidebar area of your WordPress website.

Installing your Google Docs contact form into your HMTL website

  1. Paste the code snippet into you HTML document.
  2. The form is in an iframe and comes with formatting elements  like width, height, frameborder, marginheight and marginwidth already placed in the code so you shouldn't have any problem formatting it to match your site.

Leave a Reply

Your email address will not be published. Required fields are marked *

Before you post, please prove you are sentient.

what is 5 plus 5?

Before you post, please prove you are sentient.

What color is the sky on a sunny day?