Does Your Blogger Contact Form Really Deliver Messages?

Quick survey on what’s coming:

1. The alternative to Blogger Contact Form.
2. Drawbacks.
3. Two different approaches to apply.
4. How to create a Google Form and put it on Your website.
5. How to create custom landing page.
6. How to duplicate a Google Form.

To My surprise, the other day I’ve realized that the contact form of My website does not work properly. Interestingly, it still gives a positive confirmation message once You click “Submit” button - which, however, turns out to be false, because there is no message delivered. The same with all the rest of My websites where I use the contact form gadget.

After a little bit of research I’ve learned that those issues exist at least for couple weeks now, and Google probably is aware of that, working on the fix.

In these circumstances I was pretty sure that I Myself can’t do anything about it, i.e. it’s beyond My competence. But then another surprise has come, this time a positive one: I’ve discovered much better solution. A funny thing is that without this failure there are pretty low chances for Me to stumble upon this interesting alternative - so... I’m grateful :) .

The alternative to Blogger Contact Form.

It has several edges over classic contact form gadget - the following ones I find most important:

1. It allows You to add more fields to a form, thanks to which You can encourage Your Audience to share a more in-depth feedback. You can use fields of various types, making the interaction more friendly (checkboxes, linear scales, date and time pickers, etc. - there is even a file upload feature).
2. You can turn Your form into a small interview conducted in a step-by-step manner, i.e. one question displayed at a time, and a progress bar alongside it.
3. It’s much easier to customize the look&feel of the whole thing - as a result You may end up with a (contact) form in the same visual style as the website on which it is placed. Moreover, it’s much easier to apply Your Own “jQuery magic” (e.g. custom animations, Your Own progress bar, etc.) to make it even more unique/to add more fun :) .
4. Here You can see a list of all Your (contact) forms at once - no need to switch between blogs.
5. The dashboard collects all of the responses and gives You different interesting ways of studying them (for example, You can see all the answers to one particular question).
6. The dashboard gives You its own stats about all the responses - so You can have a look at the big picture.
7. It allows You to put all the gathered answers alongside the form itself - which enables You to create a guest book (for example - see a simplified demo).
8. Interestingly, all the forms You’ve created are stored (and automatically saved) on Your Google Drive (You can freely move them to another location within the Drive) - therefore You can easily create their backup, if You’d like to.

All of that is possible thanks to Google Forms, which are part of G Suit (Google’s complete office suite). With the help of Google Forms You can not only create a better contact form, but also forms serving for various different purposes (there are several examples already in place for You to inspect). Moreover, You can create those forms totally from scratch, if You like, caring about every little detail (there are many possibilities here - for example You can choose which fields should be required, or You can apply a validation mechanism checking if an e-mail or a website address have been entered correctly).

Drawbacks.

So far I haven’t found much of them:

1. To put such a form on Your website You need to do at least a little bit more than in the classic Blogger contact form case.
2. Form replies won’t be sent to You via e-mail any more - You can receive notifications only (You need to enable them first - for each form separately).

Two different approaches to apply.

There are two different ways of applying Google Forms on Your website. One is simpler, while the other gives You more flexibility.

In the first scenario You create a form completely within Google Forms dashboard. Once You’ve finished, You can grab a short code snippet to easy embed (copy&paste) on Your website (within the HTML/JavaScript gadget or directly within the template).

In the second scenario You create a basic form within the dashboard (just the fields You want to include - no additional features (like validation) or customization needed). Meanwhile You create a similar form within Your HTML/JavaScript gadget or the HTML template itself. Both forms should have the same fields. Then, using “Inspect” function within Your Chrome(-based) browser, You easily grab some code snippets from the form created within Google Forms - and paste them into the proper place within its HTML-based counterpart.

Both scenarios give You some room for customization, but in case of Google Forms dashboard the possibilities are pretty limited. Besides, it’s worth to remember that an embedded form (the first option) will be presented with accompanying “Google fine print” (like “Never submit passwords through Google Forms” or “This content is neither created nor endorsed by Google. Report Abuse - Terms of Service - Privacy Policy”).

and also Google “landing page” displayed once the form has been submitted.

The second scenario, although requiring more work, allows You to make the outsourced nature of a form completely transparent, i.e. it can not only look exactly like You prefer (landing page included!), but has no signs of Google brand behind it (which You may find beneficial, regarding Your brand’s coherence).

How to create a Google Form and put it on Your website.

Since there are already great how-to’s on the matter (I mean this and that one), I’m not gonna to repeat them because it’s pretty simple:

1. Create a form within Google Forms.
2. Open its preview (an eye icon on the top right).
3. Inspect its title (on the top) - this way it will be easier to quickly find the <form> header with action value to copy and paste into Your HTML form.
4. Inspect each and every field to gain their names (name attribute’s value) - to also include within Your HTML form.
5. Remember to enable e-mail notifications, If You’d like to receive them every time someone has filled the form.

Once again, for more detailed step-by-step instruction I recommend You to use this and that one.

How to create custom landing page.

Code-wise, the head of Your HTML form may look like this:

<form action="PasteTheProperActionValue" method="POST">

If You’d like to have Your Own landing page to display once someone has filled and sent the form, it will be enough just to replace the head line mentioned above with this:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='YourLandingPageAddressHere.html';}"></iframe>
<form action="PasteTheProperActionValue" method="POST" target="hidden_iframe" onsubmit="submitted=true;">

^{(the source)}

How to duplicate a Google Form.

If You would like to create similar independent forms to put on other websites, the easiest way may be as follows:

1. Open Your Google Drive and make a copy of Your form file, with the appropriate name.
2. Open Google Forms dashboard, then open the newly created form. and then open its preview (an eye icon on the top right).
3. This time You need to grab only its action value - as long as You only need the same fields as before, You don’t need to gain their name values again, because they remain the same.