Who want to add the contact form in your blog? Today I’ll teach
you guys how to add contact form in your blog. Let’s give upgrade to our blogs
as the websites. Here is the article for you my friend.
Contact form in your blog makes you to get in touch with you with
the visitors in your blog. If they want to ask a question to you from your
content they will find the contact us page to your blog and write a message and
send it to you. Contact form in your blogger is already connected to your
Gmail’s account, So that if the visitor’s wrote a message and send, you’ll
receive that message as a email in your Gmail account, that’s the interesting
part. Most sites has contact form, so I recommend to add it, in this tutorial I
will share how to add contact form in Your Blog,
Let’s start our work without any delay. Follow the steps which are
given bellow:
Step 1: Adding the Widget/ Gadgets:
We need to add the contact form via widget. But we will hide it
via CSS to get the contact form in page worked. If we didn’t add the contact
form via widget the contact form in the page will not work, in short it will
not send.
11) Open your Blogger à
22) Go to “Layout” à
33) Add a Gadget à
44) Click on “More Gadgets” and click on “Contact Form” à
55) “Save” the contact form widget à
66) Save the arrangement à
Now the contact form is in the sidebar of your blog so that we
will hide it via CSS (cascading style sheets).
Step 2: Hide the Contact form Widget
To hide the contact form widget, we will customize the template.
77) Go to “Template” à “Customize” à
88) As you see the screenshot below, navigate to “Advanced”,” Add CSS”, Paste the “Code” (Give Below) and Save (Apply to Blog) à
Add this CSS code, and the contact form widget will be invisible.
#ContactForm1 {
display:none;
}
Step 3: Add contact form in blogger page
Now the last step is to add the contact form in the page.
99) Go to “Page” à “New Page” à
110) Copy paste the “Code” (Given Below), be sure you’re in “HTML” tab à
Code à
<div
id="custom_ContactForm1" class="widget ContactForm">
<div
class="contact-form-widget">
<p>Get
in touch with us by filling out the form below.</p>
<div class="form">
<form name="contact-form">
<p></p>
Name
<br>
<input type="text"
value="" size="30" name="name"
id="ContactForm1_contact-form-name"
class="contact-form-name">
<p></p>
Email
<span style="font-weight:
bolder;">*</span>
<br>
<input type="text"
value="" size="30" name="email"
id="ContactForm1_contact-form-email"
class="contact-form-email">
<p></p>
Message
<span style="font-weight:
bolder;">*</span>
<br>
<textarea rows="5"
name="email-message"
id="ContactForm1_contact-form-email-message" cols="25"
class="contact-form-email-message"></textarea>
<p></p>
<input type="button"
value="Send" id="ContactForm1_contact-form-submit"
class="contact-form-button contact-form-button-submit">
<p></p>
<div style="text-align: center;
max-width: 222px; width: 100%">
<p
id="ContactForm1_contact-form-error-message"
class="contact-form-error-message"></p>
<p
id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
</div>
</form>
</div>
</div>
<div
class="clear"></div>
<span
class="widget-item-control">
<span class="item-control
blog-admin">
<a title="Edit"
target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));"
href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1"
class="quickedit">
<img width="18"
height="18"
src="//img1.blogblog.com/img/icon18_wrench_allbkg.png"
alt="">
</a>
</span>
</span>
<div
class="clear"></div>
</div>
111) Expand the “Option” and Click on the radio button of “Don’t allow, hide existing”, Click on “Done” and Click on “Publish” à
Finally the contact form added in the page, visit the contact page
in blog see the result.
If it doesn’t show on the “Contact Me” tab no worries follow the
steps below:
11) Go to “Layout” (If you don’t know where is “Layout” Please see above in this article) and “Edit” the “Page-Menu” à
22) “Check mark” the radio bottom of the contact me à
33) Save it à
44) Save the arrangement à
This is it, now you can see the Contact Form on your blog. Thank
you for reading this article on How to Add Contact Form in Your Blog (With
Picture).
