CSS Form generator with customization options
Create free & beautiful HTML forms with full CSS customization features.
Style your forms with CSS
When you use the 123 Form Builder 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 the HTML elements of your online form. Create custom branded forms such as order forms for selling your work and event registration forms that mimic the event’s vibe.
You can customize all fields of a kind (all input boxes for example), or just a single field. HTML forms created with 123 Form Builder 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 CSS form customization to your web forms
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 Custom CSS page. Or you can add the CSS code straight from the 123 Form Builder – custom CSS editor interface.
Sample CSS customization
The sample CSS form elements that were 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.
Sample CSS form elements customization in less than 15 lines of code
Making left border red and bottom border blue for dropdown controls:
Making the entire text on the form blue:
Using Verdana font style on controls and labels with font size of 12px:
Coloring the left border of all single choice fields with green:
Coloring the background of all drop-down options in orange:
Coloring the left border of a certain label in purple:
Customizing the look of a text field:
Customizing the submit button:
Customizing the look of the upload fields or of the Captcha inputbox: