How To Add Contact Us Page in Blogger
Step 1 : The First of all, you can add contact us form of blogger on your website. So your blog will enabled the function. let's go to do it.
you go to your blogger admin and go to Lay Out. and click on the Add a Gadget, so you will to see Pop up 1 and find More Gargets click on it and then find Contact Form and the final Click on plus button, Now you add blogger contact form Successfully on your website.And then you're to hide contact form of blogger and create new contact form style in a static contact page on your blogger.
Step 2 : To hide Blogger Contact form from your blog and can follow this step:
The firs go to Template and choose Edit HTML button. now you see new tap on the HTML and click on HTML area and then Press Ctrl+F on your keyboard, you will to see search Box. And then Copy This Code ]]></b:skin> past in Search Box and hit Enter. The next you just copy this code:
display: none !important;
}
past above this code ]]></b:skin> and the final click button Save and you are done. You can refresh your blog and you will see the contact form on blogger wiget is hide.
Step 3: I have the best font icon in my contact form for my website. So you can insert this Stylesheet to you blogger
The first Go to Theme and choose HTML and then you will see HTML area pres Ctrl+F on your keyboard and Past this code </head> to Search box. The next you copy Stylesheed code to past right above This code </head>
Step 4 : Now this step is the final, you go to Page Manu and click new page button. The tittle is Contact or Contact Us and then click on HTML tap, Copy This 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>
Past in HTML area. and you see Option choose Don't allow hide existing compose mode and click Done. the final click button Publish and you can test it, you will see contact us form on your website.
yes this is how to create Contact page in Blogger for your website. Thanks For go to my website, If you have a problem you can Comment and you can share to your friend.
No comments:
Post a Comment