Wandering to know how to make contact Us form on your blogger blog? Awsome!.
Contact Form has definitely become an important aspect, for letting your visitors contact you without taking further actions. It's a very simple way, which people can be connected on you through. Perhabs, newbie bloggers don't really know this helpful feature is worth.
Contact form is way worth and so much better then an email putted on a specified page on your blogger blog, So people can contact you throught that email by Following a longer processing, and spending a lot more time.
So In this article, i will be explaining you, how you can easily creat an awsome custom contact form on blogger Blogspot without using any plugins or embedded services.
Why Contact form is important?
You might have ponder about why its always advised to have a contact form on your blogger blog,
Well that's not really bad question!. It's what thousands of people also asking on google how to do it. So I will exactly explain you why you really need it? And how it can help you improve your blogger blog.
Contact form is very useful to your blogger blog to have. But why? Let me ask you a question? You have puplished a post, you got a visitors, for somehow one of them wanted to contact you for a help or anything else. In this way if you don't have a contact form how they can contact you throught, how they can reach you. if there’s no way of communicating with your blogger blog or your brand... e.g NO CONTACT US page on the website, that viewer will never come to your website again result in the bad experience he gained, for having no contact us page.
however contact form is important becouse it's where people, readers, companies and anyone wanted to get touch with you or contact you throught.
Also it's more secured, reliable and people can contact you faster then before with one click to a page.
What are the Benefits of contact form?
No spam: Simply You don't need to worry about spamming emails. You can clearly see everything the user sent to you. Also you can add Outo captcha For Outo generated bots to spam you.
User Information: you don't really need to exactly check everything clearly, becouse the information you are receiving is organized. And you can easily read where you aiming.
Save time: you can easily reply all your emails with more way Professional and Easy way.
How to Make Contact Form On blogger?
To creat a custom contact us form about us page, follow this steps mentioned in the below text:
Step 1: Creat a new page.
Go to Blogger dashboard, Click Pages, And Click the + Icon Or click +New page to creat a new page, then, name it Contact Us.
Step 2: Copy the code.
Now switch the Compose View mode to html view mode. copy the below code, paste it to the created pages html view mode, and Puplish it.
Note: you Should replace the marked code with your blog post-Id For better result
<div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <p>Name</p><input class="contact-form-name" id="ContactForm_contact-form-name" name="name" size="30" type="text" value="" /> <p>Email<span style="font-weight: bolder;">*</span> </p><input class="contact-form-email" id="ContactForm_contact-form-email" name="email" size="30" type="text" value="" /> <p>Message<span style="font-weight: bolder;">*</span> </p><textarea class="contact-form-email-message" cols="25" id="ContactForm_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm_contact-form-submit" type="button" value="Send" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <p class="contact-form-error-message" id="ContactForm_contact-form-error-message"></p><p class="contact-form-success-message" id="ContactForm_contact-form-success-message"></p></div></form> </div></div><script src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js" type="text/javascript"></script><script type="text/javascript"> window['__wavt']='AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7540951749985955556','//blogspot.com','7540951749985955556');_WidgetManager._SetDataContext([{'name':'widgets','data':[{'title':'Contact Form','type':'ContactForm','sectionId':'sidebar2','id':'ContactForm'}]}]);_WidgetManager._RegisterWidget('_ContactFormView',new _WidgetInfo('ContactForm','sidebar2',document.getElementById('ContactForm'),{'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':'7540951749985955556','contactFormNameMsg':'Name','contactFormEmailMsg':'Email','contactFormMessageMsg':'Message','contactFormSendMsg':'Send','submitUrl':'https://www.blogger.com/contact-form.do'},'displayModeFull')); </script>
Demo Contact Us Page:
Also Read: --->
Sharing is Caring❤
This comment has been removed by a blog administrator.
ReplyDeleteSo much thanks brother you helped me so much i really don't know how i should day thanks to you bro. You have done very well job. More appreciate
ReplyDeleteSo glad to hear that. Thank you for giving your feedback
DeleteBro I'm having problem with the design, the code is working but the design become very ugly
ReplyDeleteThank you for your feed back.
DeleteTo solve it, just select the demo code... till the also read text. CLICK copy And Past it to your compose view. If the button does not work change the id's in the code e.g
DeleteThe id's look like this >> id="ContactForm_contact-form-name
DeleteThank you so much for this helpful info
ReplyDelete