How add contact form to blogger

By SH101 -
How to add a contact form or Contact us to Blogger
Sometimes your blog visitors have left a message in a comment, this is why adding a contact form to your blogger blog is necessary and you encourage to stay in touch with your readers. In this tutorial we will see how to create a contact page in blogger. Let's go

 login to your Blogger.com account
click Layout in the left sidebar to get an option to add gadgets
choose More gadgets on the left side. Now you will see the contact form. Just add the same.
Add a contact form to Blogger



Edit HTML code
Search]]> </ b: skin>
Theme -----> Edit HTML code
Ctrl + F3 type the code]]> </ b: skin>





Type the code:

 Div # ContactForm1 {display: none! Important; }

 just before]]> </ b: skin>

 Go to Pages and click on New page.

PAGE CONTACT US


Contact us page configuration

Open the contact us page and type the code 
Click save

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
Get in touch with us by filling out the form below.<br />
<div class="form">
<form name="contact-form">
Name <br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br />
Email <span style="font-weight: bolder;">*</span> <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br />
Message <span style="font-weight: bolder;">*</span> <br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" contactform1="" href="https://www.blogger.com/rearrange?blogID= 1234567890&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" target="configContactForm1" title="Edit"> <img alt="" height="36" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="36" /> </a> </span> </span> <br />
<div class="clear">
</div>
</div>
</div>

Change blogID = 1234567890 with this it from your blog
When creating the page, you must switch to HTML mode as shown in the image below. Then, paste the above code in the publication editor (after the correct edition), deactivate the comments and publish your page.


 Click on the Publish button. Here is the result

 Once the page is published, go to this new page, fill out the contact form, click on the Send button and check that it sends the email to all the administrators of the blog
formulaire de contact




Messages sent from this contact form will be sent to the administrator's email.

 The code link used in the tutorial contact form to blogger

Comments

Post a Comment

Popular posts from this blog

How to Add a Facebook Comments Plugin to Blogger

By SH101 -
Image
facebook comments In this tutorial we will see together how to add a Facebook comment plugin on Blogger. 1-Create an ID application for your Blogger It is a necessary step for the creation of "facebook comments". For that you must go to the link https://developers.facebook.com/apps/ Choose Website Type the url of your WesSite Now go to the comments module page while staying connected with your Facebook Developer account. 2-Edit The HTML Code  Go to Blogger's HTML page and paste the primary code right after the end of the <body> tag. Click on "Save model".  Now you should get an XML parsing error that says:  XML error analysis, line 663, column 31: the reference to the entity "version" must end with ';' Delimiter. Change the code by changing & highlighted in red below by & amp; Before Editions: <div id="fb-root"></div> ...
Read more

How to create an e-commerce store on Blogger

By SH101 -
Image
Build an online store can be quite tricky work for all . However, with some eCommerce plugins , we can transform our blog into a fully flourishing e-commerce site. However, there are countless models of Blogger eCommerce available on the Internet, but how do we convert our Blogger into a fully functional ecommerce site? Today, in this tutorial, I show you how to create an online eCommerce store on Blogger. You can sell almost anything on your Blogger site, but the product you are selling must be linked to your blog. If you have written an e-book, you can make that e-book available through your e-commerce compatible blog. Blogger can also sell T-shirts, jewelry, skin products and almost anything that is legal to sell.  How to create an e-commerce store on Blogger To create an online store to Blogger, I use a plugin called ECWID. It is a free e-commerce and shop solution that helps you convert your existing blog into a fully functional e-commerce store. First, you n...
Read more

How to Create and Add a Forum To Blogger

By SH101 -
Image
Adding the forum to your blogger is the best way to interact with your readers and your reader can chat on a topic on your Forum Blogger, there are many popular blogs have forums, and this is among the best method to get more reader for your Blog, and it's very easy to add, in this tutorial, I show you how to add in Forum Blogger. What is the Forum? The Forum is an online discussion site or web page where users  can post messages in topics or they can also  start a discussion on a subject. There are many websites that provide a free forum for your Blogger / websites, and one of the best methods that I will use in this tutorial is Google Groups in order to create the forum in blogger blog. Go to Google Groups and fill in the required information, then click on Create.   Click Invite people to join the group. Then go to Customize your group setting. Just copy the code below and save it temporarily on a notepad. Go to Blo...
Read more