{"id":118383,"date":"2023-02-15T17:30:23","date_gmt":"2023-02-15T12:00:23","guid":{"rendered":"https:\/\/theplusaddons.com\/?post_type=documents&#038;p=104515"},"modified":"2026-04-22T12:10:08","modified_gmt":"2026-04-22T06:40:08","slug":"customize-wpforms-in-elementor","status":"publish","type":"documents","link":"https:\/\/theplusaddons.com\/docs\/customize-wpforms-in-elementor\/","title":{"rendered":"How to Customize WPForms in Elementor (NO CSS)"},"content":{"rendered":"\n<p>WPForms does not include built-in visual styling options, which means forms inherit default browser styles that rarely match your site&#8217;s design. The WP Forms widget in The Plus Addons for Elementor gives you full control over every form element: input fields, labels, text areas, checkboxes, radio buttons, and the submit button, all from the Elementor editor without writing a single line of CSS.<\/p>\n\n\n\n<p>Unlike Elementor&#8217;s built-in Form widget, WPForms is a standalone form builder with its own submission management, conditional logic, email notifications, and third-party integrations. Using the WP Forms widget in The Plus Addons for Elementor, you get the full form-building power of WPForms with complete visual control over how the form looks in Elementor.<\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/theplusaddons.com\/elementor-widget\/wpforms?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Best Used For:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Contact and inquiry pages where the form must match a branded design system<\/li>\n\n\n\n<li>Lead generation landing pages where submit button style and visibility directly affect conversions<\/li>\n\n\n\n<li>WooCommerce sites using WPForms for order forms, quote requests, or custom checkout fields<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wpforms-lite\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WPForms Plugin<\/a> installed and activated.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>Make sure the WP Forms widget is activated, to verify this visit The Plus Addons \u2192 Widgets \u2192 and Search for WP Forms and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate and use the WP Forms Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Addons <\/strong>\u2192<strong> Widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation-1024x360.png\" alt=\"from\" class=\"wp-image-184065\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation-1024x360.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation-300x106.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation-768x270.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation-1536x540.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation-600x211.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wp-forms-activation.png 1899w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Make sure you have at least one form in the WPForms then add the WP Forms widget on the page and go to <strong>WPForms<\/strong> &gt; <strong>Select Form<\/strong> and choose your form from the dropdown list.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: If your form doesn\u2019t show up in the Elementor editor, enable the <\/em><strong><em>Load Assets Globally<\/em><\/strong><em> checkbox from <\/em><strong><em>Dashboard<\/em><\/strong><em> &gt; <\/em><strong><em>WPForms<\/em><\/strong><em> &gt; <\/em><strong><em>Settings<\/em><\/strong><em>.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style input fields<\/strong>: Control typography, color, background, border, padding, margin, and placeholder color for text, email, number, and other input field types.<\/li>\n\n\n\n<li><strong>Style label and description<\/strong>: Manage the appearance of field labels and descriptions separately from input fields, so each element carries its own visual weight.<\/li>\n\n\n\n<li><strong>Style text area<\/strong>: Apply the same styling controls available for input fields to text area fields, keeping a consistent look across all form fields.<\/li>\n\n\n\n<li><strong>Checkbox and radio button styling<\/strong>: Override inconsistent browser defaults with a uniform design for checkboxes and radio buttons, including image choice options.<\/li>\n\n\n\n<li><strong>Style the submit button<\/strong>: Set the button width, background type (solid, gradient, or transparent), border, shape, and typography to match your site&#8217;s design.<\/li>\n\n\n\n<li><strong>Form row styling<\/strong>: Control the spacing and visual separation between form rows for a structured, readable layout.<\/li>\n\n\n\n<li><strong>Style form container<\/strong>: Set background color, border, border radius, and padding on the outer form wrapper.<\/li>\n\n\n\n<li><strong>Style form messages<\/strong>: Apply consistent styling to success, validation, and error messages so they fit your site rather than using default browser or WPForms styles.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Input Field of WPForms in Elementor<\/h2>\n\n\n\n<p>When a form contains multiple input types, text, email, phone, and number, default browser styles often produce inconsistent field heights, borders, and font sizes across those fields. The WP Forms widget in The Plus Addons for Elementor consolidates all input field styling into a single panel inside the Elementor editor.<\/p>\n\n\n\n<p>To style the input fields, go to the <strong>Style<\/strong> tab and select <strong>Input Fields Styling<\/strong>.<\/p>\n\n\n\n<p>From here, set the typography, text color, background color, border, padding, margin, and placeholder color for all input fields. Use a bottom-border-only style when you want a minimal underline look that suits flat design pages. Use a solid background with rounded corners when the form sits on a dark-background section and field boundaries need to be clearly visible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"207\" height=\"921\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-input-styling.png\" alt=\"wpforms input styling\" class=\"wp-image-104518\" title=\"\"><\/figure>\n\n\n\n<p>If you want to show a WPForms form inside a modal rather than inline on the page, the <a href=\"https:\/\/theplusaddons.com\/docs\/popup-builder-elementor-widget-settings-overview\/\">Popup Builder widget in The Plus Addons for Elementor<\/a> lets you trigger the form on button click without the user leaving the current page. This is useful when the form is a lead capture or newsletter signup that should not disrupt the page flow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Text area of WPForms in Elementor<\/h2>\n\n\n\n<p>Text area fields are taller and more prominent than standard input fields, which makes a visual mismatch between them more noticeable on the finished page.<\/p>\n\n\n\n<p>The WP Forms widget gives you the same styling controls for text area fields that you get for input fields. Go to the <strong>Style<\/strong> tab and find the text area options. Set the typography, text color, background, border, padding, and placeholder color to match your input field settings.<\/p>\n\n\n\n<p>This is useful when your form includes both short input fields and a long message field. Matching both sets of controls produces a consistent, intentional form design rather than one that looks assembled from separate elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"793\" height=\"487\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-field-preview.gif\" alt=\"wpforms field preview\" class=\"wp-image-104519\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Submit Button of WPForms in Elementor<\/h2>\n\n\n\n<p>The submit button is the most visible interactive element on any form. A button that blends into the page background reduces form completions, and WPForms does not include built-in submit button styling.<\/p>\n\n\n\n<p>Go to the <strong>Style<\/strong> tab and open the <strong>Submit\/Send Button<\/strong> section.<\/p>\n\n\n\n<p>Set the button to full width when your form is narrow or when you want the button to span the entire form column. Use a custom width when the button sits alongside other elements on the page. Set a gradient background when the button needs to stand out against a light-colored section. Use a transparent background with a solid border for a minimal outlined style that matches bordered input fields. Increase the border radius to create a pill-shaped button, or set it to zero for a sharp rectangular shape. Hover state options let you set a different background color and border when the user moves the cursor over the button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"310\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling-1024x310.png\" alt=\"wpforms submit styling\" class=\"wp-image-104520\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling-1024x310.png 1024w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling-300x91.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling-768x232.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling-1536x465.png 1536w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling-600x182.png 600w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-submit-styling.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If you use Gravity Forms instead of WPForms, see <a href=\"https:\/\/theplusaddons.com\/docs\/customize-gravity-forms-in-elementor\/\">How to Customize Gravity Forms in Elementor<\/a> for the equivalent styling options available through The Plus Addons for Elementor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Radio Button or Checkbox of WPForms in Elementor<\/h2>\n\n\n\n<p>Checkboxes and radio buttons are among the most visually inconsistent form elements across browsers. A checkbox that renders correctly in Chrome may appear as a plain square in Safari, making the form look unfinished to a portion of your visitors.<\/p>\n\n\n\n<p>The WP Forms widget replaces the browser-default checkbox and radio button rendering with a custom design that stays consistent across all major browsers. Go to the <strong>Style<\/strong> tab and open the <strong>Checkbox\/Radio Field<\/strong> section.<\/p>\n\n\n\n<p>From here, set the size, checked color, border, and background for checkboxes and radio buttons. You can style them separately, for example a square checkbox with a custom checkmark color alongside a round radio button with a filled selected state.<\/p>\n\n\n\n<p>WPForms supports image choices for radio buttons and checkboxes, where users select a product image or icon instead of a text label. The WP Forms widget lets you style those image choice containers as well, including border, padding, selected-state overlay, and image alignment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"210\" height=\"917\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-styling.png\" alt=\"wpforms checkbox styling\" class=\"wp-image-104522\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-styling.png 210w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-styling-69x300.png 69w\" sizes=\"auto, (max-width: 210px) 100vw, 210px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"634\" src=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-radio-styling.png\" alt=\"wpforms checkbox radio styling\" class=\"wp-image-104523\" title=\"\" srcset=\"https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-radio-styling.png 795w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-radio-styling-300x239.png 300w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-radio-styling-768x612.png 768w, https:\/\/theplusaddons.com\/wp-content\/uploads\/2023\/02\/wpforms-checkbox-radio-styling-600x478.png 600w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p>The Plus Addons for Elementor includes form styler widgets for other popular form plugins. If you use Contact Form 7, see <a href=\"https:\/\/theplusaddons.com\/docs\/customize-contact-form-7-in-elementor-no-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Customize Contact Form 7 in Elementor<\/a>.<\/p>\n","protected":false},"author":2115,"featured_media":104524,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[546,527],"class_list":["post-118383","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-form-stylers","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/118383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/users\/2115"}],"replies":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/comments?post=118383"}],"version-history":[{"count":0,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/documents\/118383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media\/104524"}],"wp:attachment":[{"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/media?parent=118383"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/theplusaddons.com\/wp-json\/wp\/v2\/docs?post=118383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}