Now a days, every Blogger must have contact form. Without contact form visitors will unable to contact with the blogger owner. This will create lack of cooperation between Blogger owner and visitors.
Q.What are the advantages of adding contact form in Blogger?
A. Adding contact form in Blogger is that it removes the gap between the Blog owner and visitors and bridges the gap between them. Below are the advantages of adding contact form.
- If someone wants to ask some question in privately, his question can be answered privately.
- If Blog owner has published or uploaded any copy right content, then the copyright owner will directly contact the Blog owner and request him to remove particular content. By this way blog will be safe from legal action being taken by copyright owner , as he can contact the Blog owner to remove the content.
- Suppose if someone needs some help regarding script / codes in privately without disclosing it to public, then this method will work at its best.
Step 1
After opening blog menu. Click on Layout, after that click on Add a gadget option specified with + sign this will open new window. Just on the left side click on More Gadgets option. There you will see contact form. Just on right side you will see + sign. Just press it and save it.
Step 2
This step is very critical so my advice will be to backup your template before proceeding further.
Now, lets proceed.
Click on template option, after that Edit HTML option. This will open your template HTML and CSS editor for the blog.
Now click on anywhere in the textbox then press CTRL+F on your keyboard for seaching.
On the search box look for this code :
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' version='1' visible='true'>
OR
Easy step will be to click on on jump to widget option and from drop menu select ContactForm1.
There you will find similar to this code :
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' version='1' visible='true'>
Just below above code you will find :
<b:includable id='main'>...</b:includable>
Click on ... to open.
After opening you will find 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>
Just delete the code mentioned in Green color.
Step 3
]]></b:skin>
Paste the below code above ]]></b:skin> :
.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 {
background: #555555;
color: #ffffff;
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
border-color: #000000;
background: #555555;
color: #ffffff;
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #000000;
background: #0080ff;
color: #fff;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #0080ff;
color: #ffffff;
border: 1px solid #000000;
Save the template. Critical part is over.
Step 4
Now go to blog menu and click on Pages. After that create a page named Contact or Contact Us and click on HTML option to open HTML editor and paste the following code mentioned below :
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name* :
<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* :
<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* :
<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" />
<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>
Finally click on publish. You are done. Enjoy!!!!
Now you can use contact form in Blogger. If you want to disable comment in contact page then disable it.
NOTE : Color of the form and submit button is set to my blog button, you can change it to your desired color just change the CSS #value to your desired one.
I hope this solved your problem.
You Like This Topic Then Share It With Your Friends
