Hello bloggers I am back with another useful trick. Today I am going to share that how you can add a default blogger Contact Form to any page or post without showing it on your blogs sidebars or on homepage. You may have added a Contact Us page to your blog so that people can easily reach to you and contact you and if you have just given your email addresses to make contact then it will not suit to your beautiful blog. So you should add a contact form to your contact page.For demo you can see my Contact Us Page.
1) Add Contact Us Form Widget To Blog:
The first thing you have to do is adding contact us form to your blog from Blogger Gadgets. Don't worry we will hide it later. Follow the steps:
3) Add Contact Form To Specific Page Or Post:
Now here is a main thing you have to do. Here is a procedure to add this Contact Form to a page or widget.
You can change the highlighted words with relevant words and save the page.
Such as you can replace Send button with Say It!
5) What To Do If The Above Codes Does Not Work:
On some blogs the above Contact Form does not work. The send button doesn't work properly, for those who have this problem can try following solution.
Image Source: Google Image Source
1) Add Contact Us Form Widget To Blog:
The first thing you have to do is adding contact us form to your blog from Blogger Gadgets. Don't worry we will hide it later. Follow the steps:
- Login to Blogger and go to layout.
- Add Gadget >> More Gadgets
- Now find and add Contact Us Form.
2) Hide Contact Us Form Widget:
Now the thing we have to do is hiding the widget we have added above. I know you do not want to show that widget on the sidebar of your blog because it does not look good. So here is a trick to hide that widget.
- Now go to Template and click on edit HTML.
- Click on the HTML box to activate it.
- Press CTRL+F to search and find this code ]]></b:skin>
- Just above/before this code add following one:
#ContactForm1That's it you have successfully hidden the widget, you can check it by visiting your blog. If you want this widget to be shown remove the above code.
{
display: none ! important;
}
3) Add Contact Form To Specific Page Or Post:
Now here is a main thing you have to do. Here is a procedure to add this Contact Form to a page or widget.
- Go to Pages and create a new blank page or if you want to add in post then create a new one.
- Below post title on left side you can see two tabs such as Compose|HTML
- Now select HTML
- Paste the following code there:
<form name="contact-form">4) How To Customize Above Code:
<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>
You can change the highlighted words with relevant words and save the page.
Such as you can replace Send button with Say It!
5) What To Do If The Above Codes Does Not Work:
On some blogs the above Contact Form does not work. The send button doesn't work properly, for those who have this problem can try following solution.
- Go to Template Designer and click on edit HTML.
- 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 block of HTML code similar to below one.
<form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form>
- Just remove the above code and save the template.
That's it you have successfully added Contact Form to your page. Now your blog looks like a professional one. For any questions and suggestions you may leave a comment below or visit our Contact Us section. Have a nice day..
Written by Unknown
Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)
0 comments:
Post a Comment