{"id":2300,"date":"2017-04-06T16:04:27","date_gmt":"2017-04-06T16:04:27","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2300"},"modified":"2017-09-13T16:36:20","modified_gmt":"2017-09-13T16:36:20","slug":"bootstrap-modal-popup-form-submit-jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/","title":{"rendered":"Bootstrap Modal Popup Form Submit with Ajax &#038; PHP"},"content":{"rendered":"<p>If your web application uses <b>Twitter Bootstrap<\/b> framework, modal popup integration is very easy. Bootstrap helps you to add a popup to button or link without using additional JavaScript code. Also, using Bootstrap, you can build a well-designed HTML form in less time.<\/p>\n<p>This tutorial will show how you can integrate a <b>modal popup form<\/b> to your website using Bootstrap and submit the form with jQuery, Ajax, and PHP. For example, we&#8217;ll build a contact form with <b>Bootstrap modal popup<\/b> and submit the form after validation using <b>jQuery, Ajax, and PHP<\/b>. The following functionality will be implemented in Bootstrap modal form script.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Modal popup with contact form using Bootstrap.<\/li>\n<li>Validate form data before submit using jQuery.<\/li>\n<li>Submit form data with jQuery, Ajax, and PHP.<\/li>\n<li>Send the email to website admin using PHP.<\/li>\n<\/ul>\n<h2>Bootstrap &#038; jQuery Library<\/h2>\n<p>Bootstrap is used to create modal popup and design HTMl form, include the bootstrap and jQuery library first.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">&lt;!-- Latest minified bootstrap css --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">link<\/span> <span style=\"color:#bf4f24\">rel<\/span>=<span style=\"color:#0b6125\">\"stylesheet\"<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- jQuery library --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.0\/jquery.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- Latest minified bootstrap js --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<h2>HTML Code: Bootstrap Modal Popup Form<\/h2>\n<p>The following HTML creates a dialog popup window using bootstrap.  A button is used to trigger this modal window and open a form for submitting the contact request. The button or link needs two <code>data-*<\/code> attributes, <code>data-toggle=\"modal\"<\/code> and <code>data-target=\"#modalForm\"<\/code>. Also, the modal div must have and id attribute that should be the same as <code>data-target<\/code> attribute of trigger link or button.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">&lt;!-- Button to trigger modal --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">button<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"btn btn-success btn-lg\"<\/span> <span style=\"color:#bf4f24\">data-toggle<\/span>=<span style=\"color:#0b6125\">\"modal\"<\/span> <span style=\"color:#bf4f24\">data-target<\/span>=<span style=\"color:#0b6125\">\"#modalForm\"<\/span>>\r\n    Open Contact Form\r\n&lt;\/<span style=\"color:#bf4f24\">button<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- Modal --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal fade\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"modalForm\"<\/span> <span style=\"color:#bf4f24\">role<\/span>=<span style=\"color:#0b6125\">\"dialog\"<\/span>>\r\n    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal-dialog\"<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal-content\"<\/span>>\r\n            <span style=\"color:#5a525f;font-style:italic\">&lt;!-- Modal Header --><\/span>\r\n            &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal-header\"<\/span>>\r\n                &lt;<span style=\"color:#bf4f24\">button<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"button\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"close\"<\/span> <span style=\"color:#bf4f24\">data-dismiss<\/span>=<span style=\"color:#0b6125\">\"modal\"<\/span>>\r\n                    &lt;<span style=\"color:#bf4f24\">span<\/span> <span style=\"color:#bf4f24\">aria-hidden<\/span>=<span style=\"color:#0b6125\">\"true\"<\/span>><span style=\"color:#811f24;font-weight:700\">&amp;times;<\/span>&lt;\/<span style=\"color:#bf4f24\">span<\/span>>\r\n                    &lt;<span style=\"color:#bf4f24\">span<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"sr-only\"<\/span>>Close&lt;\/<span style=\"color:#bf4f24\">span<\/span>>\r\n                &lt;\/<span style=\"color:#bf4f24\">button<\/span>>\r\n                &lt;<span style=\"color:#bf4f24\">h4<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal-title\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"myModalLabel\"<\/span>>Contact Form&lt;\/<span style=\"color:#bf4f24\">h4<\/span>>\r\n            &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">&lt;!-- Modal Body --><\/span>\r\n            &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal-body\"<\/span>>\r\n                &lt;<span style=\"color:#bf4f24\">p<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"statusMsg\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n                &lt;<span style=\"color:#bf4f24\">form<\/span> <span style=\"color:#bf4f24\">role<\/span>=<span style=\"color:#0b6125\">\"form\"<\/span>>\r\n                    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-group\"<\/span>>\r\n                        &lt;<span style=\"color:#bf4f24\">label<\/span> <span style=\"color:#bf4f24\">for<\/span>=<span style=\"color:#0b6125\">\"inputName\"<\/span>>Name&lt;\/<span style=\"color:#bf4f24\">label<\/span>>\r\n                        &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-control\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"inputName\"<\/span> <span style=\"color:#bf4f24\">placeholder<\/span>=<span style=\"color:#0b6125\">\"Enter your name\"<\/span>\/>\r\n                    &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n                    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-group\"<\/span>>\r\n                        &lt;<span style=\"color:#bf4f24\">label<\/span> <span style=\"color:#bf4f24\">for<\/span>=<span style=\"color:#0b6125\">\"inputEmail\"<\/span>>Email&lt;\/<span style=\"color:#bf4f24\">label<\/span>>\r\n                        &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"email\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-control\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"inputEmail\"<\/span> <span style=\"color:#bf4f24\">placeholder<\/span>=<span style=\"color:#0b6125\">\"Enter your email\"<\/span>\/>\r\n                    &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n                    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-group\"<\/span>>\r\n                        &lt;<span style=\"color:#bf4f24\">label<\/span> <span style=\"color:#bf4f24\">for<\/span>=<span style=\"color:#0b6125\">\"inputMessage\"<\/span>>Message&lt;\/<span style=\"color:#bf4f24\">label<\/span>>\r\n                        &lt;<span style=\"color:#bf4f24\">textarea<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-control\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"inputMessage\"<\/span> <span style=\"color:#bf4f24\">placeholder<\/span>=<span style=\"color:#0b6125\">\"Enter your message\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">textarea<\/span>>\r\n                    &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n                &lt;\/<span style=\"color:#bf4f24\">form<\/span>>\r\n            &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">&lt;!-- Modal Footer --><\/span>\r\n            &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"modal-footer\"<\/span>>\r\n                &lt;<span style=\"color:#bf4f24\">button<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"button\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"btn btn-default\"<\/span> <span style=\"color:#bf4f24\">data-dismiss<\/span>=<span style=\"color:#0b6125\">\"modal\"<\/span>>Close&lt;\/<span style=\"color:#bf4f24\">button<\/span>>\r\n                &lt;<span style=\"color:#bf4f24\">button<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"button\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"btn btn-primary submitBtn\"<\/span> <span style=\"color:#bf4f24\">onclick<\/span>=<span style=\"color:#0b6125\">\"submitContactForm()\"<\/span>>SUBMIT&lt;\/<span style=\"color:#bf4f24\">button<\/span>>\r\n            &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n    &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<h2>JavaScript Code: Validate and Submit Form<\/h2>\n<p>The <code>submitContactForm()<\/code> function is triggered on clicking the form submit button. In the <code>submitContactForm()<\/code> function, popup form data is validated before submit and submitted to the <code>submit_form.php<\/code> file for further processing using jQuery and Ajax.<\/p>\n<pre style=\"background:#f9f9f9;color:#080808\">&lt;<span style=\"color:#bf4f24\">script<\/span>>\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">submitContactForm<\/span>(){\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> reg <span style=\"color:#794938\">=<\/span><span style=\"color:#cf5628\"> \/^[A-Z0-9._%+-]+@([A-Z0-9-]+<span style=\"color:#811f24;font-weight:700\">\\.<\/span>)+[A-Z]{2,4}$\/i<\/span>;\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> name <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputName<\/span>')<span style=\"color:#693a17\">.val<\/span>();\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> email <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputEmail<\/span>')<span style=\"color:#693a17\">.val<\/span>();\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> message <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputMessage<\/span>')<span style=\"color:#693a17\">.val<\/span>();\r\n    <span style=\"color:#794938\">if<\/span>(name.trim() <span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">''<\/span> ){\r\n        <span style=\"color:#693a17\">alert<\/span>(<span style=\"color:#0b6125\">'Please enter your name.'<\/span>);\r\n        <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputName<\/span>')<span style=\"color:#693a17\">.focus<\/span>();\r\n        <span style=\"color:#794938\">return<\/span> <span style=\"color:#811f24;font-weight:700\">false<\/span>;\r\n    }<span style=\"color:#794938\">else<\/span> <span style=\"color:#794938\">if<\/span>(email.trim() <span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">''<\/span> ){\r\n        <span style=\"color:#693a17\">alert<\/span>(<span style=\"color:#0b6125\">'Please enter your email.'<\/span>);\r\n        <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputEmail<\/span>')<span style=\"color:#693a17\">.focus<\/span>();\r\n        <span style=\"color:#794938\">return<\/span> <span style=\"color:#811f24;font-weight:700\">false<\/span>;\r\n    }<span style=\"color:#794938\">else<\/span> <span style=\"color:#794938\">if<\/span>(email.trim() <span style=\"color:#794938\">!<\/span><span style=\"color:#794938\">=<\/span> <span style=\"color:#0b6125\">''<\/span> <span style=\"color:#794938\">&amp;<\/span><span style=\"color:#794938\">&amp;<\/span> <span style=\"color:#794938\">!<\/span>reg.<span style=\"color:#693a17\">test<\/span>(email)){\r\n        <span style=\"color:#693a17\">alert<\/span>(<span style=\"color:#0b6125\">'Please enter valid email.'<\/span>);\r\n        <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputEmail<\/span>')<span style=\"color:#693a17\">.focus<\/span>();\r\n        <span style=\"color:#794938\">return<\/span> <span style=\"color:#811f24;font-weight:700\">false<\/span>;\r\n    }<span style=\"color:#794938\">else<\/span> <span style=\"color:#794938\">if<\/span>(message.trim() <span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">''<\/span> ){\r\n        <span style=\"color:#693a17\">alert<\/span>(<span style=\"color:#0b6125\">'Please enter your message.'<\/span>);\r\n        <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputMessage<\/span>')<span style=\"color:#693a17\">.focus<\/span>();\r\n        <span style=\"color:#794938\">return<\/span> <span style=\"color:#811f24;font-weight:700\">false<\/span>;\r\n    }<span style=\"color:#794938\">else<\/span>{\r\n        <span style=\"color:#794938\">$<\/span><span style=\"color:#693a17\">.ajax<\/span>({\r\n            type:<span style=\"color:#0b6125\">'POST'<\/span>,\r\n            url:<span style=\"color:#0b6125\">'submit_form.php'<\/span>,\r\n            data:<span style=\"color:#0b6125\">'contactFrmSubmit=1&amp;name='<\/span><span style=\"color:#794938\">+<\/span>name<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'&amp;email='<\/span><span style=\"color:#794938\">+<\/span>email<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'&amp;message='<\/span><span style=\"color:#794938\">+<\/span>message,\r\n            <span style=\"color:#bf4f24\">beforeSend<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span> () {\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.submitBtn<\/span>')<span style=\"color:#693a17\">.attr<\/span>(<span style=\"color:#0b6125\">\"disabled\"<\/span>,<span style=\"color:#0b6125\">\"disabled\"<\/span>);\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.modal-body<\/span>')<span style=\"color:#693a17\">.css<\/span>(<span style=\"color:#0b6125\">'opacity'<\/span>, <span style=\"color:#0b6125\">'.5'<\/span>);\r\n            },\r\n            <span style=\"color:#bf4f24\">success<\/span>:<span style=\"color:#a71d5d;font-style:italic\">function<\/span>(msg){\r\n                <span style=\"color:#794938\">if<\/span>(msg <span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">'ok'<\/span>){\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputName<\/span>')<span style=\"color:#693a17\">.val<\/span>(<span style=\"color:#0b6125\">''<\/span>);\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputEmail<\/span>')<span style=\"color:#693a17\">.val<\/span>(<span style=\"color:#0b6125\">''<\/span>);\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#inputMessage<\/span>')<span style=\"color:#693a17\">.val<\/span>(<span style=\"color:#0b6125\">''<\/span>);\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.statusMsg<\/span>')<span style=\"color:#693a17\">.html<\/span>(<span style=\"color:#0b6125\">'&lt;span style=\"color:green;\">Thanks for contacting us, we<span style=\"color:#696969;font-weight:700\">\\'<\/span>ll get back to you soon.&lt;\/p>'<\/span>);\r\n                }<span style=\"color:#794938\">else<\/span>{\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.statusMsg<\/span>')<span style=\"color:#693a17\">.html<\/span>(<span style=\"color:#0b6125\">'&lt;span style=\"color:red;\">Some problem occurred, please try again.&lt;\/span>'<\/span>);\r\n                }\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.submitBtn<\/span>')<span style=\"color:#693a17\">.removeAttr<\/span>(<span style=\"color:#0b6125\">\"disabled\"<\/span>);\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.modal-body<\/span>')<span style=\"color:#693a17\">.css<\/span>(<span style=\"color:#0b6125\">'opacity'<\/span>, <span style=\"color:#0b6125\">''<\/span>);\r\n            }\r\n        });\r\n    }\r\n}\r\n&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<h2>Send Contact Request Email (submit_form.php)<\/h2>\n<p>In the <code>submit_form.php<\/code> file, the following works are done for processing the form submit request.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Check whether submitted form is not empty and validate email by FILTER_VALIDATE_EMAIL filter in PHP.<\/li>\n<li>Get the form data using PHP <code>$_POST<\/code> method.<\/li>\n<li>Send HTML email with contact details to site admin using PHP <code>mail()<\/code> function.<\/li>\n<\/ul>\n<p>Once the required action is completed, the status message is rendered that would be used by the Ajax <code>success<\/code> method. <\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php<br \/><\/span><span style=\"color: #007700\">if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'contactFrmSubmit'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;(!<\/span><span style=\"color: #0000BB\">filter_var<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">FILTER_VALIDATE_EMAIL<\/span><span style=\"color: #007700\">)&nbsp;===&nbsp;<\/span><span style=\"color: #0000BB\">false<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">])){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Submitted&nbsp;form&nbsp;data<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$name&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$message<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/*<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Send&nbsp;email&nbsp;to&nbsp;admin<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*\/<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$to&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'admin@example.com'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$subject<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'Contact&nbsp;Request&nbsp;Submitted'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$htmlContent&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;Contact&nbsp;request&nbsp;has&nbsp;submitted&nbsp;at&nbsp;CodexWorld,&nbsp;details&nbsp;are&nbsp;given&nbsp;below.&lt;\/h4&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;table&nbsp;cellspacing=\"0\"&nbsp;style=\"width:&nbsp;300px;&nbsp;height:&nbsp;200px;\"&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Name:&lt;\/th&gt;&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&nbsp;style=\"background-color:&nbsp;#e0e0e0;\"&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Email:&lt;\/th&gt;&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Message:&lt;\/th&gt;&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$message<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/table&gt;'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Set&nbsp;content-type&nbsp;header&nbsp;for&nbsp;sending&nbsp;HTML&nbsp;email<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$headers&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"MIME-Version:&nbsp;1.0\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #DD0000\">\"\\r\\n\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$headers&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">\"Content-type:text\/html;charset=UTF-8\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #DD0000\">\"\\r\\n\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Additional&nbsp;headers<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$headers&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'From:&nbsp;CodexWorld&lt;sender@example.com&gt;'&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #DD0000\">\"\\r\\n\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Send&nbsp;email<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">mail<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$to<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$subject<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$htmlContent<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$headers<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$status&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'ok'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$status&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'err'<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Output&nbsp;status<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$status<\/span><span style=\"color: #007700\">;die;<br \/>}<\/span><\/pre>\n<h2>Conclusion<\/h2>\n<p>This example script provides an easy and quick way to integrate popup form and send form data to email. If you want to store the form data for future use, insert the form data into the MySQL database before sending the email.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your web application uses Twitter Bootstrap framework, modal popup integration is very easy. Bootstrap helps you to add a popup to button or link without using additional JavaScript code. Also, using Bootstrap, you can <\/p>\n","protected":false},"author":1,"featured_media":2301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[274],"tags":[28,275,23,24,16,14,126],"class_list":["post-2300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-ajax","tag-bootstrap","tag-email","tag-html-email","tag-jquery","tag-php","tag-popup","cat-274-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bootstrap Modal Popup Form Submit with Ajax &amp; PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Example script to create bootstrap modal popup contact form, validate form data and submit using jQuery and Ajax. Learn how to send bootstrap modal form data to email in PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Modal Popup Form Submit with Ajax &amp; PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Example script to create bootstrap modal popup contact form, validate form data and submit using jQuery and Ajax. Learn how to send bootstrap modal form data to email in PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-06T16:04:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-09-13T16:36:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Bootstrap Modal Popup Form Submit with Ajax &#038; PHP\",\"datePublished\":\"2017-04-06T16:04:27+00:00\",\"dateModified\":\"2017-09-13T16:36:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/\"},\"wordCount\":382,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png\",\"keywords\":[\"Ajax\",\"Bootstrap\",\"Email\",\"HTML Email\",\"jQuery\",\"PHP\",\"Popup\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/\",\"name\":\"Bootstrap Modal Popup Form Submit with Ajax & PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png\",\"datePublished\":\"2017-04-06T16:04:27+00:00\",\"dateModified\":\"2017-09-13T16:36:20+00:00\",\"description\":\"Example script to create bootstrap modal popup contact form, validate form data and submit using jQuery and Ajax. Learn how to send bootstrap modal form data to email in PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/bootstrap-modal-popup-form-submit-jquery-ajax-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Modal Popup Form Submit with Ajax &#038; PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Modal Popup Form Submit with Ajax & PHP - CodexWorld","description":"Example script to create bootstrap modal popup contact form, validate form data and submit using jQuery and Ajax. Learn how to send bootstrap modal form data to email in PHP.","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:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Modal Popup Form Submit with Ajax & PHP - CodexWorld","og_description":"Example script to create bootstrap modal popup contact form, validate form data and submit using jQuery and Ajax. Learn how to send bootstrap modal form data to email in PHP.","og_url":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-04-06T16:04:27+00:00","article_modified_time":"2017-09-13T16:36:20+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Bootstrap Modal Popup Form Submit with Ajax &#038; PHP","datePublished":"2017-04-06T16:04:27+00:00","dateModified":"2017-09-13T16:36:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/"},"wordCount":382,"commentCount":10,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png","keywords":["Ajax","Bootstrap","Email","HTML Email","jQuery","PHP","Popup"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/","url":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/","name":"Bootstrap Modal Popup Form Submit with Ajax & PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png","datePublished":"2017-04-06T16:04:27+00:00","dateModified":"2017-09-13T16:36:20+00:00","description":"Example script to create bootstrap modal popup contact form, validate form data and submit using jQuery and Ajax. Learn how to send bootstrap modal form data to email in PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png","width":1366,"height":768,"caption":"bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/bootstrap-modal-popup-form-submit-jquery-ajax-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Modal Popup Form Submit with Ajax &#038; PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/04\/bootstrap-modal-popup-form-submit-jquery-ajax-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-B6","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2300"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2300\/revisions"}],"predecessor-version":[{"id":2776,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2300\/revisions\/2776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2301"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}