Create a TAB Page for Contact
1-Go to PAGE and create a page called Contact
2-Open the PAGE from the HTML part and Copy/paste the PART 1 code (replacing
the current content) then save it
3-Click the BLOGGER Top right word to go back to the DASHBOARD
4-Go to THEME > Customized >Advanced > Add CSS then copy/paste
the Part 2 there and click APPLY TO BLOG
5-If you want to change the picture: >Make your picture size 1400x425
>Open another page and add the picture there then just copy the URL of the
picture and replace it from the code of the first part. Be aware that must be
replaced in two places.
PART 1 - Copy/Paste this to your Contact Page
========================================================================
<div dir="ltr" style="text-align: left;"
trbidi="on">
<div class="separator" style="clear: both; text-align:
center;">
</div>
<div class="separator" style="clear: both; text-align:
center;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsB8TQKdTVCUrmbXz7SjnCG77YHgJGoeHnaCXIFt6T72NeSLWWNiOxFupRuFTmXJgsyBkFYEdFai0_tQuKWa7PUcsyhxDWgTEL5qtwd1DcmqP3RvKMr4dNXhwqlwLEZPOrsTdcJlOSk9LG/s1600/banner+1400x425.png"
imageanchor="1" style="margin-left: 1em; margin-right:
1em;"><img border="0" height="194"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsB8TQKdTVCUrmbXz7SjnCG77YHgJGoeHnaCXIFt6T72NeSLWWNiOxFupRuFTmXJgsyBkFYEdFai0_tQuKWa7PUcsyhxDWgTEL5qtwd1DcmqP3RvKMr4dNXhwqlwLEZPOrsTdcJlOSk9LG/s1600/banner+1400x425.png"
width="640" /></a></div>
<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" />
<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>
PART 2 Go to the CSS portion and add the following code:
=====================================================================
/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.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;
}