M TALUAT

Home

How To Add Contact Form In Blogger Using Google Forms

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs recently,when a user clicks the submit button, the message is not being sent from the Blogger contact form.
Today I shared in this tutorial to use another best alternative .The best way to fix Blogger contact form not sending messages is to stop using the default contact form provided by Blogger.This is not the first time Google's contact form has stoped working and it may not work in the future. 

Highlights

  • Create and customize Google Contact form. 
  • Sets a redirect when a user sends a message. 
  • Getting responses on emails and replying them.

Benefits Of Using Google Forms

  • Google owns it 100%. 
  • Totally free. 
  • 100% safe and highly secure. 
Demo

Steps — How to do it ?

In Google Forms

  • Create Google Form and there click on + (add) icon
  • Click on add Questions and add "Name" and "Message" section.
  • Go to "Settings" option and enable there "Collect email address by default"
  • Now hit on "Send" button and copy the form link as shown below.
  • Open the link you copied in new tab and fill out the fields with some entries (this step is not mandatory, but will ease to find entry IDs later) .
  • Right click anywhere and click on Inspect elements.
  • Select on body and right click and copy OuterHTML as shown below.
  • Open Notepad and paste the code you copied
  • Now Search for the entry "data-params=" you'll see two search results , Choose the one which has 10 digits as mentioned below :
"data-params="%.@.[1692067636,"Message ",null,1,[[1196484713,[],true,[],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"Message "]],

Do Copy entry ID seperately for name and message questions

  • Add the ten digit code to entry in the below mentioned html code like entry.xxxxxxxxxxx 
<input type="hidden" name="entry.1196484713" value="name">
<input type="hidden" name="entry.1967892475" value="message">

In Blogger

  • Login to your Blogger Dashboard
  • Then go to Pages > Create New Page.
  • Enter Name As "Contact Form" in page title field.
  • Now Switch To HTML Mode.
  • Copy following code and paste inside blank field.

Change this form link with your own one https://docs.google.com/forms/d/e/ 1FAIpQLSL20HJgEnNzIk52yEUpuMjjFv VUkqB1n9yV9Y5zWmDBGvv2Q/viewform ?usp=sf_link

<style>.myform input[type=text],
.myform input[type=email],
.myform textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;margin-top: 6px;margin-bottom: 16px;resize: vertical;}
.myform input[type=submit] {background-color: #04AA6D;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;}
.myform input[type=submit]:hover {background-color: #45a049;}
</style>
<form class='myform' action="https://docs.google.com/forms/d/e/1FAIpQLSeL20HJgEnNzIk52yEUpuMjjFvVUkqB1n9yV9Y5zWmDBGvv2Q/viewform?usp=sf_link">

   <label>Name</label>

   <input name="entry.xxxx" required="required" type="text" />

   <br />

   <label>Email</label>

   <input name="emailAddress" required="required" type="email" />

   <br />

   <label>Message</label>

   <textarea autocomplete="off" name="entry.xxxx" required="required" rows="3" type="message"></textarea>          

   <input type="submit" value="Send" />

</form>

Conclusion

So today we have discussed about How To Add Contact Form In Blogger Using Google Forms . I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me. Do visit regularly for getting more updates like this.
Copyright © The Taluat
Tags#form #blogger #Contactform #Form #GoogleForm