In this tutorial, we will learn how you can add a contact form to your blogger website easy to copy my code and paste it or generate the code on this link.
In every website, the contact form is the only way helps to visitors send messages and what they need and attach messages directly from your website.
Read also:
How to create python program to fetch and display the data from sql server database
Python Flask tutorial Setting up a Flask and SQL Database Connection
How to create a python flask with mysql database
Python Flask Student List CRUD System Using MySQL Database for Beginners
This contact form is not for only the contact us page you also like to use services pages, interest bloggers users to connect your account for writing services, use for Marketing services, etc. and so, users can contact you directly without typing the email id on the android email app or email websites.
Easy steps to add a contact form in blogger:
- First, sign in to the blogger and go to your blogger dashboard and create a new page.
- It's in the compose view and just switch to the HTML view.
- Now you need to copy the below code and Just paste it and you need to change it with your own email address.
- On the right side, you will see the preview or save button and publish the page.
- And all done. Just send a test message to your new contact form and check it properly work correctly.
- Just help of the HTML input placeholder to enter the Name, Email Address, and body Message and click the send button.
- And finally, you need to add the page link on the homepage menu and the footer menu named contact us for the visitor's clear understanding.
Html Code:
<div>Reply within 48hours from</div><br />
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="container">
<form id="contact" method="post" name="contact-form">
<fieldset>
<input autofocus="" name="name" size="30" type="text" value=""placeholder="Name" />
</fieldset>
<fieldset>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email"/>
</fieldset>
<fieldset>
<textarea id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5" style="height: 250px;"></textarea>
</fieldset>
<fieldset>
<a class="contact-form-button contact-form-button-submit" href="" id="ContactForm1_contact-form-submit" style="background-color: #4caf50; color: white; font-family: sans-serif; font-size: 16px;font-weight:700; height: 40px; text-align: center;text-decoration:none;" type="button" value="Submit">Send Mail</a><br><br>
<input type="reset" class="contact-form-button-submit" value="Reset" style="border-radius:25px;font-size:16px;font-weight:700;height:40px;"/>
</fieldset>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
CSS:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
text-rendering: optimizeLegibility;
float:none;
margin-top:0px;
}
.contact-form-button{
border-radius:25px;
}
#contact input[type="text"],
#contact input[type="email"],
#contact textarea,
{
font: 500 12px/16px "Roboto", Helvetica, Arial, sans-serif;
float:none;
}
.contact-form-button.contact-form-button-submit:hover
{
background-color:#43A047 !important;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
float:none;
margin-top:0px;
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #333;
}
:-moz-placeholder {
color: #333;
}
::-moz-placeholder {
color: #333;
}
:-ms-input-placeholder {
color: #333;
}
</style>
Advantages of adding a contact form in blogger:
Easy to contact and send you direct mail without typing the email id
A disadvantage of adding a contact form in blogger:
A disadvantage of the add contact form is the default contact form widget is already set and the developer creates the template with contact-form-submit it is sending emails with the default login blogger email id and if you add "href:mailto" alternative mail id and it is not sending mail to the inbox. So, we need to change that form with a third-party form service like Google Forms, or JotForm that you can use on your Blogger website.
I hope you will add the contact form to your blogger website successfully and learn something from my website hope you will add the new contact form Thankyou.