{"id":1422,"date":"2024-11-18T15:07:44","date_gmt":"2024-11-18T15:07:44","guid":{"rendered":"https:\/\/help.xodox.in\/?post_type=docs&#038;p=1422"},"modified":"2024-11-25T15:19:52","modified_gmt":"2024-11-25T15:19:52","password":"","slug":"setup-web-to-lead-form","status":"publish","type":"docs","link":"https:\/\/help.xodox.in\/pt\/docs\/setup-web-to-lead-form\/","title":{"rendered":"Setup Web to Lead Form"},"content":{"rendered":"<div class=\"entry-content\">\n<p>Xodox CRM Web to Lead feature allow you to build a web form based on leads fields and custom fields to place it on your website, landing page etc as an iframe.<\/p>\n<p>The visitors can then enter their names, email addresses, upload attachment and other basic information to create a lead directly in Xodox CRM.<\/p>\n<p>To create new web to lead form, from the main admin menu navigate to <strong>Setup-&gt;Leads-&gt;Web To Lead<\/strong><\/p>\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-252\" src=\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png\" alt=\"New Web to Lead Form\" width=\"768\" height=\"190\" \/><\/figure>\n<p>Click on the button on the top left side <b>New Form<\/b><\/p>\n<p><strong>NOTE<\/strong>: You will be able to build the form after you first create the initial form including all the settings.<\/p>\n<ol>\n<li><strong>Form Name<\/strong> \u2013 Give your form a name, it\u2019s for personal use and also will be displayed in the lead profile when you open lead.<\/li>\n<li><strong>Language<\/strong> \u2013 The language is currently used only for the validation messages.<\/li>\n<li><strong>Submit button text<\/strong> \u2013 The bottom where the user will need to click to submit the form E.q. Request a Quote or Contact us, feel free to adjust to fit your needs.<\/li>\n<li><strong>Message to show after the form is successfully submitted<\/strong> \u2013 This message will be shown after use successfully submit the form.<\/li>\n<li><strong>Allow duplicate Leads to be inserted into a database?<\/strong> \u2013 Often in web to lead forms duplicate leads are inserted into database. Xodox CRM has the ability to prevent this from happening by auto creating the lead as task including all form data as a description instead of inserting directly to the leads database, in this case, the responsible staff member will need to analyze the lead data and take further actions.<\/li>\n<li><strong>Source<\/strong> \u2013 Default lead source<\/li>\n<li><strong>Status<\/strong> \u2013 The lead will need to be in status after successfully is imported into Xodox CRM database.<\/li>\n<li><strong>Responsible<\/strong> \u2013 Auto assign the lead to a specific staff member.<\/li>\n<li><strong>Notification settings<\/strong> \u2013 All users based on the notification type will be notified via built in notification inside Xodox CRM and additionally the responsible lead staff member will get an email notification if in Setup-&gt;Email Templates -&gt; New Lead Assigned to Staff Member is not checked as disabled.<\/li>\n<li><strong>Recaptcha<\/strong> \u2013 You can use Google Recaptcha\u00a0to prevent spamming. The field for Google Recaptcha will be shown only if you have <a href=\"https:\/\/help.xodox.in\/pt\/docs\/google-configuration-features\/\">previously configured the recaptcha<\/a> keys.<\/li>\n<\/ol>\n<p>After you create the form 2 new tabs will be shown in the form area Form Builder and Integration Code.<\/p>\n<ul>\n<li>Form Builder \u2013 The place where you build the form and adjust all the fields you need.<\/li>\n<li>Integration Code is the code you will need to place into your website the form to be shown, note that from the link you will be able to see that each for have unique key.<\/li>\n<\/ul>\n<h3 id=\"building-the-form\" class=\"wp-block-heading\">Building The Form<\/h3>\n<figure class=\"wp-block-image\"><img decoding=\"async\" class=\"wp-image-253\" src=\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Forms-11-20-2024_06_53_PM.png\" alt=\"Web To Lead Build Form\" width=\"768\" height=\"416\" \/><\/figure>\n<p>When you save the initial form settings you will be\u00a0automatically pointed on the Form Builder tab and on the left side you will be able to see all the available form fields taken from the lead profile. Note that if you have custom fields for leads you will be able to include your custom fields inside the form easy with drag and drop.<\/p>\n<p><strong>There is only 1 exception where the\u00a0custom fields of type Hyperlink do not have support to be included in the web to lead form.<\/strong><\/p>\n<p>To add a field to the form just <strong>drag the field to the right side in the form area.\u00a0<\/strong><\/p>\n<p>After you drag the field you will be able to see on the left side the dragging ability to this field will be disabled. <strong>You can only add the field in the form once<\/strong> to prevent confusion with the form data.<\/p>\n<h3 id=\"customizing-the-fields\" class=\"wp-block-heading\"><strong>Customizing The Fields<\/strong><\/h3>\n<p>If the fields don\u2019t fit exactly for your needs you can customize the labels, add help text, placeholders and make them required. When you drag the field in the form area just hover over the field on the top right side you will be able to see 2 buttons (edit and remove)<\/p>\n<p>After you customized the form <strong>click on the bottom left button SAVE and click on the tab Integration Code to get the code you need to add to your website<\/strong>. The code will be placed as iframe and you can adjust the width and height directly to the code snippet provided by Xodox CRM.<\/p>\n<h3 id=\"styling\" class=\"wp-block-heading\">Styling<\/h3>\n<p>If you need to style the color of the input fields to fit with your website you can create<strong> custom.css<\/strong> file in assets\/css and apply the necessary styles.<\/p>\n<p>Example<strong> changing inputs border color:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>body.web-to-lead input {\r\n    border-color:red;\r\n}<\/code><\/pre>\n<p>Example <strong>changing submit button<\/strong>\u00a0<strong>background color:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>body.web-to-lead #form_submit {\r\n    background:red;\r\n}\r\n\r\nbody.web-to-lead #form_submit:hover,\r\nbody.web-to-lead #form_submit:active {\r\n    background:green;\r\n}<\/code><\/pre>\n<h4 id=\"redirect-user-to-custom-url-after-form-submission\" class=\"wp-block-heading\">Redirect User to Custom URL After Form Submission<\/h4>\n<p>Via FTP\/cPanel go to <b>application\/helpers\/<\/b> and create (if don\u2019t exists) file <b>my_functions_helper.php<\/b> and add the following code snippet:<\/p>\n<pre class=\"wp-block-code\"><code>hooks()-&gt;add_action('web_to_lead_form_submitted','my_web_to_lead_form_submitted_redirect_to_custom_url');\r\n\r\nfunction my_web_to_lead_form_submitted_redirect_to_custom_url($data){\r\n    echo json_encode(array(\r\n      'success'=&gt;true,\r\n      'redirect_url'=&gt;'http:\/\/yourcustomurl.com'\r\n    ));\r\n    die;\r\n}<\/code><\/pre>\n<p><strong>Don\u2019t forget to include the &lt;?<\/strong>php<strong> opening tag at the top of the file if it\u2019s not already added.<\/strong><\/p>\n<h2 id=\"include-logo-in-the-form\" class=\"wp-block-heading\">Include logo in the form<\/h2>\n<p>To include your company logo in the form, you can either share or embed the url with query string parameter as shown below:<\/p>\n<pre class=\"wp-block-code\"><code>https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?<strong>with_logo=1<\/strong><\/code><\/pre>\n<h2 id=\"direct-link-sharing\" class=\"wp-block-heading\">Direct link sharing<\/h2>\n<p>The forms can be shared directly to your customers without actually embedding the form on your website, this feature is useful for example if you want to include a link in emails, SMS etc\u2026<\/p>\n<p>In order Xodox CRM can know that the form link is shared directly and not embedded into an iframe, you need to specify the URL query string, in this case, Xodox CRM will provide better styling to the form.<\/p>\n<pre class=\"wp-block-code\"><code>https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24<strong>?with_logo=1&amp;styled=1<\/strong><\/code><\/pre>\n<h3 id=\"create-multi-column-form-layouts-in-web-to-lead-form-available-from-v1-9-0\" class=\"wp-block-heading\">Create Multi-Column Form Layouts in Web To Lead Form (available from v1.9.0)<\/h3>\n<p>By default, the form fields will be added in a single column full width of the document if you want to customize the form and have the fields displayed in multiple columns we have added the ability to achieve this with custom classes applied to the field, <strong>you can add up to 12 columns in 1 row.<\/strong><\/p>\n<p>In the following example, we will create 2 fields in 2 columns and 1 row.<\/p>\n<p><strong>Keep in mind that the columns won\u2019t be applied in the form builder, only when the form is viewed by accessing the integration link or is in an iframe.<\/strong><\/p>\n<p>Here is a quick example:<\/p>\n<p>Final result:<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" class=\"wp-image-1956\" src=\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/web-to-lead-form-2-columns.png\" width=\"1024\" height=\"288\" \/><\/figure>\n<p>Assume that in your form builder you have 4 fields, as in order Name, Email Address, Company, Address.<\/p>\n<p>For the first 2 fields click on the EDIT button on the top right side of the field wrapper to slide down the edit area, in the class input add an additional class for both fields<\/p>\n<p>Save the form by clicking on the save button and preview the form from the integration link to see the final result.<\/p>\n<p>As mentioned before you can add up to 12 columns, in this case, form-col-6 + form-col-6 = 12, in case you want to add 3 columns apply the class <strong>form-col-4<\/strong> on 3 fields (form-col-4*3 fields will be 12 and the fields will fit the document) that are <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">one by one in order.<\/a><\/p>\n<div class=\"st-alert st-alert-info\">Because in most cases you will embed the form into a small container\/portion of your website, the bootstrap grid CSS will still show the columns new rows (not split in 2 columns), in this case, consider adding another additional class for small containers, for example if you added <strong>form-col-6<\/strong> class, <strong>add additional class for small area<\/strong> <strong>form-col-xs-6, <\/strong>click <a href=\"#\">here<\/a> to check how this should look<\/div>\n<h3 id=\"few-things-to-consider\" class=\"wp-block-heading\"><strong id=\"consider\">Few things to consider<\/strong><\/h3>\n<ol>\n<li><strong>Never leave the form without required fields<\/strong>. By default, the name field will be required and it\u2019s not recommended to uncheck as required.<\/li>\n<li><strong>When placing the iframe snippet code there are few things you need to consider.<\/strong>\n<ol>\n<li>If the protocol of your Xodox CRM installation is HTTP then use an HTTP page inside the iframe.<\/li>\n<li>If the protocol of your Xodox CRM installation is https than use an https page inside the iframe.<\/li>\n<li>Summarized will be <strong>no SSL Xodox CRM installation will need to place the link in no SSL<\/strong> eq landing page and backward, SSL websites with SSL Xodox CRM\u00a0installation and no SSL website with none SSL Xodox CRM installation. You can read more about this\u00a0<a href=\"http:\/\/www.tinywebgallery.com\/blog\/iframe-do-not-mix-http-and-https\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Xodox CRM Web to Lead feature allow you to build a web form based on leads fields and custom fields to place it on your website, landing page etc as an iframe. The visitors can then enter their names, email addresses, upload attachment and other basic information to create a lead directly in Xodox CRM. To create new web to lead form, from the main admin menu navigate to Setup-&gt;Leads-&gt;Web To Lead Click on the button on the top left side New Form NOTE: You will be able to build the form after you first create the initial form including all the settings. Form Name \u2013 Give your form a name, it\u2019s for personal use and also will be displayed in the lead profile when you open lead. Language \u2013 The language is currently used only for the validation messages. Submit button text \u2013 The bottom where the user will need to click to submit the form E.q. Request a Quote or Contact us, feel free to adjust to fit your needs. Message to show after the form is successfully submitted \u2013 This message will be shown after use successfully submit the form. Allow duplicate Leads to be inserted into a database? \u2013 Often in web to lead forms duplicate leads are inserted into database. Xodox CRM has the ability to prevent this from happening by auto creating the lead as task including all form data as a description instead of inserting directly to the leads database, in this case, the responsible staff member will need to analyze the lead data and take further actions. Source \u2013 Default lead source Status \u2013 The lead will need to be in status after successfully is imported into Xodox CRM database. Responsible \u2013 Auto assign the lead to a specific staff member. Notification settings \u2013 All users based on the notification type will be notified via built in notification inside Xodox CRM and additionally the responsible lead staff member will get an email notification if in Setup-&gt;Email Templates -&gt; New Lead Assigned to Staff Member is not checked as disabled. Recaptcha \u2013 You can use Google Recaptcha\u00a0to prevent spamming. The field for Google Recaptcha will be shown only if you have previously configured the recaptcha keys. After you create the form 2 new tabs will be shown in the form area Form Builder and Integration Code. Form Builder \u2013 The place where you build the form and adjust all the fields you need. Integration Code is the code you will need to place into your website the form to be shown, note that from the link you will be able to see that each for have unique key. Building The Form When you save the initial form settings you will be\u00a0automatically pointed on the Form Builder tab and on the left side you will be able to see all the available form fields taken from the lead profile. Note that if you have custom fields for leads you will be able to include your custom fields inside the form easy with drag and drop. There is only 1 exception where the\u00a0custom fields of type Hyperlink do not have support to be included in the web to lead form. To add a field to the form just drag the field to the right side in the form area.\u00a0 After you drag the field you will be able to see on the left side the dragging ability to this field will be disabled. You can only add the field in the form once to prevent confusion with the form data. Customizing The Fields If the fields don\u2019t fit exactly for your needs you can customize the labels, add help text, placeholders and make them required. When you drag the field in the form area just hover over the field on the top right side you will be able to see 2 buttons (edit and remove) After you customized the form click on the bottom left button SAVE and click on the tab Integration Code to get the code you need to add to your website. The code will be placed as iframe and you can adjust the width and height directly to the code snippet provided by Xodox CRM. Styling If you need to style the color of the input fields to fit with your website you can create custom.css file in assets\/css and apply the necessary styles. Example changing inputs border color: body.web-to-lead input { border-color:red; } Example changing submit button\u00a0background color: body.web-to-lead #form_submit { background:red; } body.web-to-lead #form_submit:hover, body.web-to-lead #form_submit:active { background:green; } Redirect User to Custom URL After Form Submission Via FTP\/cPanel go to application\/helpers\/ and create (if don\u2019t exists) file my_functions_helper.php and add the following code snippet: hooks()-&gt;add_action(&#8216;web_to_lead_form_submitted&#8217;,&#8217;my_web_to_lead_form_submitted_redirect_to_custom_url&#8217;); function my_web_to_lead_form_submitted_redirect_to_custom_url($data){ echo json_encode(array( &#8216;success&#8217;=&gt;true, &#8216;redirect_url&#8217;=&gt;&#8217;http:\/\/yourcustomurl.com&#8217; )); die; } Don\u2019t forget to include the &lt;?php opening tag at the top of the file if it\u2019s not already added. Include logo in the form To include your company logo in the form, you can either share or embed the url with query string parameter as shown below: https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1 Direct link sharing The forms can be shared directly to your customers without actually embedding the form on your website, this feature is useful for example if you want to include a link in emails, SMS etc\u2026 In order Xodox CRM can know that the form link is shared directly and not embedded into an iframe, you need to specify the URL query string, in this case, Xodox CRM will provide better styling to the form. https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1&amp;styled=1 Create Multi-Column Form Layouts in Web To Lead Form (available from v1.9.0) By default, the form fields will be added in a single column full width of the document if you want to customize the form and have the fields displayed in multiple columns we have added the ability to achieve this with custom classes applied to the field, you can add up to 12 columns in 1 row. In the following example, we will create 2 fields<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[25,39],"doc_tag":[],"class_list":["post-1422","docs","type-docs","status-publish","hentry","doc_category-leads","doc_category-setup-configuration"],"acf":[],"year_month":"2026-04","word_count":1428,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"help-xodox","author_nicename":"help-xodox","author_url":"https:\/\/help.xodox.in\/pt\/author\/help-xodox\/"},"doc_category_info":[{"term_name":"Leads","term_url":"https:\/\/help.xodox.in\/pt\/docs-category\/leads\/"},{"term_name":"Setup &amp; Configuration","term_url":"https:\/\/help.xodox.in\/pt\/docs-category\/setup-configuration\/"}],"doc_tag_info":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Setup Web to Lead Form - My CMS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/help.xodox.in\/pt\/docs\/setup-web-to-lead-form\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setup Web to Lead Form - My CMS\" \/>\n<meta property=\"og:description\" content=\"Xodox CRM Web to Lead feature allow you to build a web form based on leads fields and custom fields to place it on your website, landing page etc as an iframe. The visitors can then enter their names, email addresses, upload attachment and other basic information to create a lead directly in Xodox CRM. To create new web to lead form, from the main admin menu navigate to Setup-&gt;Leads-&gt;Web To Lead Click on the button on the top left side New Form NOTE: You will be able to build the form after you first create the initial form including all the settings. Form Name \u2013 Give your form a name, it\u2019s for personal use and also will be displayed in the lead profile when you open lead. Language \u2013 The language is currently used only for the validation messages. Submit button text \u2013 The bottom where the user will need to click to submit the form E.q. Request a Quote or Contact us, feel free to adjust to fit your needs. Message to show after the form is successfully submitted \u2013 This message will be shown after use successfully submit the form. Allow duplicate Leads to be inserted into a database? \u2013 Often in web to lead forms duplicate leads are inserted into database. Xodox CRM has the ability to prevent this from happening by auto creating the lead as task including all form data as a description instead of inserting directly to the leads database, in this case, the responsible staff member will need to analyze the lead data and take further actions. Source \u2013 Default lead source Status \u2013 The lead will need to be in status after successfully is imported into Xodox CRM database. Responsible \u2013 Auto assign the lead to a specific staff member. Notification settings \u2013 All users based on the notification type will be notified via built in notification inside Xodox CRM and additionally the responsible lead staff member will get an email notification if in Setup-&gt;Email Templates -&gt; New Lead Assigned to Staff Member is not checked as disabled. Recaptcha \u2013 You can use Google Recaptcha\u00a0to prevent spamming. The field for Google Recaptcha will be shown only if you have previously configured the recaptcha keys. After you create the form 2 new tabs will be shown in the form area Form Builder and Integration Code. Form Builder \u2013 The place where you build the form and adjust all the fields you need. Integration Code is the code you will need to place into your website the form to be shown, note that from the link you will be able to see that each for have unique key. Building The Form When you save the initial form settings you will be\u00a0automatically pointed on the Form Builder tab and on the left side you will be able to see all the available form fields taken from the lead profile. Note that if you have custom fields for leads you will be able to include your custom fields inside the form easy with drag and drop. There is only 1 exception where the\u00a0custom fields of type Hyperlink do not have support to be included in the web to lead form. To add a field to the form just drag the field to the right side in the form area.\u00a0 After you drag the field you will be able to see on the left side the dragging ability to this field will be disabled. You can only add the field in the form once to prevent confusion with the form data. Customizing The Fields If the fields don\u2019t fit exactly for your needs you can customize the labels, add help text, placeholders and make them required. When you drag the field in the form area just hover over the field on the top right side you will be able to see 2 buttons (edit and remove) After you customized the form click on the bottom left button SAVE and click on the tab Integration Code to get the code you need to add to your website. The code will be placed as iframe and you can adjust the width and height directly to the code snippet provided by Xodox CRM. Styling If you need to style the color of the input fields to fit with your website you can create custom.css file in assets\/css and apply the necessary styles. Example changing inputs border color: body.web-to-lead input { border-color:red; } Example changing submit button\u00a0background color: body.web-to-lead #form_submit { background:red; } body.web-to-lead #form_submit:hover, body.web-to-lead #form_submit:active { background:green; } Redirect User to Custom URL After Form Submission Via FTP\/cPanel go to application\/helpers\/ and create (if don\u2019t exists) file my_functions_helper.php and add the following code snippet: hooks()-&gt;add_action(&#039;web_to_lead_form_submitted&#039;,&#039;my_web_to_lead_form_submitted_redirect_to_custom_url&#039;); function my_web_to_lead_form_submitted_redirect_to_custom_url($data){ echo json_encode(array( &#039;success&#039;=&gt;true, &#039;redirect_url&#039;=&gt;&#039;http:\/\/yourcustomurl.com&#039; )); die; } Don\u2019t forget to include the &lt;?php opening tag at the top of the file if it\u2019s not already added. Include logo in the form To include your company logo in the form, you can either share or embed the url with query string parameter as shown below: https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1 Direct link sharing The forms can be shared directly to your customers without actually embedding the form on your website, this feature is useful for example if you want to include a link in emails, SMS etc\u2026 In order Xodox CRM can know that the form link is shared directly and not embedded into an iframe, you need to specify the URL query string, in this case, Xodox CRM will provide better styling to the form. https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1&amp;styled=1 Create Multi-Column Form Layouts in Web To Lead Form (available from v1.9.0) By default, the form fields will be added in a single column full width of the document if you want to customize the form and have the fields displayed in multiple columns we have added the ability to achieve this with custom classes applied to the field, you can add up to 12 columns in 1 row. In the following example, we will create 2 fields\" \/>\n<meta property=\"og:url\" content=\"https:\/\/help.xodox.in\/pt\/docs\/setup-web-to-lead-form\/\" \/>\n<meta property=\"og:site_name\" content=\"My CMS\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-25T15:19:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/\",\"url\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/\",\"name\":\"Setup Web to Lead Form - My CMS\",\"isPartOf\":{\"@id\":\"https:\/\/help.xodox.in\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png\",\"datePublished\":\"2024-11-18T15:07:44+00:00\",\"dateModified\":\"2024-11-25T15:19:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#primaryimage\",\"url\":\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png\",\"contentUrl\":\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/help.xodox.in\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setup Web to Lead Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/help.xodox.in\/#website\",\"url\":\"https:\/\/help.xodox.in\/\",\"name\":\"My CMS\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/help.xodox.in\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/help.xodox.in\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/help.xodox.in\/#organization\",\"name\":\"My CMS\",\"url\":\"https:\/\/help.xodox.in\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/help.xodox.in\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/10\/Xodox-Logo-01-2.png\",\"contentUrl\":\"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/10\/Xodox-Logo-01-2.png\",\"width\":573,\"height\":192,\"caption\":\"My CMS\"},\"image\":{\"@id\":\"https:\/\/help.xodox.in\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Setup Web to Lead Form - My CMS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/help.xodox.in\/pt\/docs\/setup-web-to-lead-form\/","og_locale":"pt_PT","og_type":"article","og_title":"Setup Web to Lead Form - My CMS","og_description":"Xodox CRM Web to Lead feature allow you to build a web form based on leads fields and custom fields to place it on your website, landing page etc as an iframe. The visitors can then enter their names, email addresses, upload attachment and other basic information to create a lead directly in Xodox CRM. To create new web to lead form, from the main admin menu navigate to Setup-&gt;Leads-&gt;Web To Lead Click on the button on the top left side New Form NOTE: You will be able to build the form after you first create the initial form including all the settings. Form Name \u2013 Give your form a name, it\u2019s for personal use and also will be displayed in the lead profile when you open lead. Language \u2013 The language is currently used only for the validation messages. Submit button text \u2013 The bottom where the user will need to click to submit the form E.q. Request a Quote or Contact us, feel free to adjust to fit your needs. Message to show after the form is successfully submitted \u2013 This message will be shown after use successfully submit the form. Allow duplicate Leads to be inserted into a database? \u2013 Often in web to lead forms duplicate leads are inserted into database. Xodox CRM has the ability to prevent this from happening by auto creating the lead as task including all form data as a description instead of inserting directly to the leads database, in this case, the responsible staff member will need to analyze the lead data and take further actions. Source \u2013 Default lead source Status \u2013 The lead will need to be in status after successfully is imported into Xodox CRM database. Responsible \u2013 Auto assign the lead to a specific staff member. Notification settings \u2013 All users based on the notification type will be notified via built in notification inside Xodox CRM and additionally the responsible lead staff member will get an email notification if in Setup-&gt;Email Templates -&gt; New Lead Assigned to Staff Member is not checked as disabled. Recaptcha \u2013 You can use Google Recaptcha\u00a0to prevent spamming. The field for Google Recaptcha will be shown only if you have previously configured the recaptcha keys. After you create the form 2 new tabs will be shown in the form area Form Builder and Integration Code. Form Builder \u2013 The place where you build the form and adjust all the fields you need. Integration Code is the code you will need to place into your website the form to be shown, note that from the link you will be able to see that each for have unique key. Building The Form When you save the initial form settings you will be\u00a0automatically pointed on the Form Builder tab and on the left side you will be able to see all the available form fields taken from the lead profile. Note that if you have custom fields for leads you will be able to include your custom fields inside the form easy with drag and drop. There is only 1 exception where the\u00a0custom fields of type Hyperlink do not have support to be included in the web to lead form. To add a field to the form just drag the field to the right side in the form area.\u00a0 After you drag the field you will be able to see on the left side the dragging ability to this field will be disabled. You can only add the field in the form once to prevent confusion with the form data. Customizing The Fields If the fields don\u2019t fit exactly for your needs you can customize the labels, add help text, placeholders and make them required. When you drag the field in the form area just hover over the field on the top right side you will be able to see 2 buttons (edit and remove) After you customized the form click on the bottom left button SAVE and click on the tab Integration Code to get the code you need to add to your website. The code will be placed as iframe and you can adjust the width and height directly to the code snippet provided by Xodox CRM. Styling If you need to style the color of the input fields to fit with your website you can create custom.css file in assets\/css and apply the necessary styles. Example changing inputs border color: body.web-to-lead input { border-color:red; } Example changing submit button\u00a0background color: body.web-to-lead #form_submit { background:red; } body.web-to-lead #form_submit:hover, body.web-to-lead #form_submit:active { background:green; } Redirect User to Custom URL After Form Submission Via FTP\/cPanel go to application\/helpers\/ and create (if don\u2019t exists) file my_functions_helper.php and add the following code snippet: hooks()-&gt;add_action('web_to_lead_form_submitted','my_web_to_lead_form_submitted_redirect_to_custom_url'); function my_web_to_lead_form_submitted_redirect_to_custom_url($data){ echo json_encode(array( 'success'=&gt;true, 'redirect_url'=&gt;'http:\/\/yourcustomurl.com' )); die; } Don\u2019t forget to include the &lt;?php opening tag at the top of the file if it\u2019s not already added. Include logo in the form To include your company logo in the form, you can either share or embed the url with query string parameter as shown below: https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1 Direct link sharing The forms can be shared directly to your customers without actually embedding the form on your website, this feature is useful for example if you want to include a link in emails, SMS etc\u2026 In order Xodox CRM can know that the form link is shared directly and not embedded into an iframe, you need to specify the URL query string, in this case, Xodox CRM will provide better styling to the form. https:\/\/your-Xodoxcrm-installation.com\/forms\/wtl\/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1&amp;styled=1 Create Multi-Column Form Layouts in Web To Lead Form (available from v1.9.0) By default, the form fields will be added in a single column full width of the document if you want to customize the form and have the fields displayed in multiple columns we have added the ability to achieve this with custom classes applied to the field, you can add up to 12 columns in 1 row. In the following example, we will create 2 fields","og_url":"https:\/\/help.xodox.in\/pt\/docs\/setup-web-to-lead-form\/","og_site_name":"My CMS","article_modified_time":"2024-11-25T15:19:52+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/","url":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/","name":"Setup Web to Lead Form - My CMS","isPartOf":{"@id":"https:\/\/help.xodox.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#primaryimage"},"image":{"@id":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#primaryimage"},"thumbnailUrl":"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png","datePublished":"2024-11-18T15:07:44+00:00","dateModified":"2024-11-25T15:19:52+00:00","breadcrumb":{"@id":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#primaryimage","url":"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png","contentUrl":"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/11\/Web-to-Lead-11-20-2024_06_29_PM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/help.xodox.in\/docs\/setup-web-to-lead-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/help.xodox.in\/"},{"@type":"ListItem","position":2,"name":"Setup Web to Lead Form"}]},{"@type":"WebSite","@id":"https:\/\/help.xodox.in\/#website","url":"https:\/\/help.xodox.in\/","name":"My CMS","description":"","publisher":{"@id":"https:\/\/help.xodox.in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/help.xodox.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/help.xodox.in\/#organization","name":"My CMS","url":"https:\/\/help.xodox.in\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/help.xodox.in\/#\/schema\/logo\/image\/","url":"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/10\/Xodox-Logo-01-2.png","contentUrl":"https:\/\/help.xodox.in\/wp-content\/uploads\/2024\/10\/Xodox-Logo-01-2.png","width":573,"height":192,"caption":"My CMS"},"image":{"@id":"https:\/\/help.xodox.in\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/docs\/1422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/comments?post=1422"}],"version-history":[{"count":0,"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/docs\/1422\/revisions"}],"wp:attachment":[{"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/media?parent=1422"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/doc_category?post=1422"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.xodox.in\/pt\/wp-json\/wp\/v2\/doc_tag?post=1422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}