How to Add Stylish Contact Form Page in Blogger?

Welcome! On the SEOMAX blog, in this moment, I will explain how you can add a responsive contact form page to Blogger Blogspot blog.

If you are using a custom theme on your blog, you must first remove the contact form CSS code from your blog theme, which you can remove using the blog edit theme option.

Once you remove 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?
  • How to Add Contact Form Page in Blogger Blog?
  • Download & Demo Link of this Contact Form Page.

What Is the Contact Form Page?

A contact form page is a web page used to allow website visitors to contact the site owner or those responsible for maintaining it.

How to add contact form page to 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 will appear on the screen.

Go to Blogger Dashboard > Theme menu > And then click Edit HTML.

Add below contact form CSS code before </head>.

<style type="text/css"> /* SEOMAX - www.apnahai.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 below javascript code before </body>.

<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>

Before adding this JavaScript code to your blog theme, change all the blog ID code 83714644554453554635465621 in this JavaScript code with your blog ID and also change this URL //example.blogspot.com/ to your blog URL.

<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>

When you've added the JavaScript code to your blog theme, click the Save Theme button.

The last step is to go back to the Blogger Dashboard > Page Menu > And then click the New Page button.

Type the page title "Contact Us" or whatever you want and switch the page to HTML View and add the below code to this blank page.

After adding the code, click the Options menu in Page Settings on the right side of the page, select "Don't allow, hide existing" and Publish Click the Done button

Now that the contact form page is created on your blog, you can now link this page to the contact link in the menu.

Download & Demo Link of this Contact Form Page.

Demo Click here Download Click here

Thanks you to all the visitors from this website for your successful read of this page All Content.