Fluent Forms is one of the lightest and most powerful form plugin for Wordpress.
Update - October 16:
+ Changed the full CSS (see at the bottom of the page) so it targets a specific form
+ Added some styling for the dropdown.
So, just like I did for Contact Form 7, here is a short tutorial to explain how to style a simple contact form.
By default, my contact form looks like this:
By chance, the CSS is pretty light and , for most of it, easy to understand.
You can actually study it by yourself and make your own modification:
Change the font
Here is the CSS to change the font of all the elements of the form: The buttons, inputs, labels, placeholders... they will now all have the same font.
I have added a black color for the text, you don't necessary need it, but my website's default color text is white, so I have to change it:
Note that this CSS will affect all the forms. If you want to change the font for a specific form, check the full CSS at the bottom of the page.
.fluentform,
.fluentform button,
.fluentform input,
.fluentform textarea,
.fluentform label {
font-family: 'Roboto';
color: black;
}Style the input fields
Just some basic styling. The resize:none is for the textarea (message), as I don't want it to be resizable.
There is some border radius in the default style, which I don't like either, so I 'remove' it.
.ff-el-form-control {
padding: 20px;
border: none;
background-color: whitesmoke;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
letter-spacing: 1.2px;
transition: 0.3s ease background, color;
color: black;
border-radius: 0;
resize: none;
}Focus & Placeholders
Here we can choose our own colors for the placeholders and focus state. And once again, I removed the border, outline and shadows.
.ff-el-form-control:focus {
color: red;
background-color: black;
border: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none
}
.ff-el-form-control::placeholder {
color: black
}
.ff-el-form-control:focus::placeholder {
color: white
}Click on the input fields to see the result.
The Submit button
At first, we remove the borders, border radius and shadows for all the buttons.
Then we style the submit button.
Note that this time we have to add the class form.fluent_form_1 or it won't work.
.ff-btn {
border-radius: 0;
border: none;
}
.ff-btn:focus,
.ff-btn:hover {
box-shadow: none;
opacity: 1;
}
form.fluent_form_1 .ff-btn-submit {
background-color: red;
color: white;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
letter-spacing: 1.2px;
padding: 20px;
transition: 0.4s ease background;
width: 100%
}
form.fluent_form_1 .ff-btn-submit:hover {
background-color: black
}Warning & success messages
You can also change the style of the errors messages and the thank-you message when the form is finally sent.
.fluentform .text-danger {
color: red
}
.ff-el-is-error .ff-el-form-control {
border: 2px dotted red;
}
.ff-el-is-error .ff-el-form-check-label,
.ff-el-is-error .ff-el-form-check-label a {
color: red;
}
.ff-message-success {
color: white;
box-shadow: none;
}Click on the Submit button to see the result:
The full CSS
Here is the full CSS that target a specific form. You can copy and paste it in a Code Block or in the custom CSS editor (Form settings):
It should work for most forms, but you will probably have to do some adjustments too. Don't forget to change the .fluent_form_1 class if you want to target another form.
form.fluent_form_1,
form.fluent_form_1 button,
form.fluent_form_1 input,
form.fluent_form_1 textarea,
form.fluent_form_1 label,
form.fluent_form_1 select {
font-family: Roboto;
color: black;
}
/* all the input fieds + dropdown options */
form.fluent_form_1 .ff-el-form-control,
form.fluent_form_1 select.ff-el-form-control option {
border: none;
background-color: Gainsboro;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
letter-spacing: 1.2px;
transition: 0.3s ease background, color;
color: black;
border-radius: 0;
}
/* all the input fieds except dropdown */
form.fluent_form_1:not(select) .ff-el-form-control {
padding: 20px;
}
/* textarea */
form.fluent_form_1 textarea.ff-el-form-control {
resize: none;
}
form.fluent_form_1 .ff-el-form-control:focus {
color: red;
background-color: black;
border: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
form.fluent_form_1 .ff-el-form-control::-webkit-input-placeholder {
color: black;
}
form.fluent_form_1 .ff-el-form-control::placeholder {
color: black;
}
form.fluent_form_1 .ff-el-form-control:focus::placeholder {
color: white
}
form.fluent_form_1 .ff-btn {
border-radius: 0;
border: none;
}
form.fluent_form_1 .ff-btn:focus,
form.fluent_form_1 .ff-btn:hover {
box-shadow: none;
opacity: 1;
}
form.fluent_form_1 .ff-btn-submit {
background-color: red;
color: white;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
letter-spacing: 1.2px;
padding: 20px;
transition: 0.4s ease background;
width: 100%
}
form.fluent_form_1 .ff-btn-submit:hover {
background-color: black
}
form.fluent_form_1 .text-danger {
color: red
}
form.fluent_form_1 .ff-el-is-error .ff-el-form-control {
border: 2px dashed red;
}
form.fluent_form_1 .ff-el-is-error .ff-el-form-check-label,
form.fluent_form_1 .ff-el-is-error .ff-el-form-check-label a {
color: red;
}
form.fluent_form_1 .ff-message-success {
color: white;
box-shadow: none;
}And just like my other tutorial about Contact Form 7, here is another example:
It's the same CSS as above, with only few lines changed.