Full CSS Form Customization

When you use 123ContactForm to create web forms for your website, you might want to emphasize some fields, by changing their look. This is easily done using CSS. You can customize all fields of a kind (all inputboxes for example), or just a single field. Web forms created with 123ContactForm are built in such a way that each element has an unique ID, and using it you can customize the way the item looks.

Let's take this form for example (click to preview). Using less then 15 lines of CSS code, we can customize it exactly how we want. Let's say you want to make it look like this (click to preview). You have to create a CSS file, mystyle.css for example, customize it as described below, upload it to your site, and set its URL to be used in the Form Setup page.

If you look at the source code of the form, you will see that most of the elements have classes and IDs.

This select (drop-down) field belongs to the class named class123-select and has the ID id123-control346045. Modifying the class123-select class using CSS will apply the changes to all Select fields. Modifying the id123-control346045 ID using CSS will change the appearance of only this Select field. Let's add a red border-left to all drop-down (select) controls and an orange border-bottom only to this drop-down control:

Let's make all the text on the page blue:

Let's make all the controls and labels in the form use Verdana 12px as font: Let's add a red left-border to all checkboxes: Let's add an orange background to all drop-down (select) options: Let's change the look of a certain label by adding a red border-left. You can even customize the look of the upload fields or of the verification number (Captcha) inputbox:

---

The sample CSS file that was used to customize this form can be found here. If, after reading this tutorial, you don't know how to customize your form using CSS, please contact us.