Skip to content

How to Style WPForms in WordPress (NO CSS)

Key Takeaways

  • External Form Styler envuelve un formulario ya creado y le da a Nexter controles de estilo sobre etiquetas, campos, botones y espaciado, sin escribir CSS.
  • WPForms mantiene el comportamiento del formulario, incluidas las fields, conditional logic, notifications y entries, mientras el bloque solo aplica el estilo por instancia en cada página.
  • Nexter Blocks Free incluye External Form Styler, que se activa en Nexter > Blocks y requiere el plugin WPForms instalado y activo; si no hay formulario elegido muestra “Please select Form” y si WPForms no está activo imprime el shortcode como texto plano.
Table of Contents

WPForms gets a form built quickly, and its default styling is deliberately neutral so it fits anywhere — which also means it rarely matches anything exactly.

The External Form Styler wraps the form you already built and gives you Nexter’s styling controls over it.

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 WPForms plugin, installed and active. This block styles that plugin’s form — it does not create forms of its own.

Video Tutorial

Steps

  1. Build your form in WPForms as usual.
Nexter Blocks screen with the External Form Styler block turned on and outlined in the Blocks list
  1. Add the External Form Styler block to the page.
External Form Styler block, Form panel in the Layout tab
  1. Set Form Type to WPForms and choose your form.
External Form Styler block, Input Field panel in the Style tab
  1. Style the labels, fields and button.
External Form Styler block, Checkbox Radio Field panel in the Style tab
  1. Check the published page.
External Form Styler block, File Upload Field panel in the Style tab

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.

  • Choosing WPForms 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 WPForms-specific container so the block’s style controls target the right markup.
  • Form behaviour stays with WPForms — fields, conditional logic, notifications and entries are all unchanged.
  • The styling belongs to the block, so the same form can be styled differently on 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. Fields and logic stay in WPForms.
  • Styling applies per block instance, not to the form everywhere it appears.
  • Heavily customised WPForms templates may not match every control, since the controls target that plugin’s standard markup.
  • The label-style option is specific to Contact Form 7 — measured, it is not applied to other form types. See the Contact Form 7 doc.

Troubleshooting

The page shows [wpforms id=…] as text

WPForms is not active. Measured with the plugin absent: the block prints the shortcode as plain text instead of a form. Install or activate WPForms.

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 really is set to WPForms — the wrong type builds a different plugin’s shortcode and the style selectors will not match.

Entries are not being saved

Entries are WPForms’ responsibility, not the block’s. Check the form’s own settings; the block only wraps and styles the output.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!