CSS Form Generator with
Full Customization Options

Create free & beautiful online forms and surveys as easy as 1-2-3
using the 123ContactForm CSS Form Generator

CSS Form Generator

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.

CSS form elements customization

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:

<select id="id123-control4346747" name="control4346747" class="class123-select">
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:
.class123-select { border-left:3px solid #FF0000; }
#id123-control4346747 { border-bottom:3px solid #0000FF; }

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

.class123-label, class123-select { color:#0066CC; }

+ Let's make all the controls and labels in the form use Verdana 12px as font:

label.descr, p.descr, .class123-radio, .class123-checkbox, .class123-select
{ font-family: Verdana; font-size: 12px; }

+ Let's add a green left-border to all checkboxes:

.class123-checkbox { border-left:3px solid #336633; }

+ Let's add an orange background to all drop-down (select) options:

.class123-select option { background: #FF6600; }

+ Let's change the look of a certain label by adding a purple border-left:

#id123-title4290919 { border-left:3px solid #660066; }

+ Let's customize the look of the textarea:

#id123-control4290921
{ border: 1px solid red ; border-radius: 10px ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; }

+ Let's customize the submit button:

#id123-button-send { color: yellow; }
border-left:3px solid #FF00FF

+ You can even customize the look of the upload fields or of the verification number (Captcha) inputbox:

.swfupload { border-style: dashed; color: #00FF33; }
#id123-captcha
{ background: #FF6600; border-left:3px solid #FF00FF; }

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:
123ContactForm CSS Form Generator - Features