 |
| How to Create Contact Us Page on Blogger |
Do you want to know how I created this contact us form and the big thing is that it is working. It is not a dump contact us form it has functionality to deliver your queries which you add in that contact us form.
I haven't used any high level programming language to make that contact us page. Normally if you want to deliver any email you need PHP support for that any other third party site to deliver your emails. But this contact us form does not use any high level programming language or any third party site it only uses JavaScript to deliver your emails.
Email delivery functionality is provided by blogger which helps us to deliver emails to the admin of that website.
So now if you want to add this kind of contact us page into your blogger blog follow the steps which are provided below.
Steps to Follow:
- Go to Blogger Dashboard
- Go to Pages Section
- Make New Static Page
- Now copy the code provided below and Paste it into the HTML Editor of your New 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 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>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#ContactForm1,#comments,.post-body form.paypalpay br{display:none}
.post-body form.paypalpay{margin:0;text-align:center}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Quicksand',sans-serif;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:'Google Sans',sans-serif;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{font-family:'Quicksand',sans-serif;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/AVvXsEgkKaBI-io8QvOj8fjMi-iBf0igpPfuiW5eBC25cIRXqv_vREU0UtOFMt1N26OO_JAAHiPkAX2pKNlOpS52M8k3h0Qv9XjboKWFwA2zN8NC0Za85AAc-W8EDKQd0fnkw0xx9zslnWwZlAR8/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>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "5756964613169601349";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d5756964613169601349","https://sayemtutorial.blogspot.com/","5756964613169601349");
_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": "5756964613169601349", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>- Click Publish button
After adding the codes into your blogger blog now your contact us form will be working properly.
You will receive emails on your email account which is used for your blogger blog.
Now your users can easily contact you and have discussion on any kind of issue.
Conclusion:
You have successfully added contact us page into your blogger blog and it is working contact us form it delivers email to the admin of that website.
If you have any issue while creating this kind of contact us page into your blogger blog you can easily contact me via my contact us page or my Facebook profile or Facebook page.
0 Comments: