Easy Contact Forms using Google Forms

[Update on 8/11/10] As was pointed out in the comments, this post is a bit out of date. The functionality of Google Forms has changed. More importantly I don’t think Google Forms is the best or easiest way to add contact forms now. I highly recommend Contact Form 7, which is what I use for my contact form and my clients’.

The one feature that WordPress doesn’t provide that many businesses request is a contact form. There’s many plugins out there (I used to use cforms2), but for something as simple as this you don’t need to use a plugin.

1. Open up Google Docs and click New > Form.
2. Fill out all the questions you want. A typical contact form might just include Name, Email, Message.
3. Go back to the spreadsheet and click Share > Set Notification Rules. Check “email me when someone submits a form” and “email me right away”
4. (Option 1) If you like Google’s default form design, click “Embed” and copy the code it provides (an iframe).
5. (Option 2) If you would like to customize the design of the form, go to the spreadsheet and click  Form > View Live Form. Right click on the page, press “View Source,” and copy the code: <form> … </form>.
6. (Simple option). Go to WordPress, edit your Contact Page, switch to HTML view and paste the code. This will add the form to your page.
7. (More difficult option) If you’re a developer and don’t want clients messing with the form’s code, create a page template, include the code in there, and then set the contact page to that page template.
8. If you chose Option 2 above, you can now use CSS to style the form to match your site.

Here’s an example of the form in action: http://2010.bilconference.com I just used the iframe because I didn’t need to change the look of the form.

Additional feature – If you’d like to share the responses on your site (like the BIL Attendees page), just:

1. Create a new sheet on the spreadsheet (at the bottom, “Add Sheet”).
2. Label the columns you’d like to include at the top.
3. Under the first column, type “=” then switch to the previous sheet and select the first column’s contents. Press Enter. This should give you a formula the duplicates the content (something like =Sheet1!A2). Repeat for each column you’d like to share.
4. Select all the cells of the first row of data, hover over the bottom right corner, click the square and drag down. This will repeat the formula across the lower cells.
5. Click “Share > Publish as a Web Page.” Under Sheets to Publish select “Sheet 2″, and click “Start Publishing”.
6. Under Get a link to the published data, select “HTML to embed in a page” and copy the code.
7. Open WordPress and paste the code in the page you’d like to share it on.

Tagged as: design, tutorial, wordpress

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis or Genesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).