The long wait is finally over and blogger has come up with it’s own contact form. Now you no longer have to rely on 3rd party Contact form solutions. Blogger has added a new Contact Form Widget which will fit into your Blog’s sidebar.
Adding a contact form to Blogger is now really easy. Below steps will guide you in adding the contact form as a sidebar widget.
Why should I add the new Blogger Contact form
Visitors can easily drop a message to you straight from your blog. You don’t have to reveal your email address to the web to provide users with an option to contact you.If you like getting suggestions, queries or any other feedback from the users, make sure that you add the contact form to your blog. It’s really easy to add the form and doesn’t require any 3rd party code to be added to your blog.
How to add the contact form to Blogger
Login to your Blogger Dashboard and Navigate to the Layout Page
Click on the Add a Gadget Link and select More from the left Menu. You can add the add the brand new contact form the right side list
You can set an appropriate title for the Gadget and Save it.
Once it’s done, you should see the slick and clean Contact Form added to your Blog’s sidebar.The contact form has the below input fields
Name – Name of the reader who is sending you a message
Email – Email address of the reader who is sending you a message
Message – The message which the reader wants to send to you.
Below is the screenshot of the Contact Form Widget added to one of my test blogs.
The Contact form has validations in place and Error messages will be displayed in case the user misses out the email address or message. Thought the form doesn’t have any captcha validation,it is less likely to be attacked by spam bots as the send button is triggered by JavaScript.
When the reader sends you a message via the contact form, you will receive it straight in your inbox. Copies of this message will be sent to each Admin user of the Blog. Below screenshot will give you an idea of how the message will look like.
You can directly reply back to your reader from you email. If you want to move the Contact Form to a separate page, then checkout the tutorial on creating a separate contact page for blogger.
Styling Contact Form
As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:
To add this style, go to Template > Edit HTML, click on the sideways arrow next to... and paste the code just above ]]> (press CTRL + F to find it):
Adding a contact form to Blogger is now really easy. Below steps will guide you in adding the contact form as a sidebar widget.
Why should I add the new Blogger Contact form
Visitors can easily drop a message to you straight from your blog. You don’t have to reveal your email address to the web to provide users with an option to contact you.If you like getting suggestions, queries or any other feedback from the users, make sure that you add the contact form to your blog. It’s really easy to add the form and doesn’t require any 3rd party code to be added to your blog.
How to add the contact form to Blogger
Login to your Blogger Dashboard and Navigate to the Layout Page
Click on the Add a Gadget Link and select More from the left Menu. You can add the add the brand new contact form the right side list
You can set an appropriate title for the Gadget and Save it.
Once it’s done, you should see the slick and clean Contact Form added to your Blog’s sidebar.The contact form has the below input fields
Name – Name of the reader who is sending you a message
Email – Email address of the reader who is sending you a message
Message – The message which the reader wants to send to you.
Below is the screenshot of the Contact Form Widget added to one of my test blogs.
The Contact form has validations in place and Error messages will be displayed in case the user misses out the email address or message. Thought the form doesn’t have any captcha validation,it is less likely to be attacked by spam bots as the send button is triggered by JavaScript.
When the reader sends you a message via the contact form, you will receive it straight in your inbox. Copies of this message will be sent to each Admin user of the Blog. Below screenshot will give you an idea of how the message will look like.
You can directly reply back to your reader from you email. If you want to move the Contact Form to a separate page, then checkout the tutorial on creating a separate contact page for blogger.
Styling Contact Form
As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:
/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
This is how it will look like after applying the style:
To add this style, go to Template > Edit HTML, click on the sideways arrow next to
Comments
Post a Comment