HOW TO ADD CONTACT US PAGE ON YOUR BLOG
Contact Us Page on Blogspot for Biggners it always Prove That for any Blogger it is important way for Visitor in convenience manner. it is not only to improve your services it has also very easy and reliable way for the User to contact you and communicate with you live without any problem,
Blogger does not Provide this services as they just give you plate-from you have to work a bid more to make it working for your visitor.
in blog users can talk to you over the comment session but he is unable to communicate with you on private message so its better to have a Contact ME or Contact US Page in your blog.
today i'm going to Describe Easy way to add Custom Contact form page in your Blog.
You Do not need to pay anything just to bid concentrate,
HOW TO ADD Contact US page On Blogger.
- Don't Need Registration anywhere
- Send And Received unlimited Messages
- messages Come to your email address
Lets Move and Discuss what features that Contact form will have.
- User name Box
- User Email Box
- User Message Box
- Submit Button
There will be two Steps.in Step one We will add a Gedget and Step two we will work in Template .
- Adding Gedget from Blogger Gedgets Library Contact Form.
Go to LAYOUT > and in The Sidebar, Click on ADD a Gadget. wait until you see Pop-up.
GO to More Gadgets On Top (CONTACT FORM) Click on +.
- Now time To Customize Template > Edit HTML Page.
Now Click inside the Editor textarea CTRL+F
Type ( ContactForm ) hit Enter
- you see the Codes like blow down arrow to the left of
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
- Just Deleting Some Codes.
Again DO now Search inside the Editor textarea CTRL+F Find below
<b:includable id='main'>
- you will see Codes Like This,
<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>
- Remove Red Codes Inside
<b:includable id='main'> Codes Deleted from Here Every Thing </b:includable>
Again DO now Search inside the Editor textarea CTRL+F Find below
]]></b:skin>
- On Above just Past Codes
/*CUSTOM CONTACT FORM FOR BLOGGER BY updatebloginfo.blogspot.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;
}
Save Template That all .
- Now Time To Create Now Page Called CONTACT ME Page.
In the Page Editor you Need to switch to HTML MODE and Past the following 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:
<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>
Save Your Page And Its Done Just View Your Contact Page IT WILL LOOK like This.
FAQ Answer.
Question !!!! Where i will Received Message .
we are Using Blogger gadget the Emails Sent USING the FORM it will be Sent the you the email on your Email address which you are using for blogger.
0 comments:
Post a Comment