WPForms has limited built-in styling options, which makes it difficult to match forms to your website design. The External Form Styler block in Nexter Blocks gives you full control over every visual element of a WPForms form without writing any CSS.
Best Used For:
- Business and agency sites that need contact or inquiry forms styled to match a custom brand identity
- WooCommerce and membership sites using WPForms for order requests, registration, or support forms
- Landing pages where form appearance, including submit button color and input field style, must match the page design
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.
Required Setup
- WPForms Plugin installed and activated.
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the External Form Styler block is activated, to verify this visit Nexter → Blocks → and Search for External Form Styler and activate.
Learn via Video Tutorial:
How to activate and use the External Form Styler Block for WPForms?
Go to
- Nexter → Blocks
- Search the block name and turn on the toggle.
Key features
- Style input fields: Set typography, color, background, border, padding, margin, and placeholder color for text, email, URL, number, and telephone fields.
- Style label and description: Manage the styles of form labels and descriptions separately so each element is visually distinct.
- Style Textarea: Style the text area of your form to match your input fields for a consistent look across all form fields.
- Checkbox/Radio button styling: Set checked and unchecked colors and backgrounds to match your site design for checkboxes and radio buttons.
- Style File Upload button: Add a custom style to the file upload button so it fits your form layout.
- Outer styling: Style the form outer section rows to control spacing and structure around form fields.
- Style the Submit button: Set typography, color, background, border, and padding on the submit button to match your website design.
- Style form messages: Set styles for form error messages, success messages, and validation messages so feedback is clearly visible to users.
- Adjust the form width: Set the overall width of the form to fit any layout, from a narrow sidebar column to a full-width section.
Form
Make sure you have at least one form in WPForms.
Once the block is added to the page go to Form > Form Type and from the dropdown choose WPForm.
After that from the Select Form dropdown choose your form.
You can set the overall alignment of the form from Alignment.
Styling Input Field of WPForms in WordPress
The External Form Styler block includes all the necessary styling options for input fields. To style the WPForms input fields, go to Style > Input Field.
From here you can style the Input Fields typography, color, background, border, padding, margin, placeholder color, etc.
Styling Text area of WPForms in WordPress
To style the text area of your WPForms form, use the External Form Styler block in Nexter Blocks.
To style the Text area, go to the TextArea Field in the Style tab. From here you can manage typography, color, background, padding, margin etc.
Styling Submit Button of WPForms in WordPress
WPForms does not include options to customize the Submit button appearance. The External Form Styler block in Nexter Blocks adds a full set of styling controls for the Submit button.
Using the options available in the Submit/Send Button section you can create gradient buttons, transparent buttons, border-only buttons, etc.
Styling Radio Button or Checkbox of WPForms in WordPress
WPForms has limited options for styling radio buttons and checkboxes. The External Form Styler block in Nexter Blocks adds styling controls for those field types. For a similar styling setup with another form plugin, see How to Style Everest Forms in WordPress (NO CSS).
You can customize some of the styles from the Checkbox/Radio Field under the Style tab. From here you can manage typography, checked color, unchecked color, checked background color, unchecked background color, etc.
WPForms allows you to use custom images as options for your radio buttons and checkboxes.
The External Form Styler block has the option to style those image options as well.
Styling File Upload Button of WPForms in WordPress
The styling options for the File Upload button in WPForms are limited. The External Form Styler block applies a custom style to the File Upload button. You can customize the style from the File/Upload Field section of the Style tab.
Also, check How to Style Contact Form 7 in WordPress.
