Easy Way To Add Contact Form On Blogspot

Easy Way To Add Contact Form On Blogspot

Adding contact form to contact us page is not easy in blogger but today iam going to teach you easiest way to add contact form in contact us page in blogspot


Steps Required Adding Contact Us page 

So we are going to Add an Official Contact form to blogger.The benefit of adding official contact form that the message reaches the destination email in 0sec that's amazing. 

            Table Content

         1.Add official contact form gadget.
         2.Hide contact form by removing codes.
         3.Create Contact us page.
         4.Paste my contact form code in contact us page.

1.Add official contact form gadget.

.Go to blogger Dashboard.

.Click on Layout

.Left side clicks on Add a Gadget.

On left side click on add more gadgets

.Then add a contact form to blog.


 2.Hide contact form by removing codes.

Now you have completed the first step.Then go to second step to hiding contact form by removing some codes.

.Go to Theme.

.Then click on edit HTML.

.Now click on Jump to widget on top.

.Then select contact form 1.

.Then click on small arrows on the left side to expand contact form codes.

Then find this code and remove the codes colored with Red

 <b:icludable id='main'>

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>


  <div class='contact-form-widget'>

    <div class='form'>

      <form name='contact-form'>




        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>


        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>


        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>

        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
  <b:include name='quickedit'/>

.Now save the template.You can see your contact form is hidden.

  3.Create Contact us page.

.Now create contact us page 

.Go to HTML on contact us page 

.Now paste this code to HTML page in your contact us page you can see your contact us form.

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<div class="fm_name">

Your Name:

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>

<div class="fm_email">

E-mail Address *:

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>

<div style="clear: both;">


<div class="fm_message">

Message *:

<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

Now update the page now just test the contact form Your email will be sent to your address which linked to blogger account and the email will receive in social folder.

If you are facing any problem plz leave a comment in the comment section i will try to help you.

No comments:

Powered by Blogger.