123ContactForm is a simple online form generator that helps you create beautiful web forms with the drag & drop simplicity. Once the forms are created they can be easily customized using our ready made CSS form themes or the simple CSS editor.
When you use the 123ContactForm CSS Form Generator to create web forms for your website, you might want to emphasize some fields, by changing their look. This is easily done using CSS code to style form elements. You can customize all fields of a kind (all input boxes for example), or just a single field. Web forms created with the 123ContactForm CSS Form Generator are built in such a way that each element has a unique ID, and using it you can customize the way the item looks.
Implementing full form customization to web forms built with the 123ContactForm CSS Form Generator
Let's take this form for example (click to preview). Using less then 15 lines of CSS code, we can customize the CSS form elements exactly how we want. For the sake of this example, 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. Or you can add the CSS code straight from the 123ContactForm interface.
Sample CSS form elements customization in less than 15 lines of code - click below to enlarge
+ If you look at the source code of the form, you will see that most of the elements have classes and IDs, as below:
This select (drop-down) field belongs to the class named class123-select and has the ID id123-control4346747. Modifying the class123-select class using CSS will apply the changes to all Select fields. Modifying the id123-control4346747 ID using CSS will change only the appearance of this particular Select field. Let's add a red border-left to all drop-down (select) controls and an blue border-bottom only to this drop-down control:
The sample CSS form elements that where used to customize this form can be found here. If, after reading this tutorial, you don't know how to customize your form elements with CSS, please contact us.
Get more features and customization options by using our drag & drop web form builder
That was it, we added pure CSS code to form elements generated with the 123ContactForm CSS Form Generator. If you want to add more functionalities to your form and go wild with our customization options, you can use our simple web form builder that doesn't require any advanced technical knowldge. Here is a list of most commonly used features and customizations:
