X-Raying Your Form’s CSS

  

The layout and appearance of your form are normally customized in the Form Editor and in the Themes section. This gives you control over all the elements that make up your form. However, if you are not a complete stranger to HTML and CSS, you can easily go deeper into tweaking your form.

How to customize standard form elements

Certain types of fields have standard associated classes, as shown in the image below. To customize these fields, insert CSS code for their classes in the subsection Use Custom CSS of your SettingsThemes section, Code tab. For instance: .class123-label {background-color: #ccc;}, which will make the background of all of your field labels gray.
Contact Form - Custom CSS

How to customize other form elements

You can also tweak the elements that do not fall into default classes. What you need to do is: 1. Get the HTML code from the Publish section → 2. Identify form elements (by ID and class) → 3. Write the CSS code for those identifiers. We’ll walk you through it.

1. Go to your Publish section, select the Embed Code tab and spot the Inline HTML option. This is the option that provides all of the form code. Copy/paste it in a text editor, such as Notepad++.

2. Now, you are going to search through the HTML form code to identify form elements. Here are the main points you need to keep in mind:

  • The HTML code contains the structure of your form, whereas the CSS code defines its style.
  • Every form field (by which we understand both the field label and the input area) is contained within a table row. Table rows are marked by the tags <tr> (starting point) and </tr> (ending point).
  • The first field of your form is contained within <tr id=”row1″> (…) </tr>; the second one – within <tr id=”row2″> (…) </tr> and so on. And there you go – the first field IDs! CSS styles applied to these IDs will affect the entire form field (field label + input area). To get to these IDs faster, you can use the Find function of your text editor or browser (CTRL + F).
  • Each row, <tr> (…) </tr>, contains two cells. Cells are marked by <td> and </td>. In other words, each form field is split into two parts: the field label and the input area. So, the structure of a form field is the following: <tr><td> Field Label </td><td> Input Area </td></tr>.
  • Inside <td>’s, look for classes and ID’s to discover the identifiers that you need.
  • In a CSS sheet, id=”row1″ turns into #id, while class=”class123-label” turns into .class123-label.
  • It’s important to know and remember that ID’s are unique – one single form element can be associated to it. Classes can be applied to more elements. For instance, the CSS line .class123-label {background-color: red;} will turn the background of all your form labels red. #row1 {background-color: red;}, on the other hand, will only turn the background of your first form field red.

The steps above describe the more hands-on way to do it. Alternatively, you can use a DOM inspection tool that is a feature or an extension of your browser: Firebug for Firefox, Web Inspector for Google Chrome and Safari (built-in), WebDeveloper for Internet Explorer and Dragonfly for Opera. A DOM inspection tool pinpoints the element code instantly when you hover over it in your browser.

3. After you’ve identified the ID’s and classes of the form elements that you want to tweak, go to your SettingsThemes section and open the subsection named Use Custom CSS, below theme options. Leave the Code tab selected and insert your CSS code.

About the Author

Alexandra Draghici is the Project Manager of 123ContactForm. She tracks our project development and acts as a link between departments. Alexandra likes web technologies and teaching online and offline.

This entry was posted on Friday, September 23rd, 2011 at 6:13 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “X-Raying Your Form’s CSS”

  1. Mohamed Says:

    Thanks for this post, maybe I’ll make a couple CSS form templates for my readers.
    Regards :)

  2. Use Custom CSS - 123ContactForm Knowledge Base Says:

    [...] Find out more about inspecting the form code and styling its elements with CSS. .theader{ width:100%; } .tdheader tr td { margin:10px; border:1px solid red; } [...]

Leave a Reply