How to Create Stylish Contact Us Page (Contact Form) in Blogger For Google Adsense ? - MRNIAMSTER

Advertisement

Post Top Ad

How to Create Stylish Contact Us Page (Contact Form) in Blogger For Google Adsense ?

Share This


So If you are currently verifying your website or just heared about contact us page like me , then this on is for you of how you can create your own stlyish impressive contact us page with free code so don't hesiste no coding skills is required just ctrl +v lol !
                 before starting this let me just show you how the final will look like
How to Add Contact Us Page in Blogger



                                                      Like it ? So just follow the below steps:
Stage 1:
Most importantly, you have to include the blogger contact shape gadget on your blog. This will empower the usefulness of the contact frame. So what to do?
- Go to your Blogger Dashboard/Overview
- Select 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.

Stage 2:
To shroud default Blogger Contact Form you need to pursue these means.
- Click on the Template menu and go to the Edit HTML catch.
- Now tap on the HTML region and press ctrl+F catch on the console.
- A hunt box show up, here you type the code: ]]></b:skin> and hit Enter.
- Now simply glue the little CSS code simply over this ]]></b:skin>.
- Save your layout and you are finished. 
Code:          
             div#ContactForm1 {
               display: none !important;
               }
how to add contact us page in blogger


Stage 3: 

I have utilized some Font Awesome symbols in these custom blogger contact shape. So you should embed this template into your blog. For this, 

In the HTML territory scan for </head> tag. 

Duplicate the code beneath and glue it appropriate over the </head>. 

Tap on the Save Template catch.



Code:

  
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>


Stage 4: 

Presently at long last you can make static Contact Us page for the blogger. For doing this, we should make a reach us page on our blog. 

- Go to the Pages area and tap on the New page catch. 

- Fill up the Page Title with Contact Us/Contact and tap on the HTML tab. 

- Now duplicate the accompanying code and glue it into the HTML method 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>





Now go  Options.
Select Readers Comments 
Don’t allow, hid existing
Click on the done button.

Publish the page and you 
Congo !


No comments:

Post a Comment

Post Bottom Ad