Adding a contact page in our blog gives readers the opportunity to communicate, reach and get in touch with you directly. This shows how concern and willing you're to help your readers because every good blogger aims to build a lasting relationship with his/her readers, visitors, clients, and staff. For some of us who would not like to share our email address on our blog, I will recommend you to add a contact page to your blog.
By default, Blogger has this contact form widget but adding it into a static page might seem difficult to hear so on this post I will show you on how to add a contact form to a static page in blogger with ease!
[*] Contact page is one most important page a blogger is supposed to have on his/her blog thus, making your blog reader get in touch with you directly.
[*] Whenever a message is sent using this contact form it goes directly to the email address associated with your account.
[*] This gives your blog a professional look thus, building a lasting relationship with your readers.
Cons:
[*] Like I said earlier "Whenever a message is sent using this contact form it goes directly to the email address associated with your account". So if your blog has more than one administrator it would be sent to them all.
Step 2: Select Layout Tab.
Step 3: After Selecting, Layout Tab will Open >> Click on "Add a Gadget".
Step 4: Now a New Window will Open. Select "More Gadgets" and add Contact Form Gadget.
Step 5: After adding, drag and drop the Contact Form gadget below Blog post in the Page body of your Layout, Then, click on Save Arrangement button.
Step 5: Now Go back to Blogger Dashboard >> "Theme" >> click on the "Edit HTML" button.
Step 6: Click anywhere inside the HTML code area and press the CTRL + F keys to open the Blogger search box.
... type or paste the following tag into the search box and hit Enter to find it:
Step 7: Under it, you will see a code like this:
Delete all code in red so that you would be left with:
Step 8: Again type or paste the following tag into the search box and hit Enter to find it:
Step 9: Copy the code below and just above ]]></b:skin> paste the code.
Step 10: Save Template then go to Pages and create a contact page that is if you don't have any already. In the page editor, switch to HTML mode and paste the following code.
After pasting, Save your page and preview your new contact form. It should look like this:
By default, Blogger has this contact form widget but adding it into a static page might seem difficult to hear so on this post I will show you on how to add a contact form to a static page in blogger with ease!
The Pros and Cons on How To Add Contact Form to Static Page in Blogger
Pros:[*] Contact page is one most important page a blogger is supposed to have on his/her blog thus, making your blog reader get in touch with you directly.
[*] Whenever a message is sent using this contact form it goes directly to the email address associated with your account.
[*] This gives your blog a professional look thus, building a lasting relationship with your readers.
Cons:
[*] Like I said earlier "Whenever a message is sent using this contact form it goes directly to the email address associated with your account". So if your blog has more than one administrator it would be sent to them all.
Steps on How To Add Contact Form to Static Page in Blogger
Step 1: Go to Blogger Account >> Blogger Dashboard.Step 2: Select Layout Tab.
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='Contact Form'>
Step 7: Under it, you will see a code like this:
Code:
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
Delete all code in red so that you would be left with:
Code:
<b:includable id='main'></b:includable>
Step 8: Again type or paste the following tag into the search box and hit Enter to find it:
]]></b:skin>
Step 9: Copy the code below and just above ]]></b:skin> paste the code.
Code:
/*CUSTOM CONTACT FORM BY ROMSHILLZZBLOG.COM*/
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}
Code:
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name: <span style="color: red; font-weight: bolder;">*</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address: <span style="color: red; font-weight: bolder;">*</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="fm_message">
Message: <span style="color: red; font-weight: bolder;">*</span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<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>
</div>
</form>
</div>
</div>
</div>
<div style="text-align: center;">
All fields marked with <span style="color: red; font-weight: bolder;">*</span> are required.</div>
After pasting, Save your page and preview your new contact form. It should look like this:
N.B: Whenever a message is sent using this contact form it goes directly to the email address associated with your account. So if your blog has more than one administrator it would be sent to them all. You can change this email address in the Admin settings of your blog. Thanks, Hope this works!