How to Create a Responsive Contact Form on a Blog

On this occasion TopBlog Pk will tell you how to create a Contact Form or commonly called a Contact Form, of course, which is responsive to blogs. Here I will share how to create a Contact Form or Contact Form as I use it on this blog.

Okay the following steps:

How to Make a Contact Form on a Blog:

There are Two methods through which you can apply this procedure. 

🥇Methods 1

Go to Blogger Dashboard

Select Theme > Customize > Adjust Widths > Add CSS 

Or

🥈Methods 2
1. First open your Blogger Dashboard > Add Gadgets > Scroll down and Search for Contact Form Gadgets > Then Save

2. Then click Theme Menu > Edit HTML > Add CSS Code below before the code

</Head>

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

3. Then click Save Theme.

4. Then Click Page Menu and Create a New Page > Copy the Code below and Paste in HTML Post Page [Not Compose i.e before pasting this code chose HTML]

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

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

<style scoped="" type="text/css">

#ContactForm1,#comments{display:none}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}

#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}

#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}

.formcolumn4{position:relative}

.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbG6RPPPuPYsc9A62v79QVI_N8cBRxcF5519ex93HtqKnDl2LC0MkYIhusjkMfRY10nMoi07nfArC8G9rX5jewV5D0QIBdGhQp-d2r5sn3Lbfy38Azps3rqVTZNCon1-0JlI46E4lDy-iA/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}

#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px 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}

.formcolumn2{padding:0 0 0 10px}

@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}

</style>

🔹For those who optimize their blog by hiding CSS and JS Blogger, add the code below right below the code in the previous step [Follow step 2]. 

<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'] = '4568204870050515099';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4568204870050515099','//topblogpk.blogspot.com/','4568204870050515099');

_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': '3418183643140065445', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

🚫 IMPORTANT ! 

Replace all codes 4568204870050515099 with your BlogID, and replace topblogpk.blogspot.com with your blog url. If you have added, click Publish and See the results.