{"id":4763,"date":"2025-03-18T11:37:35","date_gmt":"2025-03-18T11:37:35","guid":{"rendered":"https:\/\/vertexaddons.com\/?post_type=widgets&#038;p=4763"},"modified":"2026-06-23T14:02:07","modified_gmt":"2026-06-23T14:02:07","slug":"form-builder","status":"publish","type":"widgets","link":"https:\/\/demo.vertexaddons.com\/showcase\/widgets\/form-builder\/","title":{"rendered":"Form Builder"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4763\" class=\"elementor elementor-4763\" data-elementor-post-type=\"widgets\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e8b118 e-flex e-con-boxed e-con e-parent\" data-id=\"2e8b118\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-553d42d elementor-widget__width-initial elementor-widget elementor-widget-afeb_form_builder\" data-id=\"553d42d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;button_width&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;button_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;button_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"afeb_form_builder.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <form class=\"afeb-form\" method=\"post\" name=\"Form Builder Demo\" page=\"Form Builder\" page_id=\"4763\" novalidate>\n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"file_type_error_message\"\n                   value=\"File type is not supported.\" \/>\n\n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"file_size_error_message\"\n                   value=\"File size exceeds the allowed limit.\" \/>\n\n            <input type=\"hidden\" name=\"page_id\"\n                value=\"4763\" \/>\n            <input type=\"hidden\" name=\"form_id\" value=\"553d42d\" \/>\n\n                            <input type=\"hidden\" name=\"form_name\" value=\"Form Builder Demo\" \/>\n            \n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"empty_error_message\" value=\"Please fill out this field\" \/>\n                        <input type=\"hidden\" name=\"referrer\" value=\"https:\/\/demo.vertexaddons.com\/showcase\/showcase\/wp-json\/wp\/v2\/widgets\/4763\" \/>\n            <input type=\"hidden\" name=\"referer_title\" value=\"\" \/>\n            <input type=\"hidden\" id=\"afeb_form_submit_nonce\" name=\"afeb_form_submit_nonce\" value=\"567fbc6fd3\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/showcase\/wp-json\/wp\/v2\/widgets\/4763\" \/>            <input type=\"hidden\" name=\"afeb_form_submit\" value=\"\" \/>\n\n            <div class=\"afeb-step-wrap afeb-separator-off\"><\/div>            <div class=\"afeb-form-fields-wrap afeb-labels-above\">\n                                    <div class=\"afeb-form-field-type-text afeb-field-group afeb-column afeb-field-group-name elementor-repeater-item-bc0792b\">\n                                                    <label for=\"form-field-name\" class=\"afeb-form-field-label\">\n                                Name                            <\/label>\n                        <input size=\"1\"type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"afeb-form-field  afeb-form-field-textual\" placeholder=\"John Dou\">                    <\/div>\n                                    <div class=\"afeb-form-field-type-number afeb-field-group afeb-column afeb-field-group-email elementor-repeater-item-c64665b afeb-form-field-required\">\n                                                    <label for=\"form-field-email\" class=\"afeb-form-field-label\">\n                                Age                            <\/label>\n                        <input size=\"1\"type=\"number\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"afeb-form-field  afeb-form-field-textual\" placeholder=\"e.g. 25\" required=\"required\" aria-required=\"true\"><input class=\"afeb-form-error-message\" type=\"hidden\" name=\"number_error_message\" value=\"Please use a valid number\" \/>                    <\/div>\n                                    <div class=\"afeb-form-field-type-tel afeb-field-group afeb-column afeb-field-group-message elementor-repeater-item-8c9bd7e\">\n                                                    <label for=\"form-field-message\" class=\"afeb-form-field-label\">\n                                Mobile                            <\/label>\n                        <input size=\"1\"type=\"tel\" name=\"form_fields[message]\" id=\"form-field-message\" class=\"afeb-form-field  afeb-form-field-textual\" placeholder=\"+123456789\"><input class=\"afeb-form-error-message\" type=\"hidden\" name=\"tel_error_message\" value=\"Please use a valid tel\" \/>                    <\/div>\n                                    <div class=\"afeb-form-field-type-recaptcha_v3 afeb-field-group afeb-column afeb-field-group-04d3cc2 elementor-repeater-item-04d3cc2\">\n                                            <\/div>\n                                <div class=\"afeb-field-group afeb-column afeb-form-field-type-submit\">        <button type=\"submit\" class=\"afeb-form-field-button\" data-text=\"Send\" data-loading-text=\"Please wait ...\">\n            <span >\n                                                    <span>Send<\/span>\n                                            <\/span>\n        <\/button>\n        <\/div>            <\/div>\n                                <\/form>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25181f4 elementor-widget__width-initial elementor-widget elementor-widget-afeb_form_builder\" data-id=\"25181f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;button_width&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:100,&quot;sizes&quot;:[]},&quot;button_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;button_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"afeb_form_builder.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <form class=\"afeb-form\" method=\"post\" name=\"Form Builder Demo\" page=\"Form Builder\" page_id=\"4763\" novalidate>\n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"file_type_error_message\"\n                   value=\"File type is not supported.\" \/>\n\n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"file_size_error_message\"\n                   value=\"File size exceeds the allowed limit.\" \/>\n\n            <input type=\"hidden\" name=\"page_id\"\n                value=\"4763\" \/>\n            <input type=\"hidden\" name=\"form_id\" value=\"25181f4\" \/>\n\n                            <input type=\"hidden\" name=\"form_name\" value=\"Form Builder Demo\" \/>\n            \n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"empty_error_message\" value=\"Please fill out this field\" \/>\n                        <input type=\"hidden\" name=\"referrer\" value=\"https:\/\/demo.vertexaddons.com\/showcase\/showcase\/wp-json\/wp\/v2\/widgets\/4763\" \/>\n            <input type=\"hidden\" name=\"referer_title\" value=\"\" \/>\n            <input type=\"hidden\" id=\"afeb_form_submit_nonce\" name=\"afeb_form_submit_nonce\" value=\"567fbc6fd3\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/showcase\/wp-json\/wp\/v2\/widgets\/4763\" \/>            <input type=\"hidden\" name=\"afeb_form_submit\" value=\"\" \/>\n\n            <div class=\"afeb-step-wrap afeb-separator-off\"><\/div>            <div class=\"afeb-form-fields-wrap afeb-labels-above\">\n                                    <div class=\"afeb-form-field-type-text afeb-field-group afeb-column afeb-field-group-name elementor-repeater-item-bc0792b\">\n                                                    <label for=\"form-field-name\" class=\"afeb-form-field-label\">\n                                Name                            <\/label>\n                        <input size=\"1\"type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"afeb-form-field  afeb-form-field-textual\" placeholder=\"Name\">                    <\/div>\n                                    <div class=\"afeb-form-field-type-email afeb-field-group afeb-column afeb-field-group-email elementor-repeater-item-c64665b afeb-form-field-required\">\n                                                    <label for=\"form-field-email\" class=\"afeb-form-field-label\">\n                                Email                            <\/label>\n                        <input size=\"1\"type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"afeb-form-field  afeb-form-field-textual\" placeholder=\"Email\" required=\"required\" aria-required=\"true\"><input class=\"afeb-form-error-message\" type=\"hidden\" name=\"email_error_message\" value=\"Please use a valid email\" \/>                    <\/div>\n                                    <div class=\"afeb-form-field-type-textarea afeb-field-group afeb-column afeb-field-group-message elementor-repeater-item-8c9bd7e\">\n                                                    <label for=\"form-field-message\" class=\"afeb-form-field-label\">\n                                Message                            <\/label>\n                        <textarea class=\"afeb-form-field-textual afeb-form-field elementor-field-textual \" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"4\" placeholder=\"Message\"><\/textarea>                    <\/div>\n                                    <div class=\"afeb-form-field-type-recaptcha_v3 afeb-field-group afeb-column afeb-field-group-51f2234 elementor-repeater-item-51f2234\">\n                                            <\/div>\n                                <div class=\"afeb-field-group afeb-column afeb-form-field-type-submit\">        <button type=\"submit\" class=\"afeb-form-field-button\" data-text=\"Send\" data-loading-text=\"Please wait ...\">\n            <span >\n                                                    <span>Send<\/span>\n                                            <\/span>\n        <\/button>\n        <\/div>            <\/div>\n                                <\/form>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84e3eb3 elementor-widget__width-initial elementor-widget elementor-widget-afeb_form_builder\" data-id=\"84e3eb3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;button_width&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:100,&quot;sizes&quot;:[]},&quot;button_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;button_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"afeb_form_builder.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <form class=\"afeb-form\" method=\"post\" name=\"Form Builder Demo\" page=\"Form Builder\" page_id=\"4763\" novalidate>\n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"file_type_error_message\"\n                   value=\"File type is not supported.\" \/>\n\n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"file_size_error_message\"\n                   value=\"File size exceeds the allowed limit.\" \/>\n\n            <input type=\"hidden\" name=\"page_id\"\n                value=\"4763\" \/>\n            <input type=\"hidden\" name=\"form_id\" value=\"84e3eb3\" \/>\n\n                            <input type=\"hidden\" name=\"form_name\" value=\"Form Builder Demo\" \/>\n            \n            <input class=\"afeb-form-error-message\" type=\"hidden\" name=\"empty_error_message\" value=\"Please fill out this field\" \/>\n                        <input type=\"hidden\" name=\"referrer\" value=\"https:\/\/demo.vertexaddons.com\/showcase\/showcase\/wp-json\/wp\/v2\/widgets\/4763\" \/>\n            <input type=\"hidden\" name=\"referer_title\" value=\"\" \/>\n            <input type=\"hidden\" id=\"afeb_form_submit_nonce\" name=\"afeb_form_submit_nonce\" value=\"567fbc6fd3\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/showcase\/wp-json\/wp\/v2\/widgets\/4763\" \/>            <input type=\"hidden\" name=\"afeb_form_submit\" value=\"\" \/>\n\n            <div class=\"afeb-step-wrap afeb-separator-off\"><\/div>            <div class=\"afeb-form-fields-wrap afeb-labels-above\">\n                                    <div class=\"afeb-form-field-type-select afeb-field-group afeb-column afeb-field-group-name elementor-repeater-item-bc0792b\">\n                                                    <label for=\"form-field-name\" class=\"afeb-form-field-label\">\n                                Select the options                            <\/label>\n                                <div class=\"afeb-form-field afeb-select-wrap \">\n            <select\n                id=\"form-field-name\"\n                class=\"afeb-form-field-textual elementor-field-textual\"\n                title=\"\"\n                name=\"form_fields[name]\"\n                >\n\n                                    <option value=\"Option 1\">\n                        Option 1                    <\/option>\n                                        <option value=\"Option 2\">\n                        Option 2                    <\/option>\n                                        <option value=\"Option 3\">\n                        Option 3                    <\/option>\n                                <\/select>\n        <\/div>\n                            <\/div>\n                                    <div class=\"afeb-form-field-type-checkbox afeb-field-group afeb-column afeb-field-group-email elementor-repeater-item-c64665b afeb-form-field-required\">\n                                                    <label for=\"form-field-email\" class=\"afeb-form-field-label\">\n                                Select the options                            <\/label>\n                                <div\n            class=\"afeb-field-sub-group  \">\n                            <span class=\"afeb-form-field-option\"\n                      data-key=\"form-field-email\">\n                    <input\n                        id=\"form-field-email-0\"\n                        type=\"checkbox\"\n                        name=\"form_fields[email][]\"\n                        value=\"Option 1\"\n                        required>\n                                            <input\n                            type=\"hidden\"\n                            name=\"form_fields[email][]\">\n                                        <label\n                        for=\"form-field-email-0\">Option 1<\/label>\n                <\/span>\n                                <span class=\"afeb-form-field-option\"\n                      data-key=\"form-field-email\">\n                    <input\n                        id=\"form-field-email-1\"\n                        type=\"checkbox\"\n                        name=\"form_fields[email][]\"\n                        value=\"Option 2\"\n                        required>\n                                            <input\n                            type=\"hidden\"\n                            name=\"form_fields[email][]\">\n                                        <label\n                        for=\"form-field-email-1\">Option 2<\/label>\n                <\/span>\n                                <span class=\"afeb-form-field-option\"\n                      data-key=\"form-field-email\">\n                    <input\n                        id=\"form-field-email-2\"\n                        type=\"checkbox\"\n                        name=\"form_fields[email][]\"\n                        value=\"Option 3\"\n                        required>\n                                            <input\n                            type=\"hidden\"\n                            name=\"form_fields[email][]\">\n                                        <label\n                        for=\"form-field-email-2\">Option 3<\/label>\n                <\/span>\n                        <\/div>\n                            <\/div>\n                                    <div class=\"afeb-form-field-type-date afeb-field-group afeb-column afeb-field-group-message elementor-repeater-item-8c9bd7e\">\n                                                    <label for=\"form-field-message\" class=\"afeb-form-field-label\">\n                                Select the date                            <\/label>\n                        <input size=\"1\"type=\"date\" name=\"form_fields[message]\" id=\"form-field-message\" class=\"afeb-form-field  afeb-form-field-textual\"><input class=\"afeb-form-error-message\" type=\"hidden\" name=\"date_error_message\" value=\"Please use a valid date\" \/>                    <\/div>\n                                    <div class=\"afeb-form-field-type-recaptcha_v3 afeb-field-group afeb-column afeb-field-group-9b56d49 elementor-repeater-item-9b56d49\">\n                                            <\/div>\n                                <div class=\"afeb-field-group afeb-column afeb-form-field-type-submit\">        <button type=\"submit\" class=\"afeb-form-field-button\" data-text=\"Send\" data-loading-text=\"Please wait ...\">\n            <span >\n                                                    <span>Send<\/span>\n                                            <\/span>\n        <\/button>\n        <\/div>            <\/div>\n                                <\/form>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Form Builder Widget in the Vertex Addons for Elementor plugin allows you to create fully customizable and responsive forms with ease. This widget provides a user-friendly drag-and-drop interface with extensive styling options. Say goodbye to third-party form plugins and build stunning forms directly within Elementor.<\/p>\n","protected":false},"featured_media":5416,"template":"","meta":{"_acf_changed":false},"class_list":["post-4763","widgets","type-widgets","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/widgets\/4763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/widgets"}],"about":[{"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/types\/widgets"}],"version-history":[{"count":1,"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/widgets\/4763\/revisions"}],"predecessor-version":[{"id":5525,"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/widgets\/4763\/revisions\/5525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/media\/5416"}],"wp:attachment":[{"href":"https:\/\/demo.vertexaddons.com\/showcase\/wp-json\/wp\/v2\/media?parent=4763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}