Tutorial # 9 - How to add a Contact Form on a specific page or in a specific post

Adding a blog contact form to your website will give a professional look and also make it easier people to contact you direct on your website.

There are two methods which can be used to create a Contact Form in a specific page or post. Method # 1 is lengthy and difficult as compared to Method # 2. As compared to Method # 2, there is another drawback in Method # 1 that you can’t add custom fields such as phone number, mailing address and file upload methods to the contact form in blogger. BlogSpot uses special codes known as data tags to transfer data. So you can’t handle those tags as you want.

Method # 1

Step 1

Step 2

Step 3

Step 4
Now go to Template and click on the Edit HTML button.

Step 5
Then paste below code just above of ]]></b:skin> code in the blogger template.

#ContactForm1
{
display: none ! important;
}

Step 6

Step 7: Create a new page

Step 8

Switch it to HTML mode. Make sure that whether the "Use<br> tag" option in the option in post settings has been selected.

Now paste below contact us form html code for Blogger on the empty Edit HTML field.

<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>


Customization
Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
Replace Required message instead of red color star symbols(*)( i.e: (required) )
Change Send with wished text to be shown on Submit button.

Some bloggers complain that blogger contact form does not work on their blogs. In some occasions ‘Send’ button does not work correctly and so message would not be sent. I have resolved the problem with embedded-Contact form on blogger post pages and stand alone pages.

Now let’s look at how to troubleshoot this problem easily without confusing your mind.

Go to Template page and back up your template.
After doing that, click on ‘Edit HTML’ button and find contact form widget code.You can do this easily by clicking on ‘Jump to Widget’ drop down button and choosing on ContactForm1 id. Now you will see a block of HTML code similar to below.

<form name=’contact-form’>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ name=’name’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<input class=’contact-form-email’ expr:id=’data:widget.instanceId + &quot;_contact-form-email&quot;’ name=’email’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>
<p/>
<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’/>
<p/>
<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;’/>
</div>
</form>

Remove above code and Save your template.
You’re done!

Step 9
The "Contact Us" page can be added in the menu bar as explained in Tutorial # 8 - How to create a menu bar below the header just like a proper website.

Method # 2
Step 1

Step 2

How to make customized HTML Code for Contact Form from third-party website (e.g. foxyform.com)

Step 3
Log onto www.foxyform.com. Select the required field that you want to include inside your form. For example I want to add Name, Email, Subject, and Phone therefore I have selected those fields.

Step 4
Select the color of your form according to your website color scheme or leave it as default.

Step 5

 This is the preview of your form below.

Step 6
Insert the email address where you want to receive your message via blog/website and tick the check box and then click on "Create Formular".

Step 7

Step 8
The "Contact Us" page can be added in the menu bar as explained in Tutorial # 8 - How to create a menu bar below the header just like a proper website.