Kapt Media Group

Football latest news updates like never before. Get all AFCON 2021 Highlights.

How To Create A Stylish Contact Page For Blogger


In today's tutorial, we are going to show you how to create a stylish contact page for Blogger in less than no time and without any special coding skills.

How To Create A Stylish Contact Page For Blogger
Blogger by default has a contact widget which can be added to any widget section for your visitors to get in touch. But may people will rather have a contact page where this widget will appear. Unfortunately, there is no such option to insert widget directly inside a page. But there is a way to create a customise HTML widget code and add into a page in order to create a beautify and stylish contact page.

In today's tutorial, we are going to show you how to create a stylish contact page for Blogger in less than no time and without any special coding skills.

Why use a contact page with a contact form on your site?

  • A contact form allows your prospective client to stay on your site. Just posting an email address requires the visitor to open up their email client, copy/paste or type your email address, and then write their message there. They’ve gone off your site and into their inbox, which is setting them up to get distracted and possibly even fail to get in touch at all.
  • It reduces spam. Putting an email address out on the internet is basically begging for more spam. Protecting your email address makes it harder for spammers to find you, which reduces your email burden and saves you time. It’s easy to share your email address with your new contact once they’ve filled out your form, and you’ve bypassed a bit of gunk in your spam filters in the meantime.
  • It allows you to vet new prospects. A contact form allows you to request, or even require, specific pieces of information before the form is sent. This sets up filters that are working for you before the new inquiry even comes to you. Ask about what type of work the prospect is interested in when the best time to reach them is, and what their phone number is.
  • It’s easier for the user. Contact forms can often sync up with the visitor’s browser autofill features, making it even easier and faster to fill out. It’s simple, it’s straightforward, and it’s less clunky than shifting to an email client and then coming back to your site.  And in my experience, I’ve found that many web users prefer a contact form rather than sending an email to an email address.

Features of this contact page widget

  • Designed with Pure CSS.
  • Fully Responsive.
  • Full-Width Layout - No header, no sidebar and no footer. 
  • Font Awesome Icons Integrated.
  • Sliding Texts.
  • Professional And Stylish Looking.
  • Facility to upload an avatar.
  • Able to change the background image.
  • Notifies if the message was sent or not.

Adding a stylish contact page to your Blogger blog

  • First of all, sign in to your Blogger dashboard and select the blog in question.
  • Next, head to the "layout" section and add a new Contact form gadget. You can add this at the end of the sidebar or footer section.
How To Create A Stylish Contact Page For Blogger

How To Create A Stylish Contact Page For Blogger

  • After adding the contact form gadget, head to "Theme >> Edit HTML" and then search for the following line of code
How To Create A Stylish Contact Page For Blogger


  • Next, you will need to hide the default contact widget you just added. Copy and paste the following code just before the line of code provided above.

div#ContactForm1 {
  display: none !important;

  • Save your template.
How To Create A Stylish Contact Page For Blogger

  • And the next thing you will want to do is create the contact page. Head to the "Page" tab and click on "New". Name the page "Contact Us" or "Get in touch" it all depends on you. In case you already had one, simply edit it.

<style> .twist_blogger_cntct_form_wrap {
    margin: 0 auto;
    max-width: 98%;
    padding: 0 10px;
    position: relative;
    background-color: #FDFDFD;

.twist_blogger_cntct_form_wrap:before {
    content: '';
    display: table;
    clear: both;

/*----Change Contact Form Background Color Here----*/

div#twist_blogger_cntct_form {
    padding: 20px 20px 10px 20px;
    background: #FA540B;
    border-radius: 2px;
    margin: 20px auto 20px;
    color: #FFF;
    font-size: 16px;
    max-width: 98%;

.contact-form-email-message:hover {
    padding: 5px;
    box-shadow: none!Important;
    min-width: 186px;
    max-width: 98%;
    width: 100%;
    border: 0 !important;
    line-height: 1em;
    min-height: 31px;
    background: #FCFCFC;
    margin-bottom: 15px;

/**** Submit button style ****/

.contact-form-button-submit {
    background: #FA540B;
    font-size: 20px;
    letter-spacing: 2px;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50px;
    min-width: 186px;
    max-width: 98%;
    width: 100%;
    text-transform: uppercase;
    height: 46px;
    margin-top: 10px!important;
    transition: all 300ms ease-;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;

/**** Submit button on mouse hover ****/

.contact-form-button-submit:hover {
    border: 2px solid;
    color: #FFFFFF;
    background: #EF4800 !important;

/**** Submit button on Focus ****/

.contact-form-button-submit.focus {
    border-color: #FFFFFF;
    box-shadow: none !important;

/**** Error message and Success Message ****/

.contact-form-error-message-with-border .contact-form-success-message {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 10px;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;

</style> <br />
<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Your Name
            <br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" />
            <br />
<br />
Your Email*
            <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" />
            <br />
<br />
Your Message*
            <br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea>
            <br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
            <br />
<div style="max-width: 98%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
  • Now, if you have some texts to enter before the contact widget, write it down. Then switch to the "HTML" part, copy the code from below and paste it there. Update or publish contact page and there you go.
You can then customise the colours the way you like. The contact page we use here can serve as a demo.


  1. Concours ENSAI de Ngaoundéré 2021-2022

  2. ENSAI 2021-2022 Competitive Entrance Examination

  3. Concours ESSEC de l’Université de Douala 2021-2022

  4. ESSEC Competitive entrance examination 2021-2022

  5. National Competitive Internship Examination 2021-2022

  6. National qualifying examination for medical training in Cameroon2021-2022

  7. Examen National d’Internat au Cameroun 2021-2022

  8. Examen National d’Aptitude à la Formation Médicale au Cameroun 2021-2022

  9. Examen National de Synthèse Clinique et Thérapeutique de la Formation Médicale 2021-2022

  10. Concours ENS Bertoua 2021-2022 1st and 2nd cycles
  11. Arrêté Concours ENS de Maroua 2021 1ère année du 2nd Cycle

  12. Concours ENSET Ebolowa 2021-2021 1st & 2nd cycles

  13. Arrêté ENS de Bertoua 2021-2022 1ère Année Du 1ère Cycle

  14. Arrêté Concours ENSET d’Ebolowa 2021-2022 1ère année du 2nd cycle

  15. Arrêté Concours ENSET d’Ebolowa 2021-2022 1ère année du 1er cycle

  16. Arrêté Concours ENSET 2021-2022 1ère année du 2nd cycle.

  17. HTTTC ENSET Kumba Entrance Exam 2021-2022 Year One 1st Cycle

  18. Arrêté Concours ENSET Kumba 2021 -2022 1ère année du 2nd cycle.

  19. Calendrier officiel des concours au Cameroun 2021-2022

  20. Concours NASLA de Buea 2021-2022

  21. Concours EAMAC Session 2021 -2022

  22. Arrêté ENS Bambili 2021-2022 1er année 1er cycle

  23. HTTC ENS Bambili Entrance Exam 2021-2022 year one First Cycle

  24. HTTTC ENSET Kumba Entrance Exam 2021-2022 Year One 2nd Cycle

  25. Arrêté Concours ENSET Kumba 2021-2022 1ère année du 1er cycle

  26. ARRÊTÉS Concours ENS Yaoundé 2021 1ère Année du 1ère cycle

  27. ARRÊTÉS CONCOURS ENS Yaoundé 2021 1ère Année du Second cycle

  28. Arrêté Concours ENS de Maroua 2021 1ère année du 1er Cycle

  29. Arrêté ENS de Bertoua 2021 – 1ère Année Du 2nd Cycle

  30. Concours ENIET 2021 Cameroun: Recrutement de 5600 Élèves
Adsby Google

.Net Framework,3,A-Ads,1,Ads Balance,1,Adsense,2,Adsense Alternatives,2,AGWhatsApp,1,Android 11,1,Android Apps,112,Android Roms,12,Android Tips,11,Anonymous Ads,1,Antivirus,4,Asus Firmware,2,Avast,1,Avira,1,Blogger Themes,9,Blogger Widget,6,BLOGGING,3,Blogging Tips & Guides,10,Blue WhatsApp Plus,1,Chrome Extensions,1,Comparisons,1,Computer 101,1,Corel PaintShop Pro,1,Coupons,19,CovStats,1,CyberWhatsApp,1,download,2,Downloads,194,Drivers,2,dWhatsApp,1,Facebook Tips,3,Facts,1,FIFA 2021,1,Files,1,Fix Over heating on Android,1,Free Paid Apps,61,Freebies,51,GAMES,42,GFI,1,Google,4,How to,3,How-To,86,IDM,1,InShot Pro Mod,1,InstaXtreme,1,Internet,61,iOS,18,ITEL,2,ITEL MTK,2,Jetpack Plugin,1,Language Packs,5,macOS,1,Make money Online,1,Microsoft,4,Miracle Team,11,Mobile Partner,1,MS Office,5,MTN,1,MTN Smart S730,1,Netflix,3,Norton Antivirus,1,Online Shopping,2,Online Studies,1,Operating System,2,Orange Klif,1,PBhev,3,PC Software,24,Rooting,3,S-COLOR,1,SAMSUNG,3,SD Card formatter,1,Security,2,SEO Tips,2,Skin Packs,4,Sticker Makers,1,Streaming,9,Table of Content,1,Tech News,45,TECNO,3,Telecom,1,Telegram,3,Themes,1,Tools,14,TOUCHING,1,Turbo VPN,1,Udemy Course,19,Unlocking,5,UpdraftPlus,1,Video Downloaders,1,VIVO Firmware,1,VPN,8,wha,1,WhatsApp GO,1,WhatsApp Messenger,55,WhatsApp Mod,47,WhatsApp Plus,9,WhatsApp Web,1,WhatsApp Web Dark Theme,1,WhatsGold,2,Wikoo,2,Windows 10,4,Windows 7 Activator,1,Windows 8.1,2,Windows Activator,1,Windows AIO Version,1,Windows OS,4,Wordpress Plugin,7,Wordpress Themes,1,Xiaomi Firmware,1,Yoast SEO,1,YouTube,2,
237 Solution: How To Create A Stylish Contact Page For Blogger
How To Create A Stylish Contact Page For Blogger
In today's tutorial, we are going to show you how to create a stylish contact page for Blogger in less than no time and without any special coding skills.
237 Solution
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content