WP Fluent Forms Styling/Custom CSS

With WP Fluent Forms, you can now add your own style to your online forms using custom CSS.

  • Open up your form and head to the “Settings & Integration” tab on top of the editor.
  • Select “Custom CSS/JS” from the sidebar

You will be given a unique class for every form. It appears highlighted above the shell. Use this class in your codes.

For example: Here ‘.fluent_form_149’ is the class for this particular form.

You can use some basic custom css from below

Please note that you need to replace the ‘.fluent_form_149’ from the code with your own form’s unique class

You can change your Submit Button style.

https://gist.github.com/reachkamrul/ea81a109611bc3edd660a616f2fbd990

Or even all the Input Fields style.

https://gist.github.com/reachkamrul/26cd37c94e76ebb549dee98504f31083

You can customize the font styles.

https://gist.github.com/reachkamrul/1e1e5fa10ac9082e58943767a77e9db4

Label styles can also be set according to your will.

https://gist.github.com/reachkamrul/c8024ceb2279305d45fefb4da1ae64c9

Change Input Focus Color

https://gist.github.com/nkb-bd/59dbd6170120ab7747d482eb0b150e9f

Change Ratings Color

https://gist.github.com/reachkamrul/c340d9ae924a0fe6bb8469efc17e6293

If you get bored with the Step Button style over and over again, you can change that too.

https://gist.github.com/reachkamrul/93da53d34b97859c3367773eb1fa3aba

Similarly, you can tweak a lot of things using custom CSS to give your forms a unique look. Remember to Save before launching. Or the customized CSS classes will not come into effect.

More CSS styles will be added frequently

Was this article helpful to you?

17 13

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket