Updates

6/recent/ticker-posts

How to Create an Official Fancy Contact us Page for Blogger



  Create a Fancy Contact Form in Blogger with the help of Blogger Official Contact Widget. This will be Blogger Official 100% working Contact us page. You will receive an email from Blogger as someone fills the Contact form.

 

 How to create Blogger Contact Form:

1. First of all you must create a Contact Widget from the Layout Section.

2. For this purpose Login to your Blogger Dashboard and go to Layout Section of Blogger Menu.

3. Now click on "Add Gadget" wherever you wanna add Contact Form.

4. Scroll and find for Contact Form, Click to add and then turn off display and save.

4. Now open Theme Section in Blogger Menu and Click on "Edit Html"

5. Find <head> there and Paste the code just above the <head> tag in theme.



  

6. Click on "Save"

7. Now go back and open Pages section in Blogger Menu and Click on New Page.

8. Now Choose Html Writing and Paste the below Style Code there. You can also change the background color by changing the Html Color Code in place of #f4f3f3. To put custom Html Color Code click Here.

   



9. Now Paste the below Contact Form Code in place of "Your text goes here..."


<---- !Code begins ---->

&#x3C;form name=&#x22;contact-form&#x22;&#x3E;&#x3C;span&#x3E;&#x3C;i class=&#x22;fa fa-pencil-square-o&#x22;&#x3E;&#x3C;/i&#x3E; Name &#x3C;/span&#x3E;&#x3C;br /&#x3E; &#x3C;input id=&#x22;ContactForm1_contact-form-name&#x22; name=&#x22;name&#x22; size=&#x22;30&#x22; type=&#x22;text&#x22; value=&#x22;&#x22; /&#x3E; &#x3C;br /&#x3E; &#x3C;br /&#x3E; &#x3C;span&#x3E;&#x3C;i class=&#x22;fa fa-envelope-o&#x22;&#x3E;&#x3C;/i&#x3E; Email Address &#x3C;span style=&#x22;color: #f56954; font-size: x-small; font-weight: bold;&#x22;&#x3E;important&#x3C;/span&#x3E;&#x3C;/span&#x3E; &#x3C;br /&#x3E; &#x3C;input id=&#x22;ContactForm1_contact-form-email&#x22; name=&#x22;email&#x22; size=&#x22;30&#x22; type=&#x22;text&#x22; value=&#x22;&#x22; /&#x3E; &#x3C;br /&#x3E; &#x3C;br /&#x3E; &#x3C;span&#x3E;&#x3C;i class=&#x22;fa fa-keyboard-o&#x22;&#x3E;&#x3C;/i&#x3E; Content &#x3C;span style=&#x22;color: #f56954; font-size: x-small; font-weight: bold;&#x22;&#x3E;important&#x3C;/span&#x3E;&#x3C;/span&#x3E;&#x3C;br /&#x3E; &#x3C;textarea cols=&#x22;25&#x22; id=&#x22;ContactForm1_contact-form-email-message&#x22; name=&#x22;email-message&#x22; rows=&#x22;5&#x22;&#x3E;&#x3C;/textarea&#x3E; &#x3C;br /&#x3E; &#x3C;input id=&#x22;ContactForm1_contact-form-submit&#x22; type=&#x22;button&#x22; value=&#x22;Send&#x22; /&#x3E; &#x3C;br /&#x3E; &#x3C;div style=&#x22;max-width: 222px; text-align: center; width: 100%;&#x22;&#x3E;&#x3C;div id=&#x22;ContactForm1_contact-form-error-message&#x22;&#x3E;&#x3C;/div&#x3E;&#x3C;div id=&#x22;ContactForm1_contact-form-success-message&#x22;&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/form&#x3E;&#x3C;br /&#x3E;&#x3C;style scoped=&#x22;&#x22; type=&#x22;text/css&#x22;&#x3E; #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:&#x27;Open Sans&#x27;,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:&#x27;Open Sans&#x27;;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%;}} &#x3C;/style&#x3E;


<---- !Code Ends Here>



10. Turn off Commenting from Options in the Right Menu.

11. Now Publish the Page. Your Fancy Contact Form is Ready to use.

 Now if anyone will fill that Contact Form you will get an email straight into you mail box.

 

 

 Watch the Video for complete Description:

  Watch Here

Post a Comment

0 Comments