Beautiful contact form design in WordPress (with examples)

Your WordPress contact forms should look as amazing as the rest of your website and match your branding perfectly. Create beautiful forms quickly and easily with a visual form styler.

Beautiful contact form design can be easy

Your WordPress contact form is the main point of contact between you and your users - a tenuous link between your company and a new client. So your forms need to be more than just functional. They need to be visually appealing, even beautiful!

Contact form design shouldn't be a chore. At Formidable we've worked hard to make form styling child's play. The Visual Form Styler has all the options you need to create virtually unlimited styles. The preview pane instantly shows you how your changes will look.

It would be impossible to cover all the options in one blog post, but let's look at some main features.

General Form styling settings

The very first tab on the styling page contains several important options. Chose form alignment, width, and background color here. There are also settings for border color and thickness, padding, font choice, and text direction.

Want both RTL (right-to-left) and LTR forms on the same site? No problem. Switch your forms to RTL with no sweat.

One of the most important options in this section is the "Override theme styling" checkbox. This helps to ensure that Formidable styles are applied to your forms on the front-end of your website. This option either adds or removes the "!important" declarations in your styling. This way, it's up to you whether the styling settings can be easily overridden or not.

Field Colors

Did you know you can set different field colors for default, active, error and read-only field states? Beautiful contact form design should mean that even your errors match your branding.

Field Settings

This set of options can really make your form look great. Simple forms can be made bold and eye-catching with oversized fields or large padding.

Adjust sizes, padding, margins and font weight in the field settings. Even set a corner radius if your style looks better with square or extra round corners.

Buttons

Button styling is probably the most important part of your form style. Buttons need to be easily visible and eye-catching, without clashing with your branding. The button styling options allow you to define the default style, hover style and click style. This level of customization allows for a perfect fit with your branding.

Form Messages

For your form to perfectly fit with your site style and branding, customize the success and error message styles too. Set the background color, border color, text color and font size of your messages to match your branding to add an extra touch of professionalism to your forms.

Progress Bar & Rootline

In a multi-page form, your progress bar or rootline is front and center of your page. It's one of the first things that a user will see. If its styling is different from the rest of your site, it will certainly look out of place. Use the background and text color options (for both default and active states) to ensure it matches your site beautifully.

** Bonus ** Custom CSS

While the Visual Form Styler covers most options, some unusual designs may require a little custom CSS.

Custom CSS is easily added to your form style without leaving the style settings. Completely custom CSS means the style options are limitless. When combined with CSS classes that can be applied to individual field elements, this gives you 100% control of every individual element of your form.

Beautiful contact form design for Formidable forms

Take a look at a few great form design examples from the Formidable community showcase.