How to Make Contact Us on the Blog

Contact Us has another name that is often mentioned by bloggers, some call it a contact form, contact us and some even call it a suggestion box. Whatever it's called, this page or widget is very important so that visitors can contact the blog owner.

The Contact Us page is one of the pages that must exist on a blog or web. Having a contact us will make it easier for visitors to contact us as blog owners, visitors may want to invite cooperation or just want to ask questions.

Advantages of Making Contact Us on the Blog

There will always be new bloggers appearing every day, because many people like to write and share inspiration through blogs. Well, of course there are novice bloggers who don't care about creating a contact page on their blog.

Here are the reasons why you should create a contact us on the blog:

Practical and Safe

Compared to providing contact information in the form of a cell phone number, social media account or email address directly, I think it's safer to use the contact form. Safer and more practical because bloggers themselves have provided a contact form widget feature.

More Professional

As we know communication via email in work matters will be more professional. So contact us too, messages sent by visitors will go to your blogger account email.

Easy to accept and receive Advertising Services

As bloggers, we definitely think about getting income from the blogs that have been created. In my experience, posting a contact page will make it easier for us to get offers of advertising or other cooperation. And you need to know that the contact us page can make it easier to submit when our blog is registered with Google Adsense.

How to Make Cool Contact Us on the Blog

The method is very easy, just like you make an article post. It doesn't take long, less than 1 minute, it's definitely done. It's just that, you have to have a ready-made contact form script.

It's lucky that you visited this page, because I have prepared the html and css scripts.

Without waiting long, just follow the steps on how to create a contact us html css on the following blogger.

Go to the Blogger Dashboard page.

Create a new page and title it Contact Us.

Copy all the code below.

 
<form name="contact-form">Nama <br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
Email <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
Isi Pesan <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  <br />
<div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1215376661229040519';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1215376661229040519','//www.bungfrangki.com/','1215376661229040519');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1215376661229040519', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script><br />
<style scoped="" type="text/css">
#comments {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;resize:none;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#3182d9;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#3a3a3a;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

Replace some of the code below with your blog:

1215376661229040519: ID Blog
www.bungfrangki.com: Your blog address without http/https

Then paste it in the HTML View, if there are no errors, just click Publish.

The Contact US display that you created is the same as in the following image.

Selesai.

Also Read : 10 Tips and Tricks for Improving SEO

Website to Create a Contact Form on Blogger

If you want to create a contact form on your blog with an unusual appearance, you can use the website, which provides tools for creating contact forms.

With this tool you can easily create a contact form on Blogger without having to bother editing CSS, Java script and HTML scripts.

Here are some sites for creating cool blog contact forms:

foxyform.com
123contactform.com
contactform7.com
kontactr.com
wufoo.com
visitorcontact.com

You can search for how to make it on the website you choose, there must be a guide!

How to Create a Contact Form Widget on a Blog

Apart from creating contact us pages, we can also create widgets or gadgets on Blogger. You already know that Blogger provides important widget features, including the contact form widget.

Here are the steps on how to add a contact form widget in blogger:

Select the Layout menu.