--- title: "How to Style Contact Form 7 in WordPress (NO CSS)" url: https://nexterwp.com/docs/style-contact-form-7-in-wordpress/ date: 2023-02-14 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "Contact Form 7 produces a working form in about a minute and a form that looks like 2009 in about the same time. The External Form Styler takes the form..." image: https://nexterwp.com/wp-content/uploads/2024/05/style-contact-form-7-in-wordpress-1024x519.jpg word_count: 599 --- # How to Style Contact Form 7 in WordPress (NO CSS) ## Key Takeaways - External Form Styler works in Nexter Blocks free and Nexter Blocks Pro, and it requires the Contact Form 7 plugin to style an existing form instead of creating one. - Contact Form 7 keeps its validation, mail, and spam protection unchanged because External Form Styler only wraps the output with Nexter styling controls for labels, fields, buttons, and spacing. - External Form Styler shows a real element inside its own styling wrapper on a published page, and Contact Form 7 is the only form type with the extra label-style option. - Contact Form 7 missing or inactive makes the block print the literal shortcode as plain text, while an unchosen form shows the message “Please select Form.” Contact Form 7 produces a working form in about a minute and a form that looks like 2009 in about the same time. The External Form Styler takes the form you already built and puts Nexter's styling controls around it, so it can match the rest of the page. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-contact-form-stylers/) ## Before You Start - **Edition:** Free — the External Form Styler works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** External Form Styler, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Also required:** the Contact Form 7 plugin, installed and active. This block styles that plugin's form — it does not create forms of its own. ## Video Tutorial https://www.youtube.com/watch?v=fOP2g1LLDWg&t ## Steps - Build your form in **Contact** > **Contact Forms** as usual. ![Enabling the External Form Styler block in Nexter > Blocks](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-activation-new-1-1024x345.png) - Add the **External Form Styler** block to the page. ![Adding the External Form Styler block](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-7.png) - Set **Form Type** to **Contact Form 7** and choose your form. ![Choosing the form type and the form](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-input-field.png) - Use the style controls for labels, fields and the submit button. ![The field styling controls](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-checkbox-radio-field.png) - Check the result on the published page. ![A styled Contact Form 7 form](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-file-upload.png) > *With no form chosen the block renders its own **"Please select Form"** message rather than an empty space — measured, so a half-configured block is easy to spot.* ## How It Behaves This block does not build forms. It renders the form your form plugin already provides and gives you Nexter's styling controls over it — labels, fields, buttons and spacing — without writing CSS. - Measured on a published page with Contact Form 7 active: the block rendered the real form — a genuine `
` element with all its fields — inside its own styling wrapper.- **Contact Form 7 is the only form type with the extra label-style option.** Measured: the CF7 wrapper carries an additional class for the label style you choose, which the other four form types do not get.- The form keeps working exactly as Contact Form 7 set it up — validation, mail and spam protection are unchanged, because the block only wraps and styles the output.- Your styling lives on the block, so the same form can look different on two different pages. > ***If the form plugin is not active, the page shows the shortcode as plain text.** Measured on a published page with the plugin removed: the block printed the literal shortcode instead of a form. If you see square brackets where your form should be, the form plugin is missing, deactivated, or the form was deleted.* ## Limitations - **The block styles a form, it does not create one** — the fields, validation and email settings all stay in Contact Form 7.- Styling applies to that block instance; placing the same form elsewhere means styling it there too.- Very heavily customised CF7 markup may not match every style control, since the controls target Contact Form 7's standard output.- If you want a form built entirely in the block editor instead, use [the Nexter Form block](https://nexterwp.com/docs/add-a-form-in-wordpress/). ## Troubleshooting ### The page shows [contact-form-7 id=…] as text Contact Form 7 is not active. Measured: with the plugin removed, the block prints the shortcode as plain text. Install or activate Contact Form 7 and the form appears. ### It says "Please select Form" No form has been chosen in the block yet. Pick one from the form list. ### My styling is not applying Check **Form Type** is set to Contact Form 7 — the styling controls target that plugin's markup, so the wrong type means the selectors do not match. ### The form looks right but does not send Sending is Contact Form 7's job, not the block's. Check the form's Mail tab and your site's email delivery — the block does not touch either. ## Related Docs - [Style WPForms](https://nexterwp.com/docs/style-wpforms-in-wordpress/)- [Style Gravity Forms](https://nexterwp.com/docs/style-gravity-forms-in-wordpress/)- [Style Ninja Forms](https://nexterwp.com/docs/style-ninja-forms-in-wordpress/)- [Style Everest Forms](https://nexterwp.com/docs/style-everest-forms-in-wordpress/)