Contact form 7 css styling contact form 7 forms (video), how to style contact form 7 forms in wordpress

Liên hệ Form 7 is an incredibly popular plugin for building WordPress liên hệ forms with over 3 million active installs. It supports the building of forms without HTML coding. Forms can include CAPTCHAs, file upload, & quiz fields.

Bạn đang xem: Contact form 7 css styling contact form 7 forms (video), how to style contact form 7 forms in wordpress

While Liên hệ Form 7’s mặc định markup and style are fine for most basic contact forms, often you’ll want lớn change it.

Improving Liên hệ Form 7 Accessibility: A Quichồng Note

One plugin I recommover installing shortly after adding Contact Form 7 is Joe Dolson’s Contact Form 7: Accessible Defaults.

This changes the structure of the default size to lớn make it more accessible by associating size labels with the form controls.

It also adds the shortcode above the form so that if there’s an error submitting the form it’s reported above sầu the khung itself.

For the standard size, the code generated by the plugin is:

Loading gist raewrites/e58f08409a85304f65e616ae21e0eb15

If you’re interested in finding out more about accessibility, check out The Ultimate Guide to Accessibility and WordPress.

Easy Liên hệ Form 7 Styling With Plugins

If you want a quiông chồng khung style, there are plugins that can vày the hard work so you don’t have sầu khổng lồ.

Liên hệ Form 7 Style

Liên hệ Form 7 Style has a number of premix styles lớn choose from including Valentine’s & Christmas styles.

Six of the styles available in the Liên hệ Form 7 Style plug.

For Twenty Fifteen theme users, there’s also a style khổng lồ match.

To apply a style, go lớn Liên hệ Styles > Quick Edit, check the form you want to apply the style khổng lồ và click Update.

The Valentine Style liên hệ form.

Contact Form 7 Style Custom Styles

Add your own styles and see the results on the fly by going to Liên hệ Styles > Add New.

Using this tool you can customize just about any aspect of your form, including:

MarginsBordersPaddingColour và background – including hover statesFonts – a range of Google Fonts are included

When you add a value khổng lồ (for example) padding, the editor sensibly copies across the value you have chosen, generating the same value for top, right, bottom và left padding. You can, of course, adjust the values. There’s a dropdown to lớn choose between pixels, em or % too.

The custom style you can create also stretches khổng lồ error and success messages too.

The pnhận xét area is at the bottom of the screen; scroll down to lớn see your changes.

Here’s my finished size, using the Cherry Swash font:

Liên hệ Form 7 styling with the Cherry Swash fonts.

Contact Form 7 Skins

To use Contact Form 7 Skins, create a new contact khung & scroll down the page khổng lồ the Skins section. There you can choose a template & a style for your khung.

Xem thêm: Can I Download Games To My Nintendo 3Ds Rom & Cia, How To Buy Games

Templates include forms for events, registration, và suggestion.

Some of the available templates in Liên hệ Form 7 Skins
Some of the available styles in Contact Form 7 Skins

Here’s what the Survey khung looks lượt thích with Topaz styling using the Twenty Fifteen theme.

Liên hệ Form 7 skin

Material Design For Contact Form 7

This plugin styles forms in the Material Design style.

The plugin suggests that you remove the mặc định khung & use its shortcodes.

Here is an example with Hestia theme. Note the floating label when the cursor is moved to a particular size field.

Material Design for Contact Form 7 example

A style customizer is available in the plugin’s Pro version.

Styling Liên hệ Form 7 to Match Your Theme

Most of the time, Liên hệ Form 7 will inherit styling from the theme selected. See this example with Coral Dark theme.

Contact Form 7 inherits the dark form fields and button with light labels from Coral Dark theme

A Bespoke Contact Form 7 Design for ColorMag Theme

Here is the size with no styling applied. It inherits the xanh button colour from ColorMag theme.

Contact Form 7 in ColorMag theme, no styling applied.

I started by uploading a phokhổng lồ lớn use as a background image for the size & changing the code for the khung labels from grey to lớn white with a blue text-shadow.

The next changes were to increase the margins between the form labels & form fields, change the submit button hover color and add a border when the cursor enters the form fields.

The display of error/success messages when the form is submitted needed lớn be changed too so they would show up properly.

The spinning GIF when the form is submitted didn’t show up too well so I found an alternative at & referenced it with CSS.

This is the final form:

Custom Colour Liên hệ Form 7 for ColorMag theme

And this is the code:

Loading gist abrightclearweb/7b5aa6785e5312b07aded44cbe41d151

Customizing Liên hệ Form 7 With the Right Tools

For a miễn phí plugin, Liên hệ Form 7 is powerful, especially when you start styling it with CSS. Hopefully, the plugins in this tutorial will help you get started with your own styling. The great thing about these plugins is that they’re không tính phí, so you can give sầu them a go & see how they work before committing.

And if you’re interested in taking things to the next màn chơi, kiểm tra out our post on how to lớn extover Liên hệ Form even further.

Free VideoWhy 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)Learn how lớn use Google PageSpeed Insights khổng lồ mix realistic goals, improve site tốc độ, and why aiming for a perfect 100 is the WRONG goal.
Watch the video
Share this article
Claire Brotherton
Claire Brotherton A website developer and accessibility advocate based in Edinburgh, Scotl&, Claire works with businesses, nonprofits & entrepreneurs who are passionate about access & inclusion.
Do you use Contact Form 7? Which approach do you prefer for styling liên hệ forms - use a plugin, or vì it yourself? Let us know in the comments below.
What is WPMU DEV?



Related và Most Recent Posts

Getting Started With Contact Form Plugins for WordPress


Get fresh WPhường updates directly lớn your inbox.

Your turn... Cancel reply


Create a không tính tiền tài khoản to post your comment

No credit thẻ required or any silliness lượt thích that, we’ll take you straight khổng lồ your comment


2x.png?v=1.1 2x" width="176" height="101" />

2x.png?v=1 2x" alt width="411" height="271" />

Take me lớn the video

Your tin nhắn address