How to Add Blogger Contact Form to Any Specific Page

Blogger has an inbuilt contact form widget. But it's cannot be used in any specific page. Now we will see how to use Blogger Contact form to specific page.

Procedure to add Blogger Contact Form to Specific Page:

(1) First go to Blogger Dashboard >> Layout >> Then Click Add a Gadget Anywhere >> More Gadgets >> Contact Form (New)

blogger contact form

(2)then Add a new page if you don't have any or Click on Edit in an existing page.

(3) Then go to Option which is on the right corner. Then make sure that the setting are same as shown below:
page option

(4) Now click on HTML mode. Then paste the following codes inside.

<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" 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>

(5) Now Click on Update.

(6) Now our task is to hide the Contact form which was taken at first. For this go to Template >> Edit HTML. Then Search for ]]></b:skin>  code by Ctrl+F. Now paste the following piece of codes just above ]]></b:skin> 


#ContactForm1
{
display: none ! important;
}

(7) By this the widget won't be visible. Now you are done. Enjoy :)
Previous
Next Post »

1 comments:

Write comments
Kim
AUTHOR
October 4, 2018 at 6:21 PM delete

It is really a nice

Reply
avatar