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

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?