How to Create a Free Website Contact Form With Google Forms
Pinterest Whatsapp
Advertisement

Running a website or a blog can be fun, but offering a way for visitors to contact you isn’t always easy or straightforward. Thankfully, Google offers a perfect website contact form solution: you can embed a Google Form on a page and collect all comments from your readers in a Google Sheet.

It’s straightforward to set up, so if you’re ready to create an enhanced contact form for your website, let’s get started!

Creating Your Contact Form in Google Forms

Google actually offers a pre-made “Contact Information” form in the templates gallery when you first log into your Google Forms account.

Google Sheets, contact form

The form asks for standard information like name, address, phone number, email address, and a field for the user to type in their comments.

You can customize this form by changing what information you’re asking for.

Google Sheets, contact form

You can also change whether or not that information is required.

If it’s not required, then the user can leave that field blank. If it is required, then the user can’t submit the form until they’ve entered something into that field.

Google Sheets, contact form

Since you’re using this form as your website contact form, you want to make sure that the user has actually entered something into the comments field. So make sure you’ve set that item to Required.

Google Sheets, contact form

Now that you’ve customized the content of Google’s Comment Form template to suit your needs, it’s time to customize how the form behaves when your users actually use it.

Setting Up Your Website’s Contact Form

If you click the Settings icon, in the General tab, you can control how this form behaves when people submit it from your website.

For example you can have the form send a duplicate of the user’s answers to the email address they provided.

You can also enable or disable their ability to edit their answers after they’ve submitted them.

Google Sheets, contact form

Under the Presentation tab, you can customize the response your users will see after they submit the form on your website.

Google Sheets, contact form

Make this something meaningful, since it will be displayed to every visitor who submits this form.

For example, it’s good to let them know roughly how long they’ll have to wait for a response (you could even provide a phone number here if they need a more urgent response).

It all depends on how you’re using the form and what kind of contact you want to provide to your visitors.

Finding the Embed Code

Now that your form is ready, it’s time to embed it onto your site.

The first step is to get the embed link for your form. It isn’t very straightforward, because there’s no embed icon displayed directly on the form editor page.

To access the embed code, you have to click on the Send button at the upper right of the form editor.

Google Sheets, contact form

This page displays the HTML embed code you’ll need to copy and paste into your site. It’s important to set the right width and height settings here so the embedded form fits well into the destination page.

Google Sheets, contact form

You may need to play around with a few sizes, but don’t worry. You can always come back here, change the size, and then copy and paste the new embed code again.

Embedding the Contact Form on Your Website

If you have a website or a blog, the standard approach is to create a Contact menu item in your header. This makes it as convenient as possible for visitors to contact you.

Some sites use an alternate approach, like placing this link in the footer, or even on the About Us page.

On my site, the Contact menu item moves the view down to an area after the Testimonials. This is where I want to embed my contact form.

Google Sheets, contact form

If you’ve custom written your own website from scratch, then you’ll want to insert the embed code directly into the section of the page where you want it to show up. When you take the manual approach, make sure you avoid common mistakes people make when building a web page 9 Mistakes You Shouldn't Make When Building a Web Page 9 Mistakes You Shouldn't Make When Building a Web Page These following HTML coding mistakes are easy to make, but if you head them off earlier rather than later, your page will look better, be easier to maintain, and function how you want it to. Read More .

With a WordPress site, the theme you’re using will usually have an area with a contact form that you can customize. For example, with the Onetone theme there’s a “Section Content” field on the main page that includes the existing contact form code.

You can highlight this code and replace it with your new Google Contact Form.

Google Sheets, contact form

Why Using a Google Contact Form Is Better

Why not just use the existing contact form that comes with a theme? There are actually several reasons using Google Forms is better:

  • PHP forms usually use POST or SMTP to send email, and in both cases you need to know how to configure the email server so it works.
  • Instead of sending comments to email, the Google Contact Form collects all messages to a Google Sheet. This prevents inbox clutter.
  • You can modify the form at any time using the Google Form GUI rather than having to edit any code.

Once embedded into the web page, your contact form will look something like this.

Google Sheets, contact form

As you can see this first attempt isn’t perfect. The current coloring theme for the Google Form doesn’t quite blend well with the web page theme.

Time to tweak the Google Form design a little more.

Updating and Customizing the Contact Form

The beauty of this approach is that once it’s embedded on your site, you can redesign the form however you like without ever having to touch your web page again.

For example, to change the color scheme of the existing form, just go into the Google Form editor and click on the color palette icon in the upper right corner.

Google Sheets, contact form

Since my site has a darker black-based theme, a gray contact form theme should blend nicely.

The moment you save the new Google Form in the editor, it updates the form on the website, as you can see here.

Google Sheets, contact form

Now that the design and embed is complete, it’s time to test whether the contact form actually works as desired!

Testing Your Google Contact Form

You should always go through a test run of any new form you place on your website.

In this case, the Google contact form responds with the custom response text you defined when you designed the form.

Google Sheets, contact form

You can access all of the comments from your visitors on the same page where you designed the form.

Just click on the Responses link at the top of the design form.

Google Sheets, contact form

Here you can see individual comments and contact info from users. You also have the option to click the Google Sheets icon in the upper right corner of the window. This will create a new Google Sheet to store all of the incoming comments from users.

Choosing how you view incoming user comments really depends on how you plan to process them. If you’re hoping to create some Google Script automation whenever there’s a new incoming email, then Google Sheets is the way to go. We’ve covered many ways you can use Google Script to automate Google Sheets 4 Google Scripts That Make Google Sheets Much More Powerful 4 Google Scripts That Make Google Sheets Much More Powerful Google Sheets is great out of the box, but it can be even more powerful if you use Google Scripts to enhance its capabilities. Read More .

However if you just plan to manually respond to every new incoming comment, then you’re probably fine just using the display inside of the Google Forms editor page.

If you ever do want to save comments in a spreadsheet format, there are several options available. Just click the three dots icon on the upper right of the Responses view to see them.

Google Sheets, contact form

You can download all responses in CSV format, or even output them to your printer or to a PDF document. This is also where you can configure notifications whenever a new comment comes in from your website.

Take Your Google Forms to the Next Level

Using Google Forms to process comments gives you a lot more flexibility and functionality than using a standard web form.

Without any coding on your part, comments are logged in a convenient sheet. You can enable or disable things like email notifications or whether comments can be edited after submission.

One drawback with this approach is that the embed uses an iframe, which inserts a scroll bar in the window.

But if you give your form a design that blends it in well with your theme, the scroll bar doesn’t look that bad. It’s also a fair tradeoff given the many features you’re getting in return.

If you’re just getting started with Google Forms, you’ll want to check out our extensive guide to Google Forms The Best Guide to Google Forms You’ll Ever Find The Best Guide to Google Forms You’ll Ever Find Google Forms is one of the best free web tools available to gather data. This Google Forms guide will give you everything you need to master essential form-building skills. Read More . There are also many great Google Forms add-ons Google Forms Can Do Anything With These Awesome Add-Ons Google Forms Can Do Anything With These Awesome Add-Ons Google Forms is an underutilized tool. Let's save time, reduce errors, and make your forms more dynamic with these amazing Google Forms add-ons. Read More that let you extend what you can do with it. You can even embed those enhanced forms in your website!

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

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