ADD A CUSTOM CONTACT FORM TO BLOGGER IN 5 EASY STEPS

Sometimes the Contact Form gadget from Blogger does not always operate like it should. It’s glitchy. Sometimes it will work like a charm and other times it just falls flat and you never know if someone is trying to contact you. Also, it’s not customizable at all, if you wanted to add extra fields… well, your plain out of luck.

I’m going to share with you how to create your own contact form using your Google Drive – you heard that right, Google Drive!

Create Your Form

Go to Google Drive. Once you’ve signed in, click on the red button on the left entitled “NEW” and click on “Google Forms”. Get started by creating the form that you want using their built in form creation tool. Add your name, email, website, comment, and any other fields you want to include to your new form. You may name your form in the upper left hand corner where it says Untitled Form, just click on that and give your form a name. Once you’re done click “Done” (they’re quite literal that way!) Make sure all of the boxes in the Form Settings and Confirmation Page sections are unchecked.

Find and Extract your Form Code

Extracting the form code is sort of a roundabout process; at the bottom of the page click Send, you’ll get a popup that has a Link To Share, copy & paste this link into a new browser tab and you’ll see your new form. To extract the form code in that new browser window with your form, right-click on the page and select “View Page Source”. Highlight and copy everything in that page from <form...> to </form>. You might have to look closely for it but, those two code snippets are in there.

Insert the Code into your Contact Page

Once you have the code go back to your Blogger site, and Edit the Page that will have your form. Click on the “HTML” tab so you’re not in the “Compose” tab. Paste the code that you copied in Step 2 into the the edit window.

To clean up the code I recommend removing all <div></div> elements. That should leave you with just the bare basics of the form and eliminate most style conflicts.

Hit Publish and you now have a form! The only trouble is that when a user submits the form it goes to an ugly page in Google Drive; the next step fixes that. Onward!

Set up a Redirect to a Thank You Page

The first step to setting up a redirect to a thank you page in your site is to create the thank you page. In Blogger go to Pages and create a new page for your Thank You page. I usually include some text that says thank you for submitting a contact request, I will be in touch shortly… etc., make it personal to you. Then publish the thank you page.

Once that’s done, go back to the Contact page. Copy & paste the following code into the “HTML” tab of your contact form page, right before the <form..> element.

<script type="text/javascript">
var submitted=false;
</script><iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){window.location='URL-OF-YOUR-THANKYOU-PAGE';}" style="display: none;"></iframe>

Change the "URL-OF-YOUR-THANKYOU-PAGE" to the URL of your thank you page.

In the <form...> element change the onsubmit and target sections to be:

onsubmit="submitted=true;" target="hidden_iframe"

Update your page.

Get Notified

To get notified when someone submits a form submission you’ll need to go back to your contact form spreadsheet in Google Drive. Open up the spreadsheet to view it, then in the options at the top of the page, click on “Responses”, then “Choose Response Destination”, select “New Spreadsheet” and title it Contact Form Responses (or something along those lines – your choice), click “Create”.

Go back out to Google Drive again, and select your new responses spreadsheet that you just created, in the options at the top of the page, click on “Tools”, then click on “Set Notification Rules”, Check the box for “a user submits a form” and “email – right away”, then hit “Save”.

And, that’s it! Give it a test drive! Your form submissions should send successfully, you should be notified right away, and the folks who contact you will be re-routed to your thank you page once it has been submitted.

It’s all so lovely.