How to Create a Cool Contact Form Page on Blogspot

Installing Contact Forms on Static Pages - Okay, here I am not going to discuss the functions and reasons for the Contact Form widget regarding roles on blogs, but here I will share tips on how to install contact forms. on the blogger statistics page, see.


First you have entered the Contact preparation widget on the blog.


You have first entered the contact form widget on the blog.

Put this right above the code </head>

<link href='//unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css' rel='stylesheet'/>

Next, please open the template > Edit Template > Apply the code below before  </style> or ]]></b:skin>

.service_content{padding:20px}}
#blog-pager,#comments,.sidebar-widget-area,.comments-line,.comments-line-c{display:none}
.input-form{margin:10px 0}.input-form textarea{font-size:.9rem;font-family:'Montserrat';color:#444;line-height:1.5}#payment_confirm input,#payment_confirm select,.input-form input,.input-form select,.input-form textarea{background:#fff;border:1px solid #cad1d7;font-size:.9rem;padding:12px 15px 12px 45px;border-radius:.3rem;outline:none;width:100%;box-sizing:border-box}.detail-pemesanan a.button{font-size:.8rem;margin:10px 0 10px 10px}.detail-pemesanan .left a.button{margin:10px 0}.detail-pemesanan .text-gagal{display:none;text-align:center}.pemesanan.gagal #payment_confirm input,.pemesanan.gagal #payment_confirm select{border-color:#f80031}.pemesanan.aktif #payment_confirm input,.pemesanan.aktif #payment_confirm select{border-color:#1aae6f}.theme-grid,.input-form{position:relative}.input-form i.icon,.theme-grid i.icon{position:absolute;font-size:1.4rem;margin:5px;left:10px;color:#777}
#about-page,#contact-page,#box-page{z-index:1;position:relative;background:#fff;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);padding:40px;margin:30px 0 0;box-sizing:border-box;border-radius:.5rem;color:#444;text-align:center}.profile-image{position:relative;height:100px}#content .profile-image img{border-radius:100%;width:180px;height:180px;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);-webkit-transform:translateY(-100px);transform:translateY(-100px)}.about-info h2 b,.about-info h3{font-weight:500}.about-info h2{font-weight:400}.about-desc{padding:50px 0;margin:50px 0 0;box-sizing:border-box;line-height:1.7;border-top:1px solid #ddd}
#contact-page{text-align:left}input.button{border:0;padding: 10px 30px;font-family: 'Montserrat';margin: 20px 0 0;cursor: pointer;font-size: 15px;text-transform:uppercase;background: #1370e8;box-shadow: 0 4px 6pxrgba(50,50,93,.11),0 1px 3pxrgba(0,0,0,.08);color:#f0efef;font-weight: 700;}
.mini-wrap{width:700px;max-width:100%;box-sizing:border-box;margin:0 auto;position:relative}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{background:#444;color:#fff;float:right;margin:20px 0;padding:8px 15px;border-radius:.5rem;display:none}#ContactForm1_contact-form-error-message.contact-form-error-message-with-border,#ContactForm1_contact-form-success-message.contact-form-success-message-with-border{display:inline-block}#ContactForm1_contact-form-error-message{background:#c71111}#ContactForm1_contact-form-success-message{background:#11c749}#ContactForm1_contact-form-error-message img,#ContactForm1_contact-form-success-message img{width:auto}
.main-vagin{width:100%;margin:0 auto;float:none;word-wrap:break-word;overflow:hidden}
.sidebar-wrapper{display:none}
@media screen and (max-width:800px){.main-vagin{float:none;width:100%;margin:0 auto}

If you want Code: css to work on Static Pages only, you can order this css code, placing it directly above the code</head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.service_content{padding:20px}}
#blog-pager,#comments,.sidebar-widget-area,.comments-line,.comments-line-c{display:none}
.input-form{margin:10px 0}.input-form textarea{font-size:.9rem;font-family:'Montserrat';color:#444;line-height:1.5}#payment_confirm input,#payment_confirm select,.input-form input,.input-form select,.input-form textarea{background:#fff;border:1px solid #cad1d7;font-size:.9rem;padding:12px 15px 12px 45px;border-radius:.3rem;outline:none;width:100%;box-sizing:border-box}.detail-pemesanan a.button{font-size:.8rem;margin:10px 0 10px 10px}.detail-pemesanan .left a.button{margin:10px 0}.detail-pemesanan .text-gagal{display:none;text-align:center}.pemesanan.gagal #payment_confirm input,.pemesanan.gagal #payment_confirm select{border-color:#f80031}.pemesanan.aktif #payment_confirm input,.pemesanan.aktif #payment_confirm select{border-color:#1aae6f}.theme-grid,.input-form{position:relative}.input-form i.icon,.theme-grid i.icon{position:absolute;font-size:1.4rem;margin:5px;left:10px;color:#777}
#about-page,#contact-page,#box-page{z-index:1;position:relative;background:#fff;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);padding:40px;margin:30px 0 0;box-sizing:border-box;border-radius:.5rem;color:#444;text-align:center}.profile-image{position:relative;height:100px}#content .profile-image img{border-radius:100%;width:180px;height:180px;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);-webkit-transform:translateY(-100px);transform:translateY(-100px)}.about-info h2 b,.about-info h3{font-weight:500}.about-info h2{font-weight:400}.about-desc{padding:50px 0;margin:50px 0 0;box-sizing:border-box;line-height:1.7;border-top:1px solid #ddd}
#contact-page{text-align:left}input.button{border:0;padding: 10px 30px;font-family: 'Montserrat';margin: 20px 0 0;cursor: pointer;font-size: 15px;text-transform:uppercase;background: #1370e8;box-shadow: 0 4px 6pxrgba(50,50,93,.11),0 1px 3pxrgba(0,0,0,.08);color:#f0efef;font-weight: 700;}
.mini-wrap{width:700px;max-width:100%;box-sizing:border-box;margin:0 auto;position:relative}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{background:#444;color:#fff;float:right;margin:20px 0;padding:8px 15px;border-radius:.5rem;display:none}#ContactForm1_contact-form-error-message.contact-form-error-message-with-border,#ContactForm1_contact-form-success-message.contact-form-success-message-with-border{display:inline-block}#ContactForm1_contact-form-error-message{background:#c71111}#ContactForm1_contact-form-success-message{background:#11c749}#ContactForm1_contact-form-error-message img,#ContactForm1_contact-form-success-message img{width:auto}
.main-vagin{width:100%;margin:0 auto;float:none;word-wrap:break-word;overflow:hidden}
.sidebar-wrapper{display:none}
@media screen and (max-width:800px){.main-vagin{float:none;width:100%;margin:0 auto}
</style>
<link href='https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css' rel='stylesheet'/>
</b:if>

Then create a new static page and apply the code below to the HTML tab

<div id='contact-page'>
<div class='mini-wrap'>
Please select a contact below to contact the NQnia admin. If there are no obstacles and other busyness, the admin will immediately respond to the message you sent.
<br/><br/>
<b>Whatsapp</b>: 92 300 0762460<br/>
<b>Email</b>: shammalik098@gmail.com<br/>
<br/>
<form name="contact-form">
<div class="input-form">
<i class='icon ion-ios-contact'></i>
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" placeholder="Name" type="text" value="" />
</div>
<div class="input-form">
<i class='icon ion-ios-mail'></i>
<input class="validate" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" required="" type="email" value="" />
</div>
<div class="input-form">
<i class='icon ion-ios-chatboxes'></i>
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Your Message" required="" rows="5"></textarea>
</div>
<input class="button wajib" id="ContactForm1_contact-form-submit" type="button" value="Send"/>
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</form>
</div>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1043534872206554421';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x1043534872206554421','//nqnia.blogspot.com/','1043534872206554421');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1043534872206554421', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
<div class='clr'></div>

Important: The blogger id code that I marked, replace it with your blogger id code

And Publish and see the results.