Easy Contact Forms using Google Forms

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

[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 WPForms.

The one feature that WordPress doesn’t provide that many businesses request is a contact form. There’s many plugins out there, 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.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Brian @ ArcticLlama.com says

    Exactly what I was looking for! Thank you.

    However, it appears that things have changed a bit since this was written. The menu options referenced, for example, no longer exist or have been renamed. I’ll figure it out, but if you want, you may want to update / write a new post with the current Google Docs setup.

    Thanks again,
    Brian
    ArcticLlama, LLC
    Professional Freelance Writers at ArcticLlama.com

  2. Ricky says

    Thanks for useful information.
    Just I am thinking about WordPress Blog (Not self hosted). Because it not accept the Iframe and other methods. So how can we go about it.

    • Bill Erickson says

      I don’t use WordPress.com so I’m not sure what it offers. I’m sure there’s a contact form plugin that you could use though.

  3. Irsyad says

    tried puting using the iframe in the contact page. but when i preview it only shows..

    Loading…

    did i did something wrong?

    • Bill Erickson says

      As I noted at the top of this post, Google Forms have changed since I originally made this post so it might not work anymore. I highly recommend Contact Form 7 or Gravity Forms.

  4. Bridgette says

    Thanks! This was very helpful and I had been trying for hours to make the contact form on my WordPress theme work!

  5. Brian M says

    Hi Bill, this seems very close to what I’m trying to do, but not 100% sure. I have a site where I have a form to let people RSVP for an event. Could I have the form fields they fill out go directly to a spreadsheet in Google Docs? Right now I’m filling out the form manually when Emails from the RSVP form come through.

    Thanks!

    • Bill Erickson says

      Yep, if you embed the Google Form it will auto-populate the spreadsheet. Your use case is the exact same as mine was