News & Tips™

This article is a continuation of my previous article on how to add widgets contact form. A widget to send a message to the blog owner. In addition to providing convenience, contact form widget is unfortunately only installed in the sidebar as a gadget.

Installation Contact Form widget in the sidebar is not very commonly used. Contact Form Widget is usually mounted on the post pages and to go to that page via the link in the menu. So blog more pleasing and efficient place.

How to hide the Contact Form with CSS. The steps are as follows:
- The first step
Attach the first widget Contact Form. You can read how to install here.
- The second step
Copy the CSS code below:

.widget.ContactForm {
display: none;
}

- The third step
Go to the blog dashboard select Template => Edit HTML. Find the code ]]></ b:skin> by pressing Ctrl+F. Paste CSS code above.

- The fourth step
Create static pages. Click the Pages menu => New Page. Give title Contact Us. In the editor, select HTML mode and copy and paste the code below:

<form name="contact-form">
Criticisms and suggestions, we are waiting for the better. Please fill in the form below:<br />
<br />
Your Name <span style="color: red;">*</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
Your Email <span style="color: red; font-weight: bolder;">*</span>
<br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
Message Content <span style="color: red; font-weight: bolder;">*</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" style="height: 131px; margin: 0px; width: 230px;"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<br />
Note : (*) Must be fill<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

- The fifth step
Publish. Done.

After making the Contact Us page, then make the widget pages in the header so that the Contact Us page that had been made easily accessible. Do the following:

Select Layout => Add a gadget => Page Header
Tick in the box Contact Us
Put the widget pages below widget header

Among tutorial hide Contact Form with CSS. Hope it is useful.