How To Create Contact Form In Website with Google Recaptcha in HTML Code ?

 

 Are you Looking For Contact form with Captcha? 


  Are you new to a blogger?  And have you been trying to add your contact form to your blogger? So congratulation on one thing. You have chosen the correct decision which is to make a blogger account. So basically you are already on the path to success. So you have just created a blogger account, created a website and blog and you finally come up with the idea of making a contact form. Am I correct?


But you are confused about how to make them. Arent you? You might have been searching on YouTube or many sites to make a perfect contact form, but still, you are not getting the results you expected regarding how to make and add a contact form on the website. Sounds like my story of the past when I was unable to do so. I know the frustration and anger within you, but my friends trust me whatever may be the case, even it is confusing or you are hopeless about creating and adding a contact page, you must think it twice and deeply by yourself. Ask yourself, by the question like, "why am I making this form?", "Is it really worth my time?". Then only you will get my point why I am telling you that contact pages are important to a website.





 Yes, my friends. Contact page plays a vital role in the progress of website and connection to our users. It helps us to link with our views if they want to contact us. But what if you get random spam and bad messages which in fact are not from real people? Internet is full of bots and who knows your site may be the victim of spam message attacks. You know that, right? If not then you must know that people are out there who think to have potential harm to our website and service by various means. Spam messaging is one of them. So you need to protect your site and yourself from spam messages as they are both time and energy-wasting factors.

So to come up with a solution you might have thought to add a Google Recaptcha box and your thinking is absolutely correct. For those who know what this google captcha is, is well you can skip this part and head to the later part of the article. But for those who are new to this term, let me give its short introduction and function. And after that,,, we will head towards the steps to take to create a full-fledged contact page written in HTML code with a fully functioning Google ReCaptcha box. So let us first know something about Goggle Recaptcha.



What Is a CAPTCHA?

The topic CAPTCHA that we are about to discuss here in this article , stands for "Completely Automated Public Turing test to tell Computers and Humans Apart." If you are now not familiar, the Turing check is a technique of checking out whether or not a laptop has such a superior synthetic brain to the factor that it is not possible to distinguish the laptop from a human. It used to be developed via well-known mathematician Alan Turing in 1950. A CAPTCHA, then, is a simple puzzle that can shortly parent out whether or not the entity working on it is a human or a computer.

Why Are CAPTCHAs Used Today?

CAPTCHAs are used somewhere that an internet site desires to forestall automatic scripts from abusing its services. For anyone with programming knowledge, it is trivial to set up automatic packages ("bots") that function duties tons quicker than human beings can. CAPTCHAs are designed to select out these computer-generated or bots requests/fake requests. Some examples of poor conduct that CAPTCHAs can stop include:
  • Creating loads of electronic mail money owed for spamming purposes
  • Buying out limited-supply goods, like live performance tickets, to later scalp them
  • Signing up for boards or the use of contact types to spam
  • Overwhelming an internet site with requests to run a denial-of-service attack
  • These and comparable conditions are the places you may generally see CAPTCHAs in place.
  • Many offerings use them each time you create a new account.

How Do CAPTCHAs Work Today?

The CAPTCHAs, like the one, featured or mentioned above, had been commonly made up of a few random, different or altered phrases, images, and numbers that you had to be input correctly to get verified as a user, not a bot. For most people, it is an incredibly honest assignment to enter these words or select pictures as asked by the captcha. However, this is hard for computers, which are now not right at recognizing pictures of text. Add in a variety of shade gradients, backgrounds, and bizarre fonts, and you have a photo this is fantastically handy for a human to decipher however challenging for a computer.
Of course, malicious customers have come up with superior methods to beat CAPTCHAs. In turn, CAPTCHAs have emerged as extra challenging to remedy over time. CAPTCHAs are handy, however, they're no longer perfect. They're stressful for human beings to solve, and can be hard or not possible to decipher for those with disabilities. Today, most of the CAPTCHAs you see online is a precise type, known as reCAPTCHA.


So I hope now you all are clear about what captchas are, arent, you? If yes, proceed to the article, and if no you can further research yourself on google. So now, I will teach you how to create a contact form written in Html code. Basically, I will be providing all the codes so, don't worry about the codes. Watch carefully the changes that I will teach you all to make in that code to create a contact form. Not only just a contact form but a contact form with google ReCaptcha.So let's get going.



Contact Form With Google Captcha(Follow Carefully)



Step 1:  Open your blogger account on which you want to create a contact form. Then go to pages. Then, go to the plus icon with the New pages option.








Step 2: You will get an interface like this. For the codes of the contact form with ReCaptcha, download the codes from here.








Step 3: After downloading the codes, copy and paste them into that new page in Html view. You should be getting an interface like this.






Step 4: Once you have got that interface, search for the highlighted text on your page as I have shown in the picture above. Just like what I have shown, copy it.







Step 5: Then put the coped text into google search. Select the first website of the search. This is done basically to link our email address with the form so that we can get mails directly to our Gmail.




                              






Step 6: You will get an interface like this. This is the homepage of the software that we click on, which was present on the 1st in the search. Then on the left-hand corner, you can see the Email link beta. Just click it.






Step 7: You will be redirected here where you must put a working, active, and valid email address. This email address will be used and will be needed in many things during edits. So, I hope you have access to this email address. Here I am just using a temp mail for demonstration only. But my friends, use the original google mail ie Gmail in this box, ok?










Step 8: After you place your email address, it will ask to verify the account. So, go to Gmail and verify the account.







Step 9: Now friends, see carefully. This step is very carefully. Remember the place that I told you to copy text and go for google search. Umm, yes. So here is the point. Just after the slah put your email address which you just a few time ago verified. Yes, my friends, the exact same email address must be kept. In the code which you have downloaded, I have indicated there by saying put your email address here. So use the same verified mail address ok, friends?
                                    






Step 10: After you have placed the mail correctly, publish the page. After you publish the page, view the page on google.








Step11: When you load the page in google by clicking in eye button of that page in the page section, you will get a view like this as shown in the above picture. However, you might be getting this red error text on your page. But don't worry we will solve this error with ease.









Step12: Again go to google and search for Google Recaptcha. Choose the second option that says sign in.






Step 12: You will get an interface like this. Fill the fields as required. Pls put the data correctly, otherwise, it might just not work. Then just click on submit.









Step 13: On submission of the data, you will be redirected to the pages as shown in the picture below. Just copy the Site key. Remember to keep the site key safe and secret. This is just a test to show you guys, so I have shown.





Step 14:After you copied the site key, head back to the page edit in Html view. Scroll down until you see the sike keyword. I have also indicated in the code. Just remove the text I have written and paste the site key that you have just copied. Click on an update. Then again view the page on google.








Step15:  When you visit your page in google, you will see that that red error is gone from there.








Step 16: Work is not completed yet, guys. To activate the form, you need to send a mail by yourself by putting all the required things in the form which are name email, and message. Complete Recaptcha and hit send. Then check your mail to an active form.







Step 17: To activate the form, go to the mail and go for form submit. then hit Active form as shown in the figure. then, your contact form will be activated, and be ready to receive messages from others.









Step 19: Now to check if the captcha works, fill all the random data by yourself and send the data without completing the captcha. You get a message right? Its urge to complete the captcha box to continue.Complete captcha and hit send.









Step 20: As you hit the sent button, you either get an error page not found or nothing. you can get a blank page or error. So for that again to the pages and create a new page. This is the page where users will be redirected after they send you the message in the contact form. So make it nice. After making it, hit publish.








Step 21: See the page in google for yourself. Copy the URL of the page and again head back to the page editing of the contact form.






Step 22; In the HTML edit View mode, search the text where I have indicated as put your thank you page here. It's at the top of the code. You can figure it out from the picture shown above too. AFTER YOU PASTED THE URL PROPERLY IN THE CORRECT PLACE, UPDATE THE PAGE. 







Step23: Again for the final time put the random data in your form by yourself and send it. Now you will be redirected to the thank you page you just created.









Step 24: If you wonder how it looks like in the mail, just go to the mail and you will see all the messages from the contact form.








Step25; Now the main step remains. That is Just copy the URL link of your CONTACT PAGE and paste it into your contact wiget setting. 








So in this way, you can make a contact form with google Recaptcha.


It was a bit long process, wasn’t it? 😀 of course, it was. However, after all these efforts we can create a good contact form. In this way, you can create the contact form in blogger. Not only in blogger, Use the same steps for WordPress and other hosting services. All the steps are the same.The only difference is the creation of pages and that last step to place the created contact page URL link to the setting of that page. I hope this article was useful to you


 If you have any queries feel free to contact me for a comment down below. Till then, Have a great day. Bye.✌✌


Post a Comment

Previous Post Next Post