{"id":104540,"date":"2023-02-15T17:48:36","date_gmt":"2023-02-15T12:18:36","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104540"},"modified":"2023-02-15T17:48:36","modified_gmt":"2023-02-15T12:18:36","slug":"customize-everest-forms-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/customize-everest-forms-in-elementor\/","title":{"rendered":"How to Customize Everest Forms in Elementor (NO CSS)"},"content":{"rendered":"\n<p>For business owners, flexibility and customization are essential. Taking the time to adjust every aspect of your website is key to creating a tailored experience for your customers. This is especially true when it comes to your forms, which are often the first and last interaction customers have with your website. With its user-friendly drag and drop interface, Elementor enables users to customize their website easily and with the combination of Everest Forms, users can create beautiful forms with simple drag and drop.<\/p>\n\n\n\n<p>However, customizing the style of the Everest Forms according to your requirement can be bit daunting as it doesn\u2019t offer any adjustable styling options.<\/p>\n\n\n\n<p>Here we will show you, with the help of The Plus Addons for Elementor Everest Form widget, how you can customize the Everest Forms to fit your needs.<\/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\/everest-forms?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\/everest-forms\/\" target=\"_blank\" rel=\"noreferrer noopener\">Everest Forms 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 Everest Form widget is activated, to verify this visit Plus Settings \u2192 and Search for Everest Form and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate and use the Everest Form 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> &nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"484\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate-1024x484.png\" alt=\"everest form activate\" class=\"wp-image-104541\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate-1024x484.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate-300x142.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate-768x363.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate-1536x726.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate-600x284.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-activate.png 1915w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once the Everest Form widget is activated add the widget to the page and make sure you have at least one form in the Everest Forms.<\/p>\n\n\n\n<p>Go to <strong>Everest Form<\/strong> &gt; <strong>Select Form<\/strong> and choose your form from the dropdown list.<\/p>\n\n\n\n<p>Now you should be able to see the form in the Elementor editor with some basic stylings applied.<\/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>Easily style input fields<\/strong>: You can easily style the form input fields like text, email, number, phone etc.<\/li>\n\n\n\n<li><strong>Style label<\/strong>: You can manage the style of form labels.<\/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 of your forms.<\/li>\n\n\n\n<li><strong>Style the Submit button<\/strong>: Style the submit button according to your website design.<\/li>\n\n\n\n<li><strong>Form row styling<\/strong>: You can style the form rows.<\/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 and error messages.<\/li>\n\n\n\n<li><strong>Adjust the form width<\/strong>: You can easily adjust the overall width fo the form.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Input Field of Everest Forms in Elementor<\/h2>\n\n\n\n<p>Styling the Input Fields of the Everest Forms with the help of The Plus Addons for Elementor Everest Form widget is like a breeze. You will find all the necessary styling options like typography, colour, background, border, padding, margin, placeholder colour etc. to make stylish Input Fields.<\/p>\n\n\n\n<p>To style, the Everest Forms Input Fields, go to the <strong>Style<\/strong> tab <strong>Input Fields Styling<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"210\" height=\"870\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-input-styling.png\" alt=\"everest form input styling\" class=\"wp-image-104542\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Text area of Everest Forms in Elementor<\/h2>\n\n\n\n<p>The Plus Addons for Elementor Everest Form widget gives you all the styling options for the Text Area that you would get with Input Fields to make equally beautiful text areas in your Everest Forms.<\/p>\n\n\n\n<p>You can find all the styling options under the <strong>Textarea Fields Styling<\/strong> section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"794\" height=\"593\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-textare-preview.gif\" alt=\"everest form textare preview\" class=\"wp-image-104543\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Submit Button of Everest Forms in Elementor<\/h2>\n\n\n\n<p>You can seamlessly style the Everest Forms Submit Button when using The Plus Addons for Elementor Everest Form widget. With just a few clicks, you can create amazing-looking Submit Buttons. You can set different normal and hover states for your button to add some extra interactivity to the form.<\/p>\n\n\n\n<p>You\u2019ll find all the styling options under <strong>Submit\/Send Button <\/strong>section of the <strong>Style<\/strong> tab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Radio Button or Checkbox of Everest Forms in Elementor<\/h2>\n\n\n\n<p>As soon as you add an Everest Forms through The Plus Addons for Elementor Everest Form widget, it will apply its default styling to all the Radio Buttons and Checkboxes. It will add a unique look and feel to the Radio Buttons and Checkboxes.<\/p>\n\n\n\n<p>But if you want, you can further customize the style with the options available under the <strong>Checkbox\/Radio Field <\/strong>section. It gives you the option to customize the style of Radio Buttons and Checkboxes separately so they can have different styles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"874\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-checkbox-styling.png\" alt=\"everest form checkbox styling\" class=\"wp-image-104544\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-checkbox-styling.png 240w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/everest-form-checkbox-styling-82x300.png 82w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/customize-ninja-forms-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Customize Ninja Forms in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104545,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[546,527],"class_list":["post-104540","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\/104540","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=104540"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104540\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104545"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104540"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}