Header Ads

Add Contact Form (Contact Us Page) In Blogger + Nice Design

Add Contact Form (Contact us page) Blogger

Adding Contact Form or Contact Us Page is one of the most important things you need to integrate into your blogger template, so as to facilitate or develop a direct communication tool between you and visitors or people who want to work with you, and some others wants to ask you for help or questions about your content, so this Contact Form or Contact Us Page is the link between the administrator of the site and the visitors.

SEE ALSO : Enable HTTPS On Blogger With Custom Domain FOR FREE

1- Go to your template click on Theme, and click on Edit HTML.



2- Click inside the html template code, and press CTRL+F from the keyboard to show the box search, and search for this code ]]></b:skin> then copy/paste the following CSS CODE above it, the click Save.


@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html{ background:url(https://lh3.googleusercontent.com/dL4lMe10V14ZUIXh4S6_bcYD7bKS0deGB46V8aPdvHCqQuRhUrciwLTOw9pAe7rWDeWemT89pv8jlAYRAUITnnSfmmtQxXfzhWG5_BGQ6PTDmjIxsyJ2JNO_7ArvXbWSkYTtlyIDrWJOj86F4gj1cqOdsuQw1rZ9w5PQKzjnwVTxc2OC776VbfocUWVtCzsTuLUM9hcUygMw4wzegUxBwqTPknZyoyXFvTRJJ0qavhRGs2i0B-KvbrKfoJlVeR4RyLUG5ATRfx8w0xpWbud-aubFT-TaaklkczckZY_eku16rYSdUIoHJ8kKTdYs4dYBKPII65-yUoEBYseB_UHRMS-o2_rwsTOfUUHeRxCH_W7_AmCtbIKim2cBvlORUxA0VQTieqC955S_IIu-_Ytw9-1g_47DoevMrdaAYY3CVuTt5CZIrsmkIV2GDXX3XcA8FXIrzPEMtVTetjX2lJah7efERkgyDAzf6YSTxgPIqjWYTqzZNCKgtWjfI4K9ieFg74w7Dk-P8pn8mo-UkHxhmA-Ym8u3aIK_U03YI0EEubFd3HIVdcvS-OkoANWmi1pAMN9-Pl7LbzhbDGXLxKVOtzbDsgNIarwAFSHL_Jw=w1024-h685-no) no-repeat;
background-size: cover;
height:100%;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: Droid Arabic Kufi,Roboto;
font-weight:700;
font-size: 15px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
padding-bottom: 7px;
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: Droid Arabic Kufi;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:15px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}

ADVERTISEMENT
ADVERTISEMENT


4- Now go to Pages, and click on New page.



5- Now we will add the contact us page
  1. Type Contact us on title.
  2. Select HTML.
  3. Paste the following HTML code like the picture.
  4. Click on Publish.




<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Your Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Your Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Your Message"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>

Note: You can add the HTML code everywhere you want to show this contact form, see you in the next lesson, thank you for reading.

See also :

No comments

Powered by Blogger.