Advanced Contact us Page for Blogger
In this video we will discuss about How to Create a Fully Responsive Advanced Contact us Page for Blogger.
Code 1
Paste this Code Just Above the <head> Tag
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Code 2
Go to Page Section in Blogger and Click on New page after that click on HTML View and Paste that Code.
<div style="background-color: #444; color: #fff; padding: 10px;"> <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> </div>
Note- For Installation Must Watch Whole Video Given Below. It Helps You a Lot.
If You are New on our Channel Like, Share, Comment on our Video. Subscribe to our Channel and Do not Forget to Hit the Bell Icon.
Telegram ➤ https://t.me/flippedtech
Website ➤ https://bit.ly/3atUzmW
Instagram ➤ https://www.instagram.com/flippedtech/
---------------------------------------------------------------------------------------------------------------
Gears I Used
My Mobile (Link 1) ➤ https://amzn.to/3hhAkfc
My Mic ➤ https://amzn.to/30weOxl
My Laptop ➤ https://amzn.to/2XPOsEM
Link 2 ➤ https://amzn.to/325IJf4
Link 2 ➤ https://bit.ly/3cUlRlM
My Mouse ➤ https://amzn.to/3iQWrsC
---------------------------------------------------------------------------------------------------------------
Click Subscribe Button For More Videos:-
➤ https://bit.ly/320AuAQ
Check Out our More Videos:-
➤ https://bit.ly/3kV78MH
Please Like, Comment, Share and Subscribe THANK YOU!
AskQuestion #flippedtech
All Tags Used In Video
Sarthak Jain
Hello Friends! Welcome To My Flipped Tech Blog, This is one of the best Blogs for free Tips and Tricks tutorials about Android, iOS Apple, YouTube, Facebook, Whatsapp, Blogger, SEO Tips and much more. Which can be very very helpful for your daily life. Share My Videos, Like My Videos, Comment On My Videos, S-U-B-S-C-R-I-B-E this channel and stay tuned in this blog for further updates.
No comments: