The Contact Form<\/b> is a must-have feature for the web application. It helps the site admin to get feedback\/suggestions\/complaints from the users. Generally, the contact form element is placed inside a web page. But, this placement can be changed as per the UI of the website. The modal window is a very useful element to add a contact form. You can easily integrate the contact form functionality to any web page using a modal window.<\/p>\n
The modal window opens a popup element over the current web page without interacting page elements. The popup contact form<\/b> can be attached to any link or button on the web page. In this tutorial, we will show you how to create a contact form in a popup dialog using jQuery and send an email with form data using Ajax and PHP.<\/p>\n
In the example script, we will build a contact form in a popup window and submit the form data without page refresh using jQuery Ajax. On form submission, the form data will be sent to the site admin via email using PHP.<\/p>\n
Trigger Button:<\/b> Modal Dialog:<\/b> Open\/Hide Modal Popup:<\/b> The following code helps to open or close the popup window using jQuery.<\/p>\n When the submit button is clicked on the dialog window, the form data is submitted to the server-side script via jQuery and Ajax.<\/p>\n
\nThe following button (#mbtn<\/code>) triggers the modal window.<\/p>\n<button<\/span> id<\/span>=\"mbtn\"<\/span> class<\/span>=\"btn btn-primary turned-button\"<\/span>><\/span>Contact Us<\/button<\/span>><\/span><\/pre>\n
\nThe following HTML creates a modal dialog with the contact form.<\/p>\n<div<\/span> id<\/span>=\"modalDialog\"<\/span> class<\/span>=\"modal\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"modal-content animate-top\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"modal-header\"<\/span>><\/span>\r\n <h5<\/span> class<\/span>=\"modal-title\"<\/span>><\/span>Contact Us<\/h5<\/span>><\/span>\r\n <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"close\"<\/span> data-dismiss<\/span>=\"modal\"<\/span> aria-label<\/span>=\"Close\"<\/span>><\/span>\r\n <span<\/span> aria-hidden<\/span>=\"true\"<\/span>><\/span>\u00d7<\/span<\/span>><\/span>\r\n <\/button<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <form<\/span> method<\/span>=\"post\"<\/span> id<\/span>=\"contactFrm\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"modal-body\"<\/span>><\/span>\r\n <!-- Form submission status --><\/span>\r\n <div<\/span> class<\/span>=\"response\"<\/span>><\/span><\/div<\/span>><\/span>\r\n\t\t\t\r\n <!-- Contact form --><\/span>\r\n <div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n <label<\/span>><\/span>Name:<\/label<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"name\"<\/span> id<\/span>=\"name\"<\/span> class<\/span>=\"form-control\"<\/span> placeholder<\/span>=\"Enter your name\"<\/span> required<\/span>=\"\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n <label<\/span>><\/span>Email:<\/label<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"email\"<\/span> name<\/span>=\"email\"<\/span> id<\/span>=\"email\"<\/span> class<\/span>=\"form-control\"<\/span> placeholder<\/span>=\"Enter your email\"<\/span> required<\/span>=\"\"<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n <label<\/span>><\/span>Message:<\/label<\/span>><\/span>\r\n <textarea<\/span> name<\/span>=\"message\"<\/span> id<\/span>=\"message\"<\/span> class<\/span>=\"form-control\"<\/span> placeholder<\/span>=\"Your message here\"<\/span> rows<\/span>=\"6\"<\/span>><\/span><\/textarea<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"modal-footer\"<\/span>><\/span>\r\n <!-- Submit button --><\/span>\r\n <button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-primary\"<\/span>><\/span>Submit<\/button<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n <\/form<\/span>><\/span>\r\n <\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
\nInclude the jQuery library.<\/p>\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n\n
#mbtn<\/code>) open the modal.<\/li>\n.close<\/code>) hide the modal.<\/li>\n<\/ul>\n<script<\/span>><\/span>\r\n\/\/ Get the modal<\/span>\r\nvar<\/span> modal = $('#modalDialog'<\/span>);\r\n\r\n\/\/ Get the button that opens the modal<\/span>\r\nvar<\/span> btn = $(\"#mbtn\"<\/span>);\r\n\r\n\/\/ Get the <span> element that closes the modal<\/span>\r\nvar<\/span> span = $(\".close\"<\/span>);\r\n\r\n$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\r\n \/\/ When the user clicks the button, open the modal <\/span>\r\n btn.on('click'<\/span>, function<\/span>(<\/span>) <\/span>{\r\n modal.show();\r\n });\r\n \r\n \/\/ When the user clicks on <span> (x), close the modal<\/span>\r\n span.on('click'<\/span>, function<\/span>(<\/span>) <\/span>{\r\n modal.hide();\r\n });\r\n});\r\n\r\n\/\/ When the user clicks anywhere outside of the modal, close it<\/span>\r\n$('body'<\/span>).bind('click'<\/span>, function<\/span>(e<\/span>)<\/span>{\r\n if<\/span>($(e.target).hasClass(\"modal\"<\/span>)){\r\n modal.hide();\r\n }\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\nContact Form Submission<\/h2>\n
\n
$.ajax()<\/code> method is used to initialize the Ajax request.<\/li>\najax_submit.php<\/code>).<\/li>\n<script<\/span>><\/span>\r\n$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\r\n $('#contactFrm'<\/span>).submit(function<\/span>(e<\/span>)<\/span>{\r\n e.preventDefault();\r\n $('.modal-body'<\/span>).css('opacity'<\/span>, '0.5'<\/span>);\r\n $('.btn'<\/span>).prop('disabled'<\/span>, true<\/span>);\r\n \r\n $form = $(this<\/span>);\r\n $.ajax({\r\n type: \"POST\"<\/span>,\r\n url: 'ajax_submit.php'<\/span>,\r\n data: 'contact_submit=1&'<\/span>+$form.serialize(),\r\n dataType: 'json'<\/span>,\r\n success: function<\/span>(response<\/span>)<\/span>{\r\n if<\/span>(response.status == 1<\/span>){\r\n $(