{"id":118383,"date":"2023-02-15T17:30:23","date_gmt":"2023-02-15T12:00:23","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104515"},"modified":"2023-02-15T17:30:23","modified_gmt":"2023-02-15T12:00:23","slug":"customize-wpforms-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/customize-wpforms-in-elementor\/","title":{"rendered":"How to Customize WPForms in Elementor (NO CSS)"},"content":{"rendered":"\n<p>When it comes to creating a website, the design is key. You want to ensure that visitors enjoy a seamless visual experience that reflects your brand and encourages them to explore further when they come to your site. Elementor is a powerful page building tool that allows users to create stunning websites with ease. When used in conjunction with WPForms, a popular WordPress plugin, users can easily create powerful forms.<\/p>\n\n\n\n<p>But customizing the WPForms according to the site design can be a challenge because it doesn\u2019t have any styling options.<\/p>\n\n\n\n<p>Here we will show you how you can customize the WPForms with the help of The Plus Addons for Elementor WP Forms widget.<\/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:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/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<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\">WPForms Plugin<\/a> installed and activated.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">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 Plus Settings \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 Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-activate-1024x484.png\" alt=\"wpforms activate\" class=\"wp-image-104517\"\/><\/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<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<h2 class=\"wp-block-heading\">Key features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Easily style input fields<\/strong>: You can easily style the form input fields like text, email, number etc.<\/li>\n\n\n\n<li><strong>Style label and description<\/strong>: Easily manage the styles of form labels and descriptions separately.<\/li>\n\n\n\n<li><strong>Style Text area<\/strong>: Easily style the Text area of your form.<\/li>\n\n\n\n<li><strong>Checkbox\/Radio button styling<\/strong>: Manage the styling of checkboxes and radio buttons even with image choices.<\/li>\n\n\n\n<li><strong>Style the Submit button<\/strong>: Easily style the submit button to match your website design.<\/li>\n\n\n\n<li><strong>Form row styling<\/strong>: You can easily style the form rows to give a unique look to your form.<\/li>\n\n\n\n<li><strong>Style form container<\/strong>: Manage the styling of the main form container.<\/li>\n\n\n\n<li><strong>Style form messages<\/strong>: You can easily style the form success, validation or error messages to match your site design.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Input Field of WPForms in Elementor<\/h2>\n\n\n\n<p>In a form, you\u2019ll find many Input Fields like text, email, numbers etc. so if you can give them a unique look your form will automatically stand apart from a normal-looking form.<\/p>\n\n\n\n<p>The Plus Addons for Elementor WP Forms widget gives you all the styling options needed to make your input fields stand out.<\/p>\n\n\n\n<p>With the styling options, you can make those modern-looking input fields with just an underline or you can have just borders or background on them.<\/p>\n\n\n\n<p>To style, the WP Forms Input Fields, go to the <strong>Style<\/strong> tab <strong>Input Fields Styling<\/strong>.<\/p>\n\n\n\n<p>From here, you can style the Input Fields typography, colour, background, border, padding, margin, placeholder colour etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"207\" height=\"921\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-input-styling.png\" alt=\"wpforms input styling\" class=\"wp-image-104518\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Text area of WPForms in Elementor<\/h2>\n\n\n\n<p>Now with your form Input Fields styled, you would also like to have a similar style for the Text areas of your form.<\/p>\n\n\n\n<p>The Plus Addons for Elementor WP Forms widget gives you all the styling options for the Text area that you would get for the Input Fields so that you can have a similar style across your form.<\/p>\n\n\n\n<p>Like if you are using only an underline border style for Input Fields, you can easily have the same style for the Text area as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"793\" height=\"487\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-field-preview.gif\" alt=\"wpforms field preview\" class=\"wp-image-104519\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Submit Button of WPForms in Elementor<\/h2>\n\n\n\n<p>You can make beautiful looking Submit Buttons for your WPForms with the help of The Plus Addons for Elementor WP Forms widget.<\/p>\n\n\n\n<p>You can make your Submit Button full width or can have a custom width to match your form style.<\/p>\n\n\n\n<p>You can have a gradient background for your Submit Button or you can set transparent background with a border or you can even create a unique shape using border radius, there are lots of possibilities.<\/p>\n\n\n\n<p>You will find all the styling options under <strong>Submit\/Send Button <\/strong>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"310\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling-1024x310.png\" alt=\"wpforms submit styling\" class=\"wp-image-104520\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling-1024x310.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling-300x91.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling-768x232.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling-1536x465.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling-600x182.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-submit-styling.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Radio Button or Checkbox of WPForms in Elementor<\/h2>\n\n\n\n<p>Even though the WPForms adds some styling to the default checkboxes and radio button, their styles are inconsistent across browsers. With the help of The Plus Addons for Elementor WP Forms widget, you can set a unique and consistent design for the Checkboxes and Radio Buttons.<\/p>\n\n\n\n<p>As you know, the power of WPForms allows you to use custom images as options for your Radio Buttons and Checkboxes.<\/p>\n\n\n\n<p>Our WP Forms widget allows you to style those image options as well.<\/p>\n\n\n\n<p>You can style the Checkboxes and Radio Buttons separately from the <strong>Checkbox\/Radio Field <\/strong>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"210\" height=\"917\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-styling.png\" alt=\"wpforms checkbox styling\" class=\"wp-image-104522\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-styling.png 210w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-styling-69x300.png 69w\" sizes=\"(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:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-radio-styling.png\" alt=\"wpforms checkbox radio styling\" class=\"wp-image-104523\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-radio-styling.png 795w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-radio-styling-300x239.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-radio-styling-768x612.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/wpforms-checkbox-radio-styling-600x478.png 600w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/customize-contact-form-7-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Customize Contact Form 7 in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"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:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/118383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=118383"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/118383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104524"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=118383"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=118383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}