Ohayo Tricks

How To Add Contact Form Widget To Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0F3A4BFU2kKNkrVipf4gOOuWOsayyt8op0GD3VIvGVjVYOgfaNUPvNmLx5OJxhgKLFxE9DbWzY4esV6sK4Ys_RCu9mfSsncdJgg0s7Y4hKbAE17_1CGIOyIMYbGKuhNFq0ZjQ77dBYs/s1600/Contact.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="351" data-original-width="798" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0F3A4BFU2kKNkrVipf4gOOuWOsayyt8op0GD3VIvGVjVYOgfaNUPvNmLx5OJxhgKLFxE9DbWzY4esV6sK4Ys_RCu9mfSsncdJgg0s7Y4hKbAE17_1CGIOyIMYbGKuhNFq0ZjQ77dBYs/s1600/Contact.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; color: #3a3a3a; font-family: Georgia, Times, serif; font-size: 18px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
There are tons of services which gives you custom contact forms to add on your Blogger blogs. Why use other forms when you can use Blogger’s own official contact form widget?</div>
<div style="background-color: white; border: 0px; box-sizing: inherit; color: #3a3a3a; font-family: Georgia, Times, serif; font-size: 18px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Blogger’s contact form widget is not a fully functioned contact form widget with tons of actions, but a simple contact form with three options – name, email & message. It’s worth noting, it’s an AJAX form with stylish Google UI. In case you can’t find the contact form widget, I’ll show you how to add contact form widget to Blogger.</div>
<div style="background-color: white; border: 0px; box-sizing: inherit; color: #3a3a3a; font-family: Georgia, Times, serif; font-size: 18px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Go to your <span style="border: 0px; box-sizing: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Dashboard > Layout > Add A Gadget > More Gadgets</span></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; color: #3a3a3a; font-family: Georgia, Times, serif; font-size: 18px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAeaflyU3R3-MEKIsfYo1_QoVGYyfchATBqbUjw_H2FksCjEHJN7IPU4GerPBsW-fYGK8AauYH3E3Uk7dtQ7fw5y5zQgpayiMeoxQWD5xDhlYQpv1i1bT_e9Fm62yhWE9jNNschZfW6A/s1600/Blogger-Contact-Form-Widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="638" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAeaflyU3R3-MEKIsfYo1_QoVGYyfchATBqbUjw_H2FksCjEHJN7IPU4GerPBsW-fYGK8AauYH3E3Uk7dtQ7fw5y5zQgpayiMeoxQWD5xDhlYQpv1i1bT_e9Fm62yhWE9jNNschZfW6A/s1600/Blogger-Contact-Form-Widget.png" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; color: #3a3a3a; font-family: Georgia, Times, serif; font-size: 18px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; color: #3a3a3a; font-family: Georgia, Times, serif; font-size: 18px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Choose <span style="border: 0px; box-sizing: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Contact Form</span> gadget, give it a suitable title, and click on <span style="border: 0px; box-sizing: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Save</span> button to add this gadget. That’s it!</div>

Blogger Tricks Widgets How To Add Contact Form Widget To Blogger

There are tons of services which gives you custom contact forms to add on your Blogger blogs. Why use other forms when you can use Blog...

How To Add Blogger Contact Form Into A Page

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnMPTUN2Jtv4nTfGUOcEWqVKXXzh5TcyqqJWr_A09F6QZsgTTVLHFjt2Z0vw6Xwgn7VT4elMGI85apXDfdDnVg513VaC02k21fsp19hBkQOYm6ptZ9FoKN8ClQ-O5s-7gLFs2ORD7d-0/s1600/Contact.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="351" data-original-width="798" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnMPTUN2Jtv4nTfGUOcEWqVKXXzh5TcyqqJWr_A09F6QZsgTTVLHFjt2Z0vw6Xwgn7VT4elMGI85apXDfdDnVg513VaC02k21fsp19hBkQOYm6ptZ9FoKN8ClQ-O5s-7gLFs2ORD7d-0/s1600/Contact.png" /></a></div>
<br />
<br />
<br />
<br />
In last tutorial, I showed you how to <a href="https://www.ohayotricks.com/2020/04/how-to-add-contact-form-widget-to.html" rel="nofollow">add Blogger’s official contact form</a> to your Blogger blog. You can also add Blogger contact form into a page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:<br />
<br />
<br />
<b><span style="font-size: x-large;">Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.</span></b><br />
<br />
<div>
<b><span style="font-size: large;">Hiding Contact Form From Your Sidebar</span></b><br />
<br />
First, we need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your <b>Dashboard > Template > Edit HTML</b>. Search and paste this code just above <b>]]></b:skin>:</b><br />
<div>
<blockquote class="tr_bq">
<b>#ContactForm1{
display: none !important;
}</b></blockquote>
<br />
Save your template.</div>
<div>
<br />
<span style="font-size: large;"><b>Adding Contact Form To A Page</b></span><br />
<br />
Now, we will add the contact form to a static page of your Blogger blog. Navigate to your <b>Dashboard > Posts</b>, and click on <b>New Page</b> and select <b>Blank Page</b>.<br />
<br />
Now, in your blank page, click on HTML option to switch to HTML editor mode. Add following code and publish your page:</div>
<div>
<blockquote class="tr_bq">
<b><form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
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>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form></b></blockquote>
<br />
That’s it! You can also customize the contact form with custom CSS styling or jQuery.</div>
</div>

Blogger Tricks Widgets How To Add Blogger Contact Form Into A Page

In last tutorial, I showed you how to add Blogger’s official contact form to your Blogger blog. You can also add Blogger contact form...

Ohayo Tricks

How To Add Contact Form Widget To Blogger

How To Add Blogger Contact Form Into A Page

Populars

Featured Post

[Tutorial] - Special Force Thailand Playtime Event

Blog Archive