Improve design with CSS

As powerful form builder, forms.app lets you create your dream forms without any need for coding knowledge. You can select a template, customize your form, and easily share it with your audience. And, If you want more control over how your form looks, then you will also find a CSS Panel waiting for you. Enjoy the ultimate freedom with the CSS option and design your forms in the way you like!

How to use CSS when creating your forms?

If you are familiar with CSS, you will find this process quite simple and enjoy your time while customizing your form. All you have to do is click the CSS button on the design menu and open the panel. Now, you can proceed to type your forms out!

Adding custom animated backgrounds

forms.app offers you a variety of animated background options under “Themes.” But if you want custom ones, you can simply find a gif online and use CSS to make it your background.

This code works only in the step-view.

  .question.current { 
   background: url('https://i.pinimg.com/originals/1a/c8/0b/1ac80bc8294276ffbe51a6620f473037.gif'); 
   background-attachment: fixed; 
   background-position: center; 
   background-repeat: no-repeat; 
   background-size: 80%; padding: 10px; }

Changing font size

One of the most common actions with CSS is choosing the font size. By pasting the following codes in your CSS panel and customizing the value, you can easily change any font size.

Changing the font size of the description text

  p.question-description {
       font-size: 16px !important;
   }

Changing the font size of the form title

  .form-title {
   font-size: 35px;
   }

Changing text format

In addition to font size, you may consider changing the format of your text. For example, you can use “Align,” “text-overflow,” or “text-shadow” properties. These will allow you to make your text right, left, or center aligned, flow over some other elements, or come with a drop-shadow effect.

  .form-title {
     text-shadow: 4px 4px #fff;
   }
   
   .question {
    text-align: center;
   }

Two column layout

Using CSS, you can show two columns per row. This will make your questions show up next to each other and will be a better fit in some specific cases and websites.

Please note that this only works in list view.

The first method:

  .question { display: inline-block; height: 100px; padding: 5px; width: 400px; }
   .question.submitbutton.right { height: 50px; left: 50%; position: relative; }

The second method:

  form .big-question-wrapper .question-info { display: none;}
   form .big-question-wrapper .question {  float: left;  width: 50%;}
   form .big-question-wrapper .question:last-child {  width: 100%;}
   .submit-button {  float: left;  width: 100%;}
   .submit-button .i-button {  width: 50%;}
   .content {  height: 50%;  padding-bottom: 0 !important;  padding-top: 0 !important;}

Removing the progress bar

Removing some elements from the form sounds dangerous and complex. But in reality, it is a fairly simple process and requires only one property: display. Simply select the element you want to remove and type display: none; between the brackets. Here’s an example with the progress bar.

  .progress-wrapper {
       display: none;
   }

Removing the input field icons

You will see a small icon on the left side of each input field. This helps with keeping your form intuitive and gives a hint about your question and the answer you want to collect. But in highly specific cases, you can easily remove them. Simply select the icon while you are on the CSS panel and type display: none; between the brackets.

  .input-field .icon-left {
     display: none;
   }
   .input-field.prepend-icon .f-input {
     padding-left: 1em !important;
   }

Removing the previous & next question arrows

At the bottom of your forms, you will notice two small arrows that allow respondents to go back and forth between questions. If you want to remove them, simply copy and paste the following code into your CSS panel:

  .right-side.arrow-controls {
       display: none !important;
   }

Removing the border of explanation fields

If you have explanations to make, instructions to give, or text to show, the explanation field is just for you. But in some special cases, you may want to remove the border of your explanation field and make it transparent. Here’s the code: all you have to do is copy and paste it into the CSS panel:

  .wysiwyg.break-word {
       border: none !important;
       background: transparent !important;
   }

Resizing the pictures in a picture selection field

The picture selection field is great for showing images as answer options. And if you want them to look at a specific size, you can simply copy and paste the following code into the CSS panel and customize the values.

  label.i-radio.picture-choice.custom {
     flex-basis: 16% !important;
   }
   .picture-choice-wrapper .picture-choice .photo {
     height: 121px !important;
   }

Resizing the submit button

The submit button on your forms has only one role. But it’s an important one: submitting the form. In most cases, it is pretty obvious to see, but if you want your submit button to be at a specific size, use the following code and customize the value based on your needs.

  .submit-button .i-button {
   font-size: 1.2em;
   }

Making background blurry

Background filters are fairly common on the web. They make the content easy to read and visually pleasing. So why not use it with your forms? Here’s the code; you can use it as it is or customize the values to fit your form design.

Please note that this code only works in list view.

  .form-body {
     backdrop-filter: blur(20px);
     background: rgba(255, 255, 255, 0.1);
   }