How to Add Contact Us Form on Blogger Static Page Do you want to Add Contact Us Form on Blogger Static Page ? If you not know, don't worry. I will tell you How to Add Contact Us Form on ...
2018-07-31T07:44:56Z

How to Add Contact Us Form on Blogger Static Page

Do you want to Add Contact Us Form on Blogger Static Page? If you not know, don't worry. I will tell you How to Add Contact Us Form on Blogger Static Page.

Add Contact Us Form on Blogger Static Page

When you complete website design second thing come to mind is designing Contact Us page which require both dedication and care because, for many brands, it's the beginning of your relationship with potential reader, fans, follower and customers.

Add Contact Us Form on Blogger Static Page


Step 1: First, go to the Blogger Dashboard >> Layout page in Blogger and click an Add a Gadget link. From the popup, click on More Gadgets and select Contact Form and add it. By default blogger add it, it doesn't matter where it added this gadget.

Step 2: Go to your website and test it, if it is working your are good to go. If It doesn't work comment below with your website address.

Step 3: Now, go your Template >> Click on Edit HTML. Click anywhere inside of the code editor and find (press CTRL+F for PC and CMD+F on a Mac) and in the search bar type ContactForm then hit enter.
You will find the code below
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

Step 4: Click the side arrow to expand this widget and you will see below code

Contact Form expand widget code

Step 5: The most important step in this tutorial. Delete everything inside <b:includable> highlighted in green Step:4 so you should only be left with: </b:includable>
<b:includable id='main'></b:includable>

Step 6: Do a fresh search inside blogger code editor, this time find ]]></b:skin> and paste the CSS code given below just before the above code
/* CSS Code for Contact Us By HowlMeFlash */
.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: 10px;
    width: 97%;
}
.fm_message {
    padding: 10px;
}
#ContactForm1 input:focus, #ContactForm1 textarea:focus {
    border: 2px solid #43D1AF;
    color: #2F8973;
    outline: none;
    padding: 13px 13px 13px 40px;
}
.contact-form-name, .contact-form-email {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    height:40px;
    padding:10px;
    font-size:16px;
}
.contact-form-name {
    background-image: url(https://lh3.googleusercontent.com/-fjAMcJOBFMM/VhQXuDnHgqI/AAAAAAAABGo/nnUIiz9VPeU/s72/your-name.png);
    background-size: 25px 25px;
    background-position: 1% 50%;
    background-repeat: no-repeat;
    padding-left: 45px;
}
.contact-form-name:focus {
    background-image: url(https://lh3.googleusercontent.com/-fjAMcJOBFMM/VhQXuDnHgqI/AAAAAAAABGo/nnUIiz9VPeU/s72/your-name.png);
    background-size: 25px 25px;
    background-position: 1% 50%;
    background-repeat: no-repeat;
    padding-left: 45px;
}
.contact-form-email{
    background-image: url(https://lh3.googleusercontent.com/-BXewycfFZu8/VhQYwce9kII/AAAAAAAABG0/q1654zN0DpI/h120/email.png);
    background-size: 25px 25px;
    background-position: 1% 50%;
    background-repeat: no-repeat;
    padding-left: 45px;
}
.contact-form-email:focus{
    background-image: url(https://lh3.googleusercontent.com/-BXewycfFZu8/VhQYwce9kII/AAAAAAAABG0/q1654zN0DpI/h120/email.png);
    background-size: 25px 25px;
    background-position: 1% 50%;
    background-repeat: no-repeat;
    padding-left: 45px;
}
.contact-form-email-message {
    width: 100%;
    max-width: 100%;
    height: 200px;
    margin-bottom: 20px;
    padding: 13px 13px 13px 40px;
    font-size: 16px;
}
.contact-form-button-submit {
    border-color: #4EF8D0;
    background: #43d1af;
    color: #FFFFFF;
    width: 100%;
    max-width: 100%;
    height: 40px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    display: block;
    padding: 13px 0px 34px 0px !important;
}
.contact-form-button-submit:hover {
    background: #ffffff;
    color: #000000;
    border: 1px solid #A29B9B;
    cursor: pointer;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
background-image: url(https://lh3.googleusercontent.com/-BXewycfFZu8/VhQYwce9kII/AAAAAAAABG0/q1654zN0DpI/h120/email.png);
}
.contact-form-error-message-with-border {
    background: #e74c3c;
    border: 1px solid #F25A09;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    padding: 11px 15px;
}
.post-body img, .post-body .tr-caption-container {
    padding: 5px;
    vertical-align: middle;
    padding: 0;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-left: 12px;
}
.contact-form-success-message-with-border{
    background: #E9F9E5;
    border: 1px solid #98DE9F;
    padding: 11px 15px;
    font-size: 18px;
    font-weight: bold;
    color: #527F5A;
}

Step 7: Hit the Save Template. Then go to Pages to create a new static page. In the page editor, switch to HTML mode and paste 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" />
<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>

Step 8: Publish your page and view your contact form hurrah! you're done! Enjoy your Contact us page.

So this was our guide on How to Add Contact Us Form on Blogger Static Page, I hope the methods given above helped you.
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: