Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tut] How to Create Popup Contact Form Dialog using PHP and jQuery

#1
How to Create Popup Contact Form Dialog using PHP and jQuery

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/01/how-to-create-popup-contact-form-dialog-using-php-and-jquery.jpg" width="550" height="288" title="" alt="" /></div><div><p>Last modified on September 5th, 2019 by Vincy.</p>
<p>Contact form is an important element in your website. It encourages communication and acts as a bridge between you and your users. It allows users to post their feedback, comments, questions and more.</p>
<p>It helps you to get ideas and opinions that lead your business to growth. It is one among the important aspects that will decide your success.</p>
<p>There are many popup contact form plugins available online. These plugins help to add a contact form in your application with a modern outlook. You should choose them with care.</p>
<p>I have developed a light-weight&nbsp;<a href="https://phppot.com/shop/contact-form-iris/">contact form component named Iris</a>. It is an interactive, integrative component. You can plug-in this component with your application without putting much effort. If you are searching for a secured simple contact form component, then Iris is the one you are looking for.</p>
<p>You should also read through the <a href="https://phppot.com/php/simple-secure-spam-free-contact-form-in-php-iris/">simple secure spam-free contact form</a>. It details on the critical elements of a contact form and how they should be designed. It is a highly recommended read from me.</p>
<p><img class="alignnone size-large wp-image-10513" src="https://phppot.com/wp-content/uploads/2019/08/how-display-php-contact-form-dialog-using-jquery-550x288.jpg" alt="How Display PHP Contact Form Dialog using jQuery" width="550" height="288" srcset="https://phppot.com/wp-content/uploads/2019/08/how-display-php-contact-form-dialog-using-jquery-550x288.jpg 550w, https://phppot.com/wp-content/uploads/20...00x157.jpg 300w, https://phppot.com/wp-content/uploads/20...68x402.jpg 768w, https://phppot.com/wp-content/uploads/20...jquery.jpg 1200w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><a class="demo" href="https://phppot.com/demo/how-display-php-contact-form-dialog-using-jquery/">View Demo</a></p>
<p>Developing a PHP contact form is a simple job. We have seen so many examples for creating a contact form in PHP. The&nbsp;<a href="https://phppot.com/php/php-contact-form/">simple contact form</a> example has the basic code skeleton. It has minimal fields and a simple mail sending script.</p>
<p>Generally, the contact form has the name, email, message and more fields. The fields may vary based on the application’s nature or its purpose.&nbsp;</p>
<p>In some application there may be a lengthy contact form with elaborate list of fields phone, fax and more. But, sleek forms with minimal inputs encourage users to interact.</p>
<p>If you want to get more information, then make it via optional custom fields. <a href="https://phppot.com/php/php-contact-form-with-custom-fields/">Contact form with custom fields</a> will help users who have no objection to give extra data.</p>
<p>In this article, we are going how to code for showing a PHP contact form as a popup dialog. I used the jQuery core to display a popup dialog with the contact form HTML.</p>
<h2>What is inside?</h2>
<ol>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#purpose-of-the-contact-form-interface-in-a-web-application">Purpose of the contact form on a web application</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#things-to-remember-while-creating-a-contact-form">Things to remember while creating a contact form</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#about-php-contact-form-popup-with-jquery-example">About this example</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#file-structure">File structure</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#create-html-interface-for-the-contact-form">Create HTML interface for the contact form</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#php-script-to-send-contact-email">PHP script to send contact email</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#php-contact-form-popup-with-jquery-output">PHP contact form popup with jQuery Output</a></li>
<li><a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#conclusion">Conclusion</a></li>
</ol>
<p>There are various ways to allow users to contact you via your application interface. Contact form is one of a popular component of an application. It lets users contact the website owner or admin.</p>
<p>Generally, contact forms help the users to send their thoughts, doubts. Some of the main purposes of this contact form interface are here as listed below.</p>
<ul>
<li>To collect feedback, comments from the users or customers.</li>
<li>For getting the advantages of user interaction with your application.</li>
<li>To receive user’s support request.</li>
<li>To allow users to send inquiries for paid services or customization.</li>
<li>To get biodata, proof and <a href="https://phppot.com/php/php-contact-form-with-add-more-file-attachment-option/">more references as attachments</a>.</li>
</ul>
<p>While creating a contact form in your application, you have to remember the following. These points will help to create a safe contact for an interface for your application.</p>
<h3>IMPORTANT – Read this!</h3>
<ul>
<li>Secure your platform from the bots. Yes! Internet is full of automated bots hungry for spreading spam.</li>
<li>Prevent abnormal frequent hits which may stress your server.</li>
<li>Ensure data sanitization before processing user data</li>
<li>Check request origin to prevent automated software to post the form data.</li>
<li>Validate on both client and server side.</li>
<li>No design is design. Do not thrust the UI upon the users, let its focus be on good communication and ease of use.</li>
</ul>
<p>As the internet is an open world, it allows anonymous users. So, there is the possibility of malicious access. So, this kind of safety measures will reduce the risk.</p>
<p>It is not only applicable for the contact form but also for all the interfaces that get data from the end-user.</p>
<p>The contact form pops up to collect name, email, subject and message from the users. While running this example, the landing page will not show the popup on page load. Rather, it shows a clickable contact icon.</p>
<p>By clicking this icon, a contact form will popup with the name, email and more fields. For displaying the popup interface, I used jQuery library functions. It will add an overlay on top of the webpage while showing the popup.</p>
<p>In this example, all the contact details are mandatory. I have added a minimal validation script in JavaScript to validate the form data. This script is to check the availability of the contact data before posting it to the server-side.</p>
<p>When the user submits the form, the PHP code will receive the posted form data. Then, it processes the mail function with this contact information.</p>
<p>In this example, I have used the PHP mail function to send the contact email. If you want to send email using SMPT, the linked article has the code for implementing it.</p>
<h3>Merits and demerits of a popup contact form dialog</h3>
<p>There are both advantages and disadvantages of showing a popup contact form dialog.</p>
<p>The advantage is to let the user stay on his current page with any navigation or page refresh. The popup dialog interface will give a modern outlook for your application</p>
<p>Some web users hate popups. This is the main disadvantages. Also, it is a little bit of effort taking work to make a popup interface mobile friendly.</p>
<h2 id="file-structure">File Structure</h2>
<p>Below screenshot shows the file structure of this PHP contact form example. It shows the custom files and libraries used in this code.</p>
<p>It has a very minimal amount of dynamic code that is for sending the contact email. Other than that, it has more of the HTML, CSS, JavaScript code.</p>
<p><img class="alignnone size-full wp-image-10500" src="https://phppot.com/wp-content/uploads/2019/08/contact-form-popup-file-structure.jpg" alt="Contact Form Popup File Structure" width="323" height="164" srcset="https://phppot.com/wp-content/uploads/2019/08/contact-form-popup-file-structure.jpg 323w, https://phppot.com/wp-content/uploads/20...00x152.jpg 300w" sizes="(max-width: 323px) 100vw, 323px"></p>
<p>The index.php is the landing page which contains HTML to display clickable contact icon. It also has a hidden contact form container and a jQuery script to popup the form.</p>
<p>The vendor directory contains the jQuery library source.</p>
<p>This section is to learn how to create HTML to display the contact form interface in a jQuery popup.</p>
<p>It has the code to show the contact icon which popups contact form on its click event. The click event on the outside of the contact form layout will close the popup dialog.</p>
<p>I have added CSS and jQuery script to reflect the appropriate UI changes based on the user’s click action event. It helps to toggle the contact form popup dialog and acknowledge the user accordingly.</p>
<pre class="prettyprint">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;How to display PHP contact form popup using jQuery&lt;/title&gt; &lt;script src="./vendor/jquery/jquery-3.2.1.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="./css/style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="contact-icon"&gt; &lt;img src="./icon/icon-contact.png" alt="contact" height="50" width="50"&gt; &lt;/div&gt; &lt;!--Contact Form--&gt; &lt;div id="contact-popup"&gt; &lt;form class="contact-form" action="" id="contact-form" method="post" enctype="multipart/form-data"&gt; &lt;h1&gt;Contact Us&lt;/h1&gt; &lt;div&gt; &lt;div&gt; &lt;label&gt;Name: &lt;/label&gt;&lt;span id="userName-info" class="info"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="text" id="userName" name="userName" class="inputBox" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt; &lt;label&gt;Email: &lt;/label&gt;&lt;span id="userEmail-info" class="info"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="text" id="userEmail" name="userEmail" class="inputBox" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt; &lt;label&gt;Subject: &lt;/label&gt;&lt;span id="subject-info" class="info"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="text" id="subject" name="subject" class="inputBox" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt; &lt;label&gt;Message: &lt;/label&gt;&lt;span id="userMessage-info" class="info"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;textarea id="message" name="message" class="inputBox"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="submit" id="send" name="send" value="Send" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre>
<p>Below code shows the styles created for this PHP contact form UI. I have used very less CSS for this example to make it generic for any theme. You can override the below style to customize the form design for your website theme.</p>
<pre class="prettyprint lang-php">body { color: #232323; font-size: 0.95em; font-family: arial; } div#success { text-align: center; box-shadow: 1px 1px 5px #455644; background: #bae8ba; padding: 10px; border-radius: 3px; margin: 0 auto; width: 350px; } .inputBox { width: 100%; margin: 5px 0px 15px 0px; border: #dedede 1px solid; box-sizing: border-box; padding: 15px; } #contact-popup { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); display: none; color: #676767; } .contact-form { width: 350px; margin: 0px; background-color: white; font-family: Arial; position: relative; left: 50%; top: 50%; margin-left: -210px; margin-top: -255px; box-shadow: 1px 1px 5px #444444; padding: 20px 40px 40px 40px; } #contact-icon { padding: 10px 5px 5px 12px; width: 58px; color: white; box-shadow: 1px 1px 5px grey; border-radius: 3px; cursor: pointer; margin: 60px auto; } .info { color: #d30a0a; letter-spacing: 2px; padding-left: 5px; } #send { background-color: #09F; border: 1px solid #1398f1; font-family: Arial; color: white; width: 100%; padding: 10px; cursor: pointer; } #contact-popup h1 { font-weight: normal; text-align: center; margin: 10px 0px 20px 0px; } .input-error { border: #e66262 1px solid; } </pre>
<h2>jQuery Script to show Contact form popup and validate form fields</h2>
<p>Below script shows the jQuery callback function added for the document ready event.</p>
<p>It has two event handling functions. One is to show contact form popup dialog on the click event of the contact icon.</p>
<p>The other is to handle the form submit to validate contact data entered by the user.</p>
<p>The validation script focuses on minimalistic filter appliances. It helps to prevent users from sending the form with an empty data or with invalid data (email) format.</p>
<pre class="prettyprint">&lt;script&gt; $(document).ready(function () { $("#contact-icon").click(function () { $("#contact-popup").show(); }); //Contact Form validation on click event $("#contact-form").on("submit", function () { var valid = true; $(".info").html(""); $("inputBox").removeClass("input-error"); var userName = $("#userName").val(); var userEmail = $("#userEmail").val(); var subject = $("#subject").val(); var message = $("#message").val(); if (userName == "") { $("#userName-info").html("required."); $("#userName").addClass("input-error"); } if (userEmail == "") { $("#userEmail-info").html("required."); $("#userEmail").addClass("input-error"); valid = false; } if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) { $("#userEmail-info").html("invalid."); $("#userEmail").addClass("input-error"); valid = false; } if (subject == "") { $("#subject-info").html("required."); $("#subject").addClass("input-error"); valid = false; } if (message == "") { $("#userMessage-info").html("required."); $("#message").addClass("input-error"); valid = false; } return valid; }); }); &lt;/script&gt; </pre>
<p>There are many ways of sending email in PHP. In this example, I used the in-built mail function to send the contact email.</p>
<p>Before sending the mail, we have to set the header, recipient, and the other parameters.</p>
<p>Below PHP script gets the posted contact form data using $_POST request array. In PHP, it sets the From data with mail header using the name, email posted via the form.</p>
<p>In this code, we can see the PHP filter_var() applied to sanitize the form data before processing.</p>
<p>Once the email sent, the PHP mail() function will return boolean true. If so, it shows a success message to the user.</p>
<pre class="prettyprint lang-php">&lt;?php if (! empty($_POST["send"])) { $name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING); $email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL); $subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING); $message = filter_var($_POST["message"], FILTER_SANITIZE_STRING); $toEmail = "[email protected]"; $mailHeaders = "From: " . $name . "&lt;" . $email . "&gt;\r\n"; if (mail($toEmail, $subject, $message, $mailHeaders)) { ?&gt; &lt;div id="success"&gt;Your contact information is received successfully!&lt;/div&gt; &lt;?php } } ?&gt; </pre>
<p>In a previous article, we have seen an example to <a href="https://phppot.com/php/send-email-in-php-using-gmail-smtp/">send an email with Gmail SMTP using PHPMailer library</a>.</p>
<h2>PHP contact form popup with jQuery Output</h2>
<p>The figure shows the screenshot of the contact form popup dialog. You can see the clickable icon that is behind the overlay.</p>
<p>I have taken this screenshot by sending the form with an empty <em>message</em> and invalid email format. In the following screenshot, you can see the corresponding error message in the popup dialog. This is how this form alerts users about the improper data entered by them.</p>
<p><img class="alignnone size-large wp-image-10494" src="https://phppot.com/wp-content/uploads/2019/08/contact-form-popup-output-550x679.jpg" alt="Contact Form Popup Output" width="550" height="679" srcset="https://phppot.com/wp-content/uploads/2019/08/contact-form-popup-output-550x679.jpg 550w, https://phppot.com/wp-content/uploads/20...43x300.jpg 243w, https://phppot.com/wp-content/uploads/20...68x948.jpg 768w, https://phppot.com/wp-content/uploads/20...output.jpg 1030w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>After sending the contact email, this message helps to acknowledge the user. This acknowledgment will toggle off the contact form popup.</p>
<p><img class="alignnone size-large wp-image-10495" src="https://phppot.com/wp-content/uploads/2019/08/contact-mail-success-550x230.jpg" alt="Contact Mail Success" width="550" height="230" srcset="https://phppot.com/wp-content/uploads/2019/08/contact-mail-success-550x230.jpg 550w, https://phppot.com/wp-content/uploads/20...00x126.jpg 300w, https://phppot.com/wp-content/uploads/20...68x322.jpg 768w, https://phppot.com/wp-content/uploads/20...uccess.jpg 802w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2 id="conclusion">Conclusion</h2>
<p>Contact form in your application will help to gather information from the user. It will give you valuable feedback, ideas from the end-user to grow your business.</p>
<p>We have seen the advantages and disadvantages of having a popup contact form interface in an application. Also, we have seen lot of information about the purposes, basic need to integrate a contact form in an application.</p>
<p>The example code we have created for this article will reduce your effort to create a contact form for your application. It is a basic solution for the one who wants to deploy a medium to interact with the site users.</p>
<p><a class="demo" href="https://phppot.com/demo/how-display-php-contact-form-dialog-using-jquery/">View Demo</a> <a class="download" href="https://phppot.com/downloads/how-display-php-contact-form-dialog-using-jquery.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/php/how-display-php-contact-form-dialog-using-jquery/#top" class="top">↑ Back to Top</a> </p>
</div>


https://www.sickgaming.net/blog/2019/09/...nd-jquery/
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016