How To Create Contact Us Page For Blogger With Google ReCaptcha [ Adsense Friendly ]

Hello Viewers, Welcome to My Site “Shubham Blogging”. I hope all are doing good. Do You Want to Create Contact Us Page For Blogger With The Help of Html Code & Using Google Captcha?That’s great! Because you’ve come to the correct place.

Today we’ll be seeing How you can create Contact Us Page For Blogger Website Using Google ReCaptcha [ Adsense Friendly ]. So let’s say you have a website and you want to give your visitors, a way to contact you.You can do that by adding a contact form.

So today, We’re going to create a Contact form, So once you create this form Anyone who is visiting your site will be able to fill-up this form and when they click ‘submit’ you’ll get an email with the message they have sent. So this will give your visitors a way to reach you, when they need help or when they have something to share. Okay!

Whar is Contact Us Form?

Contact Form is the simplest way for your visitors to contact you without leaving your website, allowing them to submit their contact information (name, email address) and queries.

The information you collect in your contact form is typically delivered directly to your email inbox. You can use the Contact form to collect feedback, generate leads, subscribe to newsletters, build your community, and much more.

What is Google ReCaptcha?

To prevent malicious software from engaging in abusive activities on your website, reCAPTCHA employs an advanced risk analysis engine and adaptive challenges.

Meanwhile, legitimate users will be able to login, make purchases, view pages, and create accounts, while unauthorised users will be barred.

How Google ReCaptcha Will Help in Blogger Contact Us Form?

If Someone Try to Spam the Contact Us Form, then He/She will not able to do. Captcha Helps to Reduce the Spam Message. Also Captcha Increase the Security of your Contact Form.

Steps to Create Contact Us Form With Google Recaptcha

Step 1 :- Login to Blogger Dashboard, Go to Pages & Click On New Pages

Step 2 :- Open the Post in HTML View

Step 3 :- Copy the Below Code and Paste it in “HTML View”

<!--Form Code Start Here--><div class="widget ContactForm" data-version="2" id="ContactForm1"><div class="widget-title"></div><div class="contact-form-widget"><div class="form"><form action="https://formsubmit.co/add-your-email@gmail.com" method="POST" name="contact-form" onsubmit="return submitUserForm();"><input name="_template" type="hidden" value="table" /><input name="_subject" type="hidden" value="Work0Crazy New Contact Us Message " /><input name="_captcha" type="hidden" value="false" /><input name="_next" type="hidden" value="https://yoursitelink.com/p/thanks-for-contacting-us.html" /><p></p>Name<span style="font-weight: bolder; color:red;">*</span><br /><input class="contact-form-name" id="" name="Name" required="" size="30" type="text" value="" placeholder="Enter Your Name"/><p></p>Phone Number <span style="font-weight: bolder; color:red;"></span><input class="contact-form-name" id="" name="Phone" size="30" type="text" value="" placeholder="Enter Your Phone Number Without +91" pattern="[0-9]{10}"/><p></p>Email<span style="font-weight: bolder; color:red;">*</span><br /><input class="contact-form-email" id="" name="Email" required="" size="30" value="" type="email" placeholder="Enter Your Email"/><p></p>Message<span style="font-weight: bolder; color:red;">*</span><br /><textarea class="contact-form-email-message" cols="25" id="" placeholder="Enter Your Message" name="Message" required="" rows="5"></textarea> <p></p><button class="contact-form-button button contact-form-button-submit" id="" style="margin-bottom: 10px;" type="submit" value="Send">Send Message</button><p></p><div style="max-width: 222px; text-align: center; width: 100%;"></div></form><!--Form Code End Here--><!--reCaptcha Code Begin Here--><div id="g-recaptcha-error"></div><div class="g-recaptcha" data-callback="verifyCaptcha" data-sitekey="00000000000000000"></div><br /><br /><br /> <br /><br /><br /><br /><br /><br /><div id="g-recaptcha-error"></div><br /><br /><br /><script src="https://www.google.com/recaptcha/api.js"></script><script>function submitUserForm() {    var response = grecaptcha.getResponse();    if(response.length == 0) {        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">Solve below reCAPTCHA.</span>';        return false;    }    return true;}function verifyCaptcha() {    document.getElementById('g-recaptcha-error').innerHTML = '';}</script><!--reCaptcha Code Ends Here--></div></div> </div>

You Need to Make Some Changes in Code to Receive the Message, So Follow the Steps Because If you do the Little Mistake Form Will Not Work OR Somebody Else Will Receive the Message

Step 4 :- Follow the Below Step to Create A Site Key

  • Go to https://www.google.com/recaptcha and Click on Menu and Select “V3 admin Console”
  • In Label , Enter Your Domain Url Like ‘shubhamogging.com‘
  • In reCAPTCHA type, Select the reCAPTCHA v2, after that Select “I’m not a robot” Checkbox
  • In Domains, Add your Domain Like ‘shubhamogging.com‘
  • Click on Check Box & Accept the reCAPTCHA Terms of Service
  • Click on ‘Submit‘
  • Copy the Site Key
  • In the above Contact Us Form code, Find the “00000000000000000” . Change It With your Captcha Site Key.

Step 5 :- Steps to Create A ‘Thanks For Contacting Us Page‘

  • In Blogger Dashboard, Create A New Page and Title It ‘Thanks for Contacting Us’
  • Open the Page in ‘HTML View’ and Paste the Below Code
<p class="note">  Hi there! Welcome to Shubham Blogging. We have received your message and will get  back to you within 24 Hrs.</p><center><a class="button" href="telegram.me">  <svg    style="fill:#fff; margin-right:12px;"    xmlns="http://www.w3.org/2000/svg"    viewBox="0 0 32 32"  >    <g>      <path        d="M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z"      ></path>    </g>  </svg>  <span>Telegram me!</span></a><a class="button" href="Instagram.com">  <svg style="fill:#fff; margin-right:12px;" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M22,3H10a7,7,0,0,0-7,7V22a7,7,0,0,0,7,7H22a7,7,0,0,0,7-7V10A7,7,0,0,0,22,3Zm5,19a5,5,0,0,1-5,5H10a5,5,0,0,1-5-5V10a5,5,0,0,1,5-5H22a5,5,0,0,1,5,5Z'></path><path d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'></path><circle cx='23' cy='9' r='1'></circle></g></svg>  <span>Instagram me!</span></a></center>
  • Change “Shubham Blogging” With Your Site Name
  • Change “telegram.me” With Your Telegram Account/Channel
  • Change “Instagram.com” With Your Instagram Account
  • Published the Page and Copy the Page Url
  • Now Go to Contact Us Page’ Code and Find “https://yoursitelink.com/p/thanks-for-contacting-us.html” this Url & Change the Url With Your Thanks For Contacting Us Page’ Url.

Step 6 :- Steps to Add the Email & Verify the Email Link to Start Working Our Contact Us Page

  • First Go to Contact Us Page Code and Find “https://formsubmit.co/add-your-email@gmail.com” and Change the ‘add-your-email‘ With Your Email ID & Publish the Contact Us Page.

Make Sure, That You Have Follow All the Above Steps Carefully and This is the Most Important Steps to Verify your Email ID

  • Now Go to Your Contact Us Page and Fill the Form, Solve the Captcha and Click on Send Message
  • After Clicking on ‘Send Message’, You Will Receive an Email From Forms Submit to Activate the Form.
  • Click on “Activate Form” As Shown in the Below Image
How To Create Contact Us Page For Blogger - 1
How To Create Contact Us Page For Blogger – Image 1
  • Now you will see a message that your Form Activated, Now anyone can Contact you using the Contact Us Form.

Conclusion

In this post I shared you “How To Create Contact Us Page For Blogger With Google ReCaptcha [ Adsense Friendly ]“. I hope that you like my post. Please visit our site daily for more new posts. Thankyou for visiting our site.

Our All Posts Are Protected By DMCA. So Don’t Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.

Share the Post With Everyone

Leave a Reply

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