How to Add a Contact Form Page in Blogger?
Blogger Tips
If you are using a custom theme on your blog, you must first remove the CSS code of the contact form from your blog theme, which you can remove using the Blog Edit Theme option.
Once you have removed the existing contact form CSS code from your blog, you can add a beautiful contact form page to your blog by following these steps.
What Is the Contact Form Page?
A contact form page is a web page that is used to allow website visitors to contact the site owner or those responsible for maintaining it.
How to Add Contact Form Page in Blogger Blog?
The first step is to add the contact form CSS code to the blog theme, And this CSS code describes how the design elements of the contact form page should appear on the screen.
Go to the Blogger Dashboard > Themes menu > and then click the Edit HTML.
Add the contact form CSS code below before the </head>.
<style type="text/css">
/* Asif Kamboh - www.asifkamboh.com */
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Google Sans';border-radius:99em;text-indent:10px;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f7f9f8;color:#222;border:1px solid rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all .6s}
#ContactForm1_contact-form-email-message{font-family:'Google Sans';border-radius:22px;width:100%;height:250px;margin:10px auto;padding:20px;background:#f7f9f8;color:#222;border:1px solid rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all .6s}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:transparent;box-shadow:inset 0 0 0 0.125rem #f7f9f8}
#ContactForm1_contact-form-submit{background:#4285F4;outline:none;color:#fff;font-size:14px;width:161px;height:42px;float:left;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:22px;transition:all .8s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-form-submit:focus{background:#3C7DF3;color:#fff;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 2px 4px 1px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}
#ContactForm1_contact-form-submit{height:45px;display:table;margin:10px auto 0 auto;text-align:center;float:none;width:100%}
</style>Now the step is to add the javascript code below before the </body>.
Before adding this JavaScript code to your blog theme, change all the blog ID code 8371150297240855621 in this JavaScript code with your blog ID and also change this URL //example.blogspot.com/ to your blog URL.
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8371150297240855621';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8371150297240855621','//example.blogspot.com/','8371150297240855621');
_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': '8371150297240855621', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>When you add JavaScript code to your blog theme, click the Save Theme button.
The last step is to go back to the Blogger Dashboard > Pages menu > and then click the New Page button.
Type the title of the page as "Contact Us" or as you wish, and switch the page into the HTML View and add the below code to this blank page.
<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea style='position:relative;overflow:hidden' cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>After adding the code, click the Options Menu in the Page settings on the right side of the page, select "Do not allow, hide existing" and click the Publish button.
Now that the contact form page has been created on your blog, you can now link the link to this page to the contact link in the menu.
Download & Demo Link of this Contact Form Page.
I hope you find this post "How to Add a Contact Form Page in Blogger?" very useful and respectful.