How to create contact us page in blogger

First of all, you need to add the blogger contact form widget on your blog. This will enable the functionality of the contact form. So what to do?

Step 1 :

Ø  Go to your Blogger Dashboard.
Ø  Select Layout section from the menu.
Ø  Click on the Add a Gadget on Sidebar.
Ø  A popup will show & click on More Gadgets.
Ø  Click on the Blue Plus Button on the Contact Form Gadget and then Save it.


Step 2 :

To hide default Blogger Contact Form you have to follow these steps.
Ø  Click on the Template menu and go to the Edit HTML button.
Ø  Now tap on the HTML area and press ctrl+F button on the keyboard.
Ø  Search box appear, here you type the code: ]]></b:skin> and press Enter.
Ø  Now just paste the small CSS code just above this ]]></b:skin>.
Ø  Save your template and you are done.

Code:          
             div#ContactForm1 {
  1.                display: none !important;
               display: none !important;
               }

Step 3:

I have used some Font Awesome icons in these custom blogger contact form. So you will have to insert this stylesheet into your blog. For this,
In the HTML area search for </head> tag.
Copy the code below and paste it right above the </head>.
Click on the Save Template button.

Step 4:

Now finally you can create static Contact Us page for the blogger. For doing this, we must create a contact us page on our blog.
Ø  Go to the Pages section and click on the New page button.
Ø  Fill up the Page Title with Contact Us/Contact and click on the HTML tab.
Ø  Now copy the following 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>


Newest
Previous
Next Post »