In our last post, we disclosed how to add the new Contact Us Widget on the Sidebar of your Blog. Today, am gonna complete the tutorial by showing you:
- How to customize the Contact Us Form and
- How to Add it to a Static Page.
Styling Contact Form
Steps on Adding the Form To a Static Page
- Add the Contact Us Widget to your SideBar.
- Note: (If you haven’t done this Click Here: But if you’ve added the widget, jump to step two.
- Create a static page.
- Go to Template >> Edit Template
- Click on Jump to Widget. (A menu appears) Select ContactForm1. You have to search for the id "ContactForm1", expand the widget by clicking on the black arrow on the left (same with the includable).
- Then delete the part that I have colored in BOLD GREEN(see below):
Part to be removed:
1. After you have saved the template, go to Pages and paste the following code into a new blank page which you are to title CONTACT US:
Customizing the Form
It has a transparent background, the form will integrate well, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:
1. Go to Template >> Edit Template
2. Click inside the HTML Code Editor.
3. Press Ctrl + F with your keyboard.
4. Type and find this code: ]]>. If you cant find it. Seach for
5. Copy the CSS code below and paste it just above the ]]>> tag.
Save your template.
Yahoo!!! You Contact Us page is up and going. That's it! If you have any questions or comments please post below.