How to Add Contact Us Page(Contact Form) in Blogger?
 | |
|
Step 1:
Above all else, you have to include the blogger's contact structure gadget on your blog. This will empower the usefulness of the contact structure. So what to do?
- Go to your Blogger Dashboard/Overview.
- Select the Layout segment from the menu.
- Click on the Add a Gadget on Sidebar.
- A popup will indicate and tap on More Gadgets.
- Click on the Blue Plus Button on the Contact Form Gadget and afterward Save it.
Presently you have effectively included the Blogger Contact Form Widget on your blog. The following thing is to shroud this default blogger's contact gadget and reach structure in a static Contact Us page.
Step 2:
 |
| Contact us page for blogger, contact us page html, contact us page generator for free |
- To shroud default Blogger Contact Form you need to follow these steps.
- Click on the Template menu and go to the Edit HTML catch.
- Now tap on the HTML zone and press ctrl+F catch on the console.
- An search box show up, here you type the code: ]]></b:skin> and hit Enter.
- Now simply paste the little CSS code simply over this ]]></b:skin>.
- Save your format and you are finished.
- Reload your blog and you will see the default contact gadget vanishes.
 | |
|
- In the HTML region search for </head> tag.
- copy the code given below and paste it directly over the </head>.
- Click on the Save Template catch and you are done.
Code:
<link
href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet"/>
 |
| Contact us page for blogger, contact us page html, contact us page generator for free |
Stage 4:
Presently at long last, you can make static Contact Us page for the blogger. For doing this, we should make a get in touch with us page on our blog.
- Go to the Page segment and click on the New page button.
- Fill up the Page Title with Contact Us/Contact and click on the HTML tab.
- Now duplicate the accompanying code and paste it into the HTML mode of the page.
Code:
<form name="contact-form"><span><i
class="fa fa-pencil-square-o"></i> Name </span><br
/> <input id="ContactForm1_contact-form-name"
name="name" size="30" type="text"
value="" /> <br /> <br /> <span><i
class="fa fa-envelope-o"></i> Email Address <span
style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<br /> <input id="ContactForm1_contact-form-email"
name="email" size="30" type="text"
value="" /> <br /> <br /> <span><i
class="fa fa-keyboard-o"></i> Content <span
style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br
/> <textarea cols="25"
id="ContactForm1_contact-form-email-message"
name="email-message" rows="5"></textarea> <br
/> <input id="ContactForm1_contact-form-submit"
type="button" value="Send" /> <br /> <div
style="max-width: 222px; text-align: center; width: 100%;"><div
id="ContactForm1_contact-form-error-message"></div><div
id="ContactForm1_contact-form-success-message"></div></div></form><br
/><style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px
solid
#ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all
0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px
0;padding:10px;background:#fafafa;color:#444;font-family:'Open
Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s
ease-out;} #ContactForm1_contact-form-name:focus,
#ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0
0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open
Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px
18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all
.8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border
{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message
{background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen
and (max-width:640px){ #ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
 |
| Contact us page for blogger, contact us page html, contact us page generator for free |
Now go to the Options. Select Readers Comments Don't permit, concealed existing. Click on the done button. Publish the page and you will see this sort of contact structure on your blog.
This is the way to Add Contact Us Page in Blogger on your blog. For my situation, these structures are working fine. On the off chance that your one isn't working appropriately, at that point please tell me through the remark. If this is helpful for you, then please don’t forget to share this with your friend.
No comments:
Post a Comment