{"id":8643,"date":"2024-01-05T17:54:33","date_gmt":"2024-01-05T12:24:33","guid":{"rendered":"https:\/\/wpzita.com\/?p=8643"},"modified":"2024-01-13T18:07:06","modified_gmt":"2024-01-13T12:37:06","slug":"how-to-set-up-contact-form-with-elementor","status":"publish","type":"post","link":"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/","title":{"rendered":"How to set up Contact Form with Elementor"},"content":{"rendered":"<p class=\"wp-block-paragraph\">In this article, we will guide you, on how to set up a contact form with <a href=\"https:\/\/themehunk.com\/go\/elementor\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Contact Form is a vital element of any website. With a contact form, you always get in touch with users without sharing your contact details like Email and Phone number. Contact form helps to understand the user&#8217;s preferences, ideas, and feedback that they have given to you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are plenty of Contact form plugins available like WP form, Contact Form 7, Hubspot, Forminator, Lead Form Builder, Gravity form, Ninja form, Jet Form Builder, Formidable Form, and many others. Elementor itself has a contact form in the <a href=\"https:\/\/elementor.com\/pro\/?utm_source=google&amp;utm_medium=cpc&amp;utm_campaign=6522322024&amp;utm_term=elementor%20pro&amp;gclid=CjwKCAjwhOyJBhA4EiwAEcJdcQYhWNW8xMN1C4Y0_a0waLgV7O-tnCO_bG2q9SVrjD5_RvksQJph3xoCHyEQAvD_BwE\" target=\"_blank\" rel=\"noreferrer noopener\">pro version<\/a>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can use any Elementor Contact Form plugin discussed above. But for example, here we take <strong><a href=\"https:\/\/themehunk.com\/product\/lead-form-builder-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lead Form Builder<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now here we share the step-by-step procedure about how to set up a contact form with Elementor. But before we begin, make sure that you have installed and activated the <strong>Elementor plugin<\/strong> on your website.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Lets_start_a_step-by-step_process_of_adding_a_Contact_form_with_Elementor\" >Let&#8217;s start a step-by-step process of adding a Contact form with Elementor.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Step_1_Installation_of_Lead_Form_Builder\" >Step 1:  Installation of Lead Form Builder<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Step_2_Activation_process\" >Step 2: Activation process<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Step_3_Create_your_Elementor_contact_form\" >Step 3: Create your Elementor contact form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Step_4_Edit_Form_With_Elementor\" >Step 4: Edit Form With Elementor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Step_5_%E2%80%93_Customize_the_Form\" >Step 5 &#8211; Customize the Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Step_6_%E2%80%93_Publish\" >Step 6 &#8211; Publish<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wpzita.com\/fr\/how-to-set-up-contact-form-with-elementor\/#Wrapping_Up\" >Wrapping Up<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"let-s-start-a-step-by-step-process-of-adding-a-contact-form-with-elementor\"><span class=\"ez-toc-section\" id=\"Lets_start_a_step-by-step_process_of_adding_a_Contact_form_with_Elementor\"><\/span>Let&#8217;s start a step-by-step process of adding a Contact form with Elementor.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-installation-of-lead-form-builder\"><span class=\"ez-toc-section\" id=\"Step_1_Installation_of_Lead_Form_Builder\"><\/span>Step 1:  <strong>Installation of Lead Form Builder   <\/strong>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Go to the Dashboard and navigate to <strong>WP-admin > Plugins > Add New<\/strong>. On the right-most top see the search box, and type here<strong> &#8216;lead form builder<\/strong>&#8216;. Then click on the &#8216;<strong>Install Now<\/strong>&#8216; button. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"357\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-1024x357.jpg\" alt=\"How to setup contact form with Elemntor\" class=\"wp-image-8656\" style=\"width:1024px;height:357px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-1024x357.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-300x105.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-768x268.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform.jpg 1357w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-activation-process\"><span class=\"ez-toc-section\" id=\"Step_2_Activation_process\"><\/span>Step 2: <strong>Activation process<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After the completion of installation, click on the &#8216;<strong>Activate<\/strong>&#8216; button. After activation, you can access the lead form builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-Activate-1024x360.jpg\" alt=\"How to setup contact form with Elemntor\" class=\"wp-image-8657\" style=\"width:1024px;height:360px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-Activate-1024x360.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-Activate-300x105.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-Activate-768x270.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Leadform-Activate.jpg 1348w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-create-your-elementor-contact-form\"><span class=\"ez-toc-section\" id=\"Step_3_Create_your_Elementor_contact_form\"><\/span>Step 3:<strong> Create your Elementor contact form<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After successful completion of step 2, you find Lead Form Builder in your Dashboard menu. You will be redirected to the setting page of Lead Form Builder.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-form-1024x497.jpg\" alt=\"\" class=\"wp-image-8660\" style=\"width:1024px;height:497px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-form-1024x497.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-form-300x146.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-form-768x373.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-form.jpg 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now in the next step, you give the title name to the contact form like &#8216;Contact Us&#8217; and then start to add the Field name, Field Type ( drop-down and select the field ), Default Value, Use Default value as Placeholder. So you can customize the field form as per your requirement, like in the first field name you can set the Name, then in the Field type drop-down and select the same, in the Default box you also type the Name and after this process, your first row has been completed. Now you click on the &#8216;Add New&#8217; button and add any number of the rows as per your requirement and after the completion of the form, click on the &#8216;Save Form&#8217; button to save the credential. You can check the demo below:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-1024x562.jpg\" alt=\"How to setup contact form with Elemntor\" class=\"wp-image-8661\" style=\"width:1024px;height:562px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-1024x562.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-300x165.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New-768x422.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-New.jpg 1324w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-edit-form-with-elementor\"><span class=\"ez-toc-section\" id=\"Step_4_Edit_Form_With_Elementor\"><\/span>Step 4: <strong>Edit Form With Elementor<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After completing Step 3, now you go to the WordPress Dashboard and navigate to WP Dashboard> Pages > Add New. Now you open the new page, in the next process, you need to click on the Edit with Elementor button. We show in the image below:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"227\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-with-Elementor-1024x227.jpg\" alt=\"\" class=\"wp-image-8663\" style=\"width:1024px;height:227px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-with-Elementor-1024x227.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-with-Elementor-300x66.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-with-Elementor-768x170.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-with-Elementor.jpg 1336w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking the &#8216;Edit with Elementor button&#8217;, you will find the page something like below. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-Title-1024x482.jpg\" alt=\"\" class=\"wp-image-8669\" style=\"width:1024px;height:482px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-Title-1024x482.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-Title-300x141.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-Title-768x362.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Add-Title.jpg 1215w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We have already added the Lead form Builder with the title name &#8216;Contact Us&#8217;, So if we write the Contact Us to the Add Title then we will directly move to the form page. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Otherwise, in the next step, you need to click on the Edit with Elementor button, and then you go to the page something like below:<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Page-1024x498.png\" alt=\"How to setup contact form with Elemntor\" class=\"wp-image-8665\" style=\"width:1024px;height:498px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Page-1024x498.png 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Page-300x146.png 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Page-768x373.png 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Page.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You see in the above picture, in the center you find the &#8216;Drag widget here&#8217; and in the left side menu bar, you see the list of Widgets. Now you need to scroll the Elements from upside-down and find the &#8216;Lead Form Styler&#8217; widget.  <\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"367\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Drag-and-drop-1024x367.jpg\" alt=\"\" class=\"wp-image-8666\" style=\"width:1024px;height:367px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Drag-and-drop-1024x367.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Drag-and-drop-300x108.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Drag-and-drop-768x275.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Drag-and-drop.jpg 1341w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the next step, you have to drag the &#8216;Lead form Styler&#8217; widget and drop it into the center ( Drag widget here ). Now you find your contact form like this:<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Select-the-form-1024x464.png\" alt=\"\" class=\"wp-image-8667\" style=\"width:1024px;height:464px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Select-the-form-1024x464.png 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Select-the-form-300x136.png 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Select-the-form-768x348.png 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Select-the-form.png 1356w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">After this, in the left menu bar, you see the Select Form icon, from here you need to select a form. Select the form ( Contact Us ), the form showing like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-contact-page-1024x503.png\" alt=\"How to setup contact form with Elemntor\" class=\"wp-image-8668\" style=\"width:1024px;height:503px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-contact-page-1024x503.png 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-contact-page-300x147.png 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-contact-page-768x377.png 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Edit-contact-page.png 1335w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-5-customize-the-form\"><span class=\"ez-toc-section\" id=\"Step_5_%E2%80%93_Customize_the_Form\"><\/span>Step 5 &#8211; <strong>Customize the Form<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to change the icons, text, color, spacing, typography, and padding, then you can go to the &#8216;Style&#8217; and &#8216;Advanced&#8217; settings on the left side menu bar. In this, you find the options for customization of the form. These are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lead Form General Style<\/strong> &#8211; To set the container size and its alignment<\/li>\n\n\n\n<li><strong>Label and Title Styling<\/strong> &#8211; From here you can change the label color and typography style, hide all field labels, hide the           Title, and also change its color and typography.<\/li>\n\n\n\n<li><strong>Field Styling<\/strong> &#8211; From this option, you can change the color of the field background and input text, you can set the spacing between label and field and between fields as per your need. Also, you can set the padding and field margins.<\/li>\n\n\n\n<li><strong>Radio and Checkbox Styling<\/strong> &#8211; In this option, already given the default style. But if you want to change, you can set the size, spacing, and border-radius according to your needs.<\/li>\n\n\n\n<li><strong>Button Styling<\/strong> &#8211; In this option, you can set the submit button padding, margin, and typography style as per your requirement. You can also set the button dimensions (width and height),  button text and background color, border radius, and more.<\/li>\n\n\n\n<li><strong>Attribute and Custom CSS<\/strong> &#8211; It offers you to add custom HTML attributes to any elements and add CSS code to any widget. If you want to use these options, you need to subscribe to the Pro version of this Plugin. <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Besides, you can also set the &#8216;Motion effects&#8217;, &#8216;Background color&#8217; of the form. If you want to hide the &#8216;form&#8217; on your desktop, mobile, or tablet, you can be fixed this under the &#8216;Responsive&#8217; option. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Coustomize-1024x504.png\" alt=\"\" class=\"wp-image-8674\" style=\"width:1024px;height:504px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Coustomize-1024x504.png 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Coustomize-300x148.png 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Coustomize-768x378.png 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Coustomize.png 1220w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-6-publish\"><span class=\"ez-toc-section\" id=\"Step_6_%E2%80%93_Publish\"><\/span>Step 6 &#8211; <strong>Publish<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After following all the steps, now is the time to Publish the Contact form. It is very easy, just click the <strong>Publish<\/strong> button on the bottom left corner of the page and you will see the Contact form is successfully added to your website. You can see in the below picture:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Publish-1024x503.jpg\" alt=\"How to setup contact form with Elemntor\" class=\"wp-image-8670\" style=\"width:1024px;height:503px\" srcset=\"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Publish-1024x503.jpg 1024w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Publish-300x147.jpg 300w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Publish-768x377.jpg 768w, https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Publish.jpg 1344w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wrapping-up\"><span class=\"ez-toc-section\" id=\"Wrapping_Up\"><\/span>Wrapping Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Contact Form is an integral part of the website. With Contact Form, you can easily connect with your users. In this blog, we shared the step-by-step process to create the Contact Form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We hope this article will help you how to set up Contact Form with Elementor. If you have any doubt or ask something regarding this article, please feel free to contact us.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Read More<\/strong> <strong>&#8211;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wpzita.com\/fr\/best-elementor-free-and-premium-plugins-2021\/\">24+ Best Free and Premium Elementor Plugins<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wpzita.com\/fr\/best-elementor-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">21 Best Elementor Templates (free &amp; Premium)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wpzita.com\/fr\/free-elementor-woocommerce-templates-free-premium\/\">10 Free Elementor Woocommerce Templates (Free &amp; Premium)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wpzita.com\/fr\/elite-pro-addon-for-elementor\/\">Elite Pro Addon for Elementor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wpzita.com\/fr\/best-fashion-wordpress-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best Fashion WordPress Themes Free<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">                                                                                                                                                                          <\/p>","protected":false},"excerpt":{"rendered":"<p>In this article, we will guide you, on how to set up a contact form with Elementor. The Contact Form is a vital element of any website. With a contact form, you always get in touch with users without sharing your contact details like Email and Phone number. Contact form helps to understand the user&#8217;s [&hellip;]<\/p>\n","protected":false},"author":875,"featured_media":8675,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[193,227,228,229,107],"tags":[231,232,233,256,44,151],"class_list":["post-8643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-elementor-plugin","category-elementor-addons","category-elementor-plugins","category-wordpress","tag-elementor-add-ons","tag-contact-form","tag-elementor-contact-form","tag-lead-form-builder","tag-wordpress","tag-elementor"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pazvgb-2fp","jetpack_likes_enabled":true,"jetpack-related-posts":[],"jetpack_featured_media_url":"https:\/\/wpzita.com\/wp-content\/uploads\/2021\/09\/Contact-Form.jpg","_links":{"self":[{"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/posts\/8643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/users\/875"}],"replies":[{"embeddable":true,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/comments?post=8643"}],"version-history":[{"count":3,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/posts\/8643\/revisions"}],"predecessor-version":[{"id":11692,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/posts\/8643\/revisions\/11692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/media\/8675"}],"wp:attachment":[{"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/media?parent=8643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/categories?post=8643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpzita.com\/fr\/wp-json\/wp\/v2\/tags?post=8643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}