We can always add bloggers default contact us gadget but is only confined to the gadgets and you can not move it from there. What if you want to create a separate contact us page but using the same gateway of Blogger's default contact us gadget.Though you can use a lot of third party tools for fancy and elegant contact forms yet there are few advantages of using blogger's default contact form .
Benefit of using blogger's contact us
1.It is fast , free and instantaneous( Though it had some issues in recent past. It is working fine now).2.As it is backed by google it self it is secure compared to those third party contact form providers.
3.There is no limit of daily mails . But if you want to get these same benefits from those third party provider they will charge you for monthly/yearly subscriptions.
4.If you have knowledge of CSS and HTML you can design your contact form as per your requirements
So it is better to use blogger's default contact form. You just need to follow these basic steps in order to create a separate page for contact us. If you want to see how it looks in real time you can check contact us link of this blog.
Step 1: First of all you need to open layout section in the blogger main menu. Then in the right section click on "add a gadget" . After that a new window will appear where you will have to select "contact form" gadget
Step 2: After adding this gadget this gadget will appear in the right column of the blog.But we don't want that so we will hide it from because we are going to create a new page for contact form.For hiding this contact form go to "Theme" then "Edit HTML" and search for </b:skin> and paste below code before </b:skin> and save.
div#ContactForm1 {
display: none !important;
}
Step 3: Open page tab and create new page and name it "Contact Us" or any thing you like to show up in the page heading.Open HTML editor or the page and paste the below code and save your contact form it ready to use.
<!-- Contact Form Code -->
<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 10px;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}
</style>
<br />
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span><br />
<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>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
<!-- End Contact Form Code --></div>
Step 4: View the page in the browser and copy the link of this page. Now this link can be mapped with any button or header menu in your blog. For example if your navigation bar has "contact us" tab, you can map this link and when you click on that button a new page will open with "Contact Us" from created by you.
Post a Comment