CSS Forms – Use CSS Themes For Your Web Form

Everyone knows what web forms are and they are becoming a part of users’ daily online interaction. People begin to understand that a professional and successful web site must have online forms. Registration form, login form, contact form, subscription form, file upload form and many others must fully satisfy visitors of the site and be maximally understandable and easy to use. Especially it is important for commercial sites because their profit depends on the order form the customers have to fill in.

Default web forms look unprofessional and unshaped. Today web design requires all elements be in one style and have the same design, so it is very advisable to customise the web forms on your site.

Let’s discuss which modern solutions web developer can now use, designing CSS theme for web form with the help of PHPForms.

1. In your account there is a ‘Themes‘ tab. With its help we can create beautiful CSS Forms. Themes section contains three tabs: Theme Gallery, My Themes and Create Theme. Here is what Theme Gallery looks like:

CSS forms
CSS Forms

2. Here we can choose the ready CSS form theme. You can do it by selecting the item from select box or click on one of the pictures below and decide which one suits you the most. Also here you can select the form you want to apply this theme to.

CSS theme color

3. But if you didn’t like any of the ready CSS themes, you can build your own theme by clicking ‘Create Theme’ link at the top of the web page. At first you will be asked to choose the logo or upload your own logo file. Also you may disable the logo on your theme – all you need to do is just click ‘None’ radio button.

Logo

4. The next tab allows to set the wallpaper and solid patterns on the background of CSS form’s elements. There are three ways to do it: choose from presets, download your own image or specify the color by clicking the one you liked or by writing HEX code in the field below. Let’s choose some preset for web form wallpaper.

Form background

5. For the header of CSS forms you can choose some color (#DEDEDE).

Header color

6. You can pick some colors for CSS forms and field backgrounds. There you can’t place an image, you are only allowed to fill them with some color. The last option here is ‘Highlight‘. By default the highlight color is yellow. But in our example we don’t want it to be shown, so we’ll select the same color that form background has.

Field highlight

7. Now it is the time to adjust the font for all elements of our form: Title, Description, Section Title, Section Text, Field Title and Field Text. We can choose the font type, color, style (normal, bold, italic) and size (8-64) of the font. In our example everything satisfies us, and we’ll only change the font of form’s title (Times New Roman).

Font

8. The next tab is ‘Borders’ and here we can adjust the thickness (none, hairline, thin, medium, thick), style (dotted, solid, groove, inset, dashed, double, ridge, outset) and color of the border. We can do it for CSS forms (thickness – medium, style – double, color – #CCCCCC ), and for sections (thickness – hairline, style – dashed, color – #CCCCCC).

Section border

9. In ‘Shadows‘ tab you can select shadow effect for your CSS form. If you didn’t like any of them, you may check off the radio button ‘None‘ and your form won’t have shadows. In our example we select the third one.

Shadows

10. ‘Buttons‘ tab allows to customise ‘Submit‘ button in order to make it be the part of CSS forms design. If you tried them all but decided to have the default button, then click ‘None‘ radio button.

Button

11. The last tab is ‘Advanced‘ where we can change the name of our new theme. Also here you can upload your own CSS file for the form.

CSS form - rename

12. We have made all adjustments and now can save our new theme. Also next to ‘Save‘ button you can select the form from your list this new theme to be applied to.

Save CSS theme

This entry was posted in Forms on the Web. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>