A Beginner’s Guide to Styling Form Fields with CSS

Formplus blog By Formplus blog on 3 min read

CSS forms are beautiful no doubt, and if you fit into any of these categories:

  • You feel restricted by the styling of the form fields that your respondents get to see.
  • You wonder if it is possible to give it a styling of your choice.

  • You want to change the height or width of a text input type with custom CSS.

Then you’re in luck because we’ll be sharing some tricks to help you create beautiful CSS forms.

But there’s a gotcha! You need to have some knowledge of CSS. You don’t want to start working on a form and midway, you don’t know what selectors to use. Learn a lot about CSS from css-tricks.

If you’d rather not have to edit CSS code, check out our guide on how to style your forms without CSS.

In order to style a form field in Formplus, you will need to inspect the field using your browser’s developer tools. On each input type, you’ll find an ID with a value like this - fp-numberstring. To see this, load the form as though you intend to fill it. Right-click on any form field you intend to style, and click ‘Inspect’. You should see something in the form of this id =”fp-1234567890”.

Styling-form-fields-with-css-formplus-forms

To upload your custom CSS, head over to the Customise page of the Builder; check for the custom CSS tab, and then upload your custom CSS. For the purpose of this tutorial, our form field ID is fp-1550487293722,

styling-form-fields-with-css-formplus-css-forms-2

Here are five HTML form design examples with code that you can use to create beautiful CSS forms.

  1. To give the field a background colour of red, you can add this to the custom CSS field.
    #fp-1550487293722 {
                 background-color: red;
    }

  2. To give the field a 10px thick border whose colour is red, you can add this to the custom CSS field
    #fp-1234567890 {
                 border: 10px solid red;
    }
    styling-form-fields-with-css-formplus-css-forms

  3. To create a dashed border line, add this
    #fp-1234567890 {
                 border: 10px dashed red;
    }
    styling-form-fields-with-css-formplus-css-forms

  4. If you want to create more rounded borders than the default field borders, add the following
    #fp-1234567890 {
                 border-radius: 100px;
    }
    The value can be adjusted to meet your needs.

  5. For fields located inside table fields, you can set how the style for each column would be by specifying the column index (which is 0-based) together with the table control id. If for example, you want to style the field in the first column, you can use a CSS target of this format:
    #fp-1234567890 #fp-0 {
                 max-width: 50%
    }
    This CSS styling makes the field in the first column of the table field (with id 1234567890) have a width that is 50% of the parent’s total width.

  6. To style the form title, use the form title id target
    #formTitle {
                 background-color: yellow;
    }
    #formTitle:hover {
                 border: 3px solid grey;
    }

  7. To style the progress bar in a multi-page form, use this to style the progress bar in itself;
    #formPagesProgress {
                 background-color: white;
    }

    Use this to style the indicator in the progress bar
    #formPagesProgress .bar {
                 background-color: red;
    }

  8. To style the asterisk (*) on a required field, use this CSS snippet
    .field.required label:after {
           Color: blue;
    }

This is what the entire form looks like when you're done customizing with CSS:

styling-form-fields-with-css-formplus-css-forms

There, now you have 8+ ways to help you style your form fields with CSS, we hope you have learned more than one thing on how to style your forms in the exact way you want them to look.

To start creating beautiful forms with custom CSS, sign up to use the Formplus builder now. It is free and integrates well with numerous tools. 



  • Formplus blog
  • on 3 min read

You may also like:

15 Reasons to Choose Quantitative over Qualitative Research

Researchers often have issues choosing which research method to go with: quantitative or qualitative research methods. Many incorrectly ...

Formplus Blog
19 min read
Boost Business Productivity with Workflow Forms

People often talk about the future of work using these words “workflows”, “automation” “BPMs” and “AI” in different ways. How exactly do ...

Formplus blog
7 min read
Online Voting: Guide to Creating Online Poll in 7 Simple Steps

Using online polls is great way to conduct elections or ask audience for instant feedback on just about anything. Asides aiming to get ...

Formplus Blog
19 min read
17 Free Evaluation Form Templates [Training, Employees & Customers]

Evaluation forms are often termed necessary during a product release, a service rendered, a training program, and getting feedback is the ...

Formplus Blog
12 min read
Formplus Logo   Never miss a story from us, get weekly updates in your inbox.

Formplus - For Seamless Data Collection

Take charge by implementing a powerful data collection tool into your processes. See how Formplus can transform the way you work with a free 21-day trial.
Try it Free