--- title: "How to Style Gravity Forms in WordPress (NO CSS)" url: https://nexterwp.com/docs/style-gravity-forms-in-wordpress/ date: 2023-02-14 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "Gravity Forms is built for complicated forms, and complicated forms are exactly the ones that look out of place when they inherit the plugin's own styling. The External Form Styler..." image: https://nexterwp.com/wp-content/uploads/2024/05/style-gravity-forms-in-wordpress-1024x519.jpg word_count: 565 --- # How to Style Gravity Forms in WordPress (NO CSS) ## Key Takeaways - External Form Styler funciona en Nexter Blocks (free) y en Nexter Blocks Pro, y requiere Gravity Forms activo para estilizar un formulario ya creado sin escribir CSS. - Gravity Forms es el único tipo de formulario con interruptor de título y descripción, y el bloque genera el shortcode propio de Gravity Forms para el formulario seleccionado. - El bloque no crea formularios ni cambia campos, lógica condicional, formularios multipágina, entradas o notificaciones; si Gravity Forms no está activo, la página muestra el shortcode como texto plano. Gravity Forms is built for complicated forms, and complicated forms are exactly the ones that look out of place when they inherit the plugin's own styling. The External Form Styler wraps the form you already built and gives you Nexter's styling controls over it, plus a switch for the form's title and description. [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 Gravity Forms plugin, installed and active. This block styles that plugin's form — it does not create forms of its own. ## Video Tutorial https://youtu.be/fOP2g1LLDWg?t=410 ## Steps - Build your form in **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.webp) - 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-gravity-form-contact.webp) - Set **Form Type** to **Gravity Forms** and choose your form. ![Choosing Gravity Forms as the form type](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-input-field-5.webp) - Decide whether to show the form's **title and description**. ![The title and description switch](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-gravity-form-submit-send-button.webp) - Style the labels, fields and button, then check the published page. ![A styled Gravity Forms form](https://nexterwp.com/wp-content/uploads/2023/02/external-form-styler-contact-form-checkbox-radio-field-4.webp) > *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. - **Gravity Forms is the only form type with a title and description switch.** Measured in the shortcode the block generates: switching it on asks Gravity Forms for the title and the description, switching it off asks for neither. The other four form types have no such option.- Choosing Gravity Forms makes the block build that plugin's own shortcode for the form you selected — measured on a published page.- The output is wrapped in a Gravity Forms-specific container, which the block's style controls target.- Gravity Forms keeps handling everything else — fields, conditional logic, multi-page forms, entries and notifications are unchanged. > ***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.** Fields and logic stay in Gravity Forms.- The title and description switch is all-or-nothing — it cannot show one without the other.- Multi-page forms, and fields added by Gravity Forms add-ons, may not match every style control.- The label-style option is Contact Form 7 only — measured, it is not applied here. ## Troubleshooting ### The page shows the gravityform shortcode as text Gravity Forms is not active. Measured with no form plugin present: the block prints the shortcode as plain text instead of a form. ### The form title is showing twice You probably have a heading above the block as well as the form's own title. Switch the block's title and description off, or remove the separate heading. ### 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 Gravity Forms — a mismatched type builds a different plugin's shortcode and the selectors will not match. ## Related Docs - [Style Contact Form 7](https://nexterwp.com/docs/style-contact-form-7-in-wordpress/)- [Style WPForms](https://nexterwp.com/docs/style-wpforms-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/)