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!
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; }
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;
}
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;
}
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 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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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);
}