Learn how to create a Material Design Contact Form for Blogger blog on Static Page using Custom HTML Code to get in touch with reader, fans and follower.
So, today in this tutorial I'm going to share you another blogger contact form HTML Script with material design effect. Let Stated.
Adding a Contact Form on Blogger Static Page
Step 1: First, go to the Blogger Dashboard
Step 2: Now go to Pages and click on New Page button (see the image below)
Step 3: Firstly before doing anything else, type the title what you want. Please note that the title you choose there the first time will generate permalink as per your title and after publishing, you cannot be able to change them later. Let give me a hint I choose title Contact, so permalink generated - mydomain/p/contact.html
Step 4: Now turn on the HTML mode on page editor by clicking on HTML button right side to the Compose button and remove there all HTML Scripts appearing there.
Step 5: Now it's the time to Copy the Custom HTML Script and Paste on HTML Page Editor section. Click on Copy all code area to copy the HTML script and then in HTML editor area press Ctrl + V button to paste the code successfully. (to see Blogger Contact Form HTML Code Unlock the content by FB like or Twitter Share)
Final Step: Now click on Publish button to finish. Done!
So, these are my tutorial on How to make Material Design Contact Form in Blogger Static Page. Hope you like this Stylish Blogger Contact Form and material design effect. If you have any question or face any problem to set up this contact form on your blog, just let me know by leaving a comment below. I will get back to you as soon as i can.
[lock]
[<style scoped="scoped">
.sharetickinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.sharetickinput input,.sharetickinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.sharetickinput input:focus,.sharetickinput textarea:focus{outline:none}.sharetickinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.sharetickinput input:focus ~ label,.sharetickinput input:valid ~ label,.sharetickinput textarea:focus ~ label,.sharetickinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.sharetickinput input:focus ~ .bar:before,.sharetickinput input:focus ~ .bar:after,.sharetickinput textarea:focus ~ .bar:before,.sharetickinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.sharetickinput input:focus ~ .highlight,.sharetickinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.sharetickinput input:focus ~ label,.sharetickinput input:valid ~ label,.sharetickinput textarea:focus ~ label,.sharetickinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="sharetickinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="sharetickinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
<div class="sharetickinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>Message</label>
</div>
<input 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>
<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'] = '1311596492989291007';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1311596492989291007','//sharetick.com/','1311596492989291007');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1311596492989291007', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
]
[/lock]
Step 6: Replace the URL //sharetick.com/ with your blog URL
Step 7: Find and replace this code 1311596492989291007 4th time with your Blog ID
Step 8: To Change base color, you may replace this code #07ACEC with your own color code
Step 9: Now setup additional Page Setting. Write down your description in Search Description box then click on Options and do setup as showing given images.
Final Step: Now click on Publish button to finish. Done!
So, these are my tutorial on How to make Material Design Contact Form in Blogger Static Page. Hope you like this Stylish Blogger Contact Form and material design effect. If you have any question or face any problem to set up this contact form on your blog, just let me know by leaving a comment below. I will get back to you as soon as i can.
COMMENTS