Popup forms in php

How to Create Popup Contact Form using jQuery and PHP

In this article, we are showing how to build an Email contact form as a popup dialog box. I used the HTML contact form with the jQuery plugin to display a popup dialog box without a page refreshing.

Generally, The build PHP form has the user name, user email, Subject, user message, and more fields. The popup contact form page is an important component of all websites. This contact form may vary based on its purpose.

The popup dialog box PHP contact form to gather user name, user email, Subject, user message. While running the website landing page will not automatically show the popup dialog on page load. Rather, the popup shows a clickable contact button.

Markup of Our PHP Popup Contact Form

Let’s write the jQuery, Ajax, and PHP code to add all the fields into our contact form.

index.html
  
Popup Contact Form with Email
 Contact Us  
 
 
Contact Us
 ×  
 
 
   
Name: 
Email: 
Message: 
 
 
 Submit 
  
 
 
 

Open/Close Popup dialog box :

Include the jQuery library link.

The following jQuery code helps to hide or show the popup dialog box

click button id (#mbtn) open the Popup dialog box.

The close button (.close) hide the Popup dialog box.

index.html
    

Contact Form Submission

When the contact form clicks the submit button open popup dialog window, the contact form press submit data to the server-side(PHP) script through jQuery and Ajax.

index.html
    

Contact Form Send Email using PHP

• ajax_submit.php — Ajax request to send an email using PHP.
• PHP mail() — Send HTML email with form inputs
• json_encode() — Return the response in JSON encoded

ajax_submit.php
 [email protected]'; $status = 0; $statusMsg = 'Oops! Something went wrong! Please try again late.'; if(isset($_POST['contact_submit']))< // Get the submitted form data $email = $_POST['email']; $name = $_POST['name']; $message = $_POST['message']; // Check whether submitted data is not empty if(!empty($email) && !empty($name) && !empty($message))< if(filter_var($email, FILTER_VALIDATE_EMAIL) === false)< $statusMsg = 'Please enter a valid email.'; >else< $emailSubject = 'Contact Request Submitted by '.$name; $htmlContent = '
Contact Request Submitted
 
Name
'.$name.'
 
Email
'.$email.'
 
Message
'.$message.'
'; // Set content-type header for sending HTML email $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; // Additional headers $headers .= 'From: '.$name.''. "\r\n"; // Send email $sendEmail = mail($toEmail, $emailSubject, $htmlContent, $headers); if($sendEmail)< $status = 1; $statusMsg = 'Thanks! Your contact request has been submitted successfully.'; >else < $statusMsg = 'Failed! Your contact request submission failed, please try again.'; >> >else < $statusMsg = 'Please fill in all the mandatory fields.'; >> $response = array( 'status' => $status, 'message' => $statusMsg ); echo json_encode($response); ?> 

style.css
 .container < padding: 20px; >::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: #969494; >::-moz-placeholder < /* Firefox 19+ */ color: #969494; >:-ms-input-placeholder < /* IE 10+ */ color: #969494; >:-moz-placeholder < /* Firefox 18- */ color: #969494; >.animate-top < position:relative; animation:animatetop 0.4s >@keyframes animatetop to> .modal < display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); >.modal-content < margin: 8% auto; border: 1px solid #888; width: 475px; background-color: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; >.modal-header < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e9ecef; border-top-left-radius: .3rem; border-top-right-radius: .3rem; >.modal-title < margin-bottom: 0; line-height: 1.5; margin-top: 0; >h5.modal-title < font-size: 1.25rem; color: #666; >.close < float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; >button.close < padding: 0; background-color: transparent; border: 0; -webkit-appearance: none; >.modal-header .close < padding: 1rem; margin: -1rem -1rem -1rem auto; >.close:not(:disabled):not(.disabled) < cursor: pointer; >.modal-body < flex: 1 1 auto; padding: 1rem; >.modal-body p < margin-top: 0; margin-bottom: 1rem; >.modal-footer < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #e9ecef; >.btn < display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; cursor: pointer; >.btn-primary < color: #fff; background-color: #07a8ff; border-color: #07a8ff; display: block; margin: 0 auto; >.btn-primary:hover < color: #fff; background-color: #0069d9; border-color: #0062cc; >.btn:focus, .btn:hover < text-decoration: none; >h2 .form-group < margin-bottom: 15px; >label < display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; >.form-control < display: block; width: 95%; /*height: 34px;*/ padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; >.form-control:focus < border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); >.alert < position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; >.alert-success < color: #155724; background-color: #d4edda; border-color: #c3e6cb; >.alert-danger

Download source code from github | Live Demo – youtube

Recent Posts

Источник

How to Create a PHP Popup For Your Website

Popups are useful to increase conversion sales and engagement of your website. There are many different ways to create a popup window. We will mainly focus on how to create PHP popup windows.

PHP is a powerful programming language that can be used to create dynamic and interactive web pages. One of the things that PHP can be used for is creating popup windows.

In this blog post, we will discuss the different types of PHP popup windows available and how to create a simple PHP popup window. We will also give tips for creating PHP popup windows.

Let’s get started!

What is a PHP popup?

A PHP popup is a window that is created using the PHP programming language via Javascript. PHP can be used to create dynamic and interactive web pages, including popup windows. Popup windows are often used to provide additional information or solicit input from the user.

PHP popups can be an alert window, prompt window, or confirm window. You can choose one of these options according to your preference.

Why Use a PHP Popup on Your Website?

There are many different reasons you might want to use a PHP popup window on your website. However, some of the most common reasons are listed below. You can check them out and decide which one works best for you.

You can use it to display a message to the user or demand input from the user. Also, to confirm a requested action and warn your visitors about something, you can use PHP popups.

Apart from these, you can use these popups to display helpful information to your audience and provide a more intuitive UI for your visitors. In that sense, your website would be more engaging and usable. It also helps you to increase sales conversions.

How to Create a PHP Popup

To create a php popup for your website, you need to know how to use the PHP programming language. If you are not familiar with PHP, you can benefit from many online tutorials. However, it takes time and practice to learn this coding language.

Once you have learned the basics of PHP, you will create dynamic and interactive web pages, including popup windows.

There are three main types of php popups: confirmation popups, info popups, and warning popups.

A confirmation popup is used to ask the user if they want to take action, such as clicking a link. An info popup is used to display information to the user, such as a message or an error. A warning popup is used to warn the user about something.

The code for a simple php popup window is shown below:

In this code, we are using the PHP echo statement to print the text «This is a simple PHP popup window.» to the popup window. The PHP echo statement is used to print text, variables, or HTML code to a web page.

For example, it can look like this:

Creating a simple php popup window is easy. You need to use the echo statement to output the desired content for the popup window. Then you can add the code to your website’s code injection part.

You can create alert windows, confirm windows and prompt windows with PHP.

1. PHP Alert Window

One of the most common types of PHP popup windows is the alert window. The alert window is used to display a message to the user. For example, the following code will create an alert window:

The code above will create an alert window that says «Welcome.» An alert box is used if you ensure the information comes through the user. It means an alert box popup when you click on a «button.»

2. PHP Confirm Window

Another common type of php popup window is the confirm window. The confirm window is used to display a message to the user and to solicit input from the user. For example, the following code will create a confirm window:

      Click Me   

The code above will create a confirm window that says «Click me». It can look like this:

3. PHP Prompt Window

The third type of php popup window is the prompt window. The prompt window is used to display a message and to get input from the user. For example, the following code will create a prompt window:

      Prompt Box   

The code above will create a prompt window that says, «Please enter your name: » The user will be able to type in their name and click on the «OK» button. The input from the user will be stored in the name variable.

After the user types their name on this popup, it will redirect them to another page that says, «Welcome to Popupsmart! Have a great day!»

You can change the settings of this prompt code and write what you want to say to your target audience.

Try Popupsmart For Creating Popups Easily

If you are looking for a professional-looking PHP popup window, you can try out the Popupsmart, a no-code popup builder. It is easy to use, and it comes with a wide range of features that will help you create an effective php popup window for your website.

You can try out Popupsmart for free today and create your first popup easily!

Let’s have a look at how to create a popup with Popupsmart in 7 steps together.

1st Step: Click on «Create a new popup» on Dashboard.

2nd Step: Select your business objective. For example, you can choose «Show Up Announcement» to announce news about your products and services.

3rd Step: You can choose from our popup templates in the «Layouts» section. Popupsmart has many different popup templates you can use on your website.

4th Step: After choosing your layout, you can proceed to the «Customize» section to improve your popup’s design.

Edit your popup’s headline and description parts with CTA words and reach out to your target audience. Choose your popup’s image here as well.

5th Step: You can proceed to the «Target» part. From this section, you can choose your popup’s target audience, schedule details, visitor behavior, visitor device, and view frequency. It helps you to reach your target audience properly. When you complete this part, click on «Next to Publish.»

6th Step: In the «Publish» part, you can copy your popup’s embed code, as is shown below. Don’t forget to verify your domain so that your popup can work without any errors. Then, paste this code into your website’s code injection part.

Besides this JS code, you can change it to your PHP code. Our popups are compatible with PHP websites so that you can use them efficiently. Also, you can use Google Tag Manager to embed your popup codes on your website.

7th Step: When you have finished your popup, click on the «Save & Publish» part.

Final: Here is the final look of the popup!

Tips for Creating an Effective Popup Window

By following these tips, you can create an effective PHP popup window that will improve the usability of your website and increase the conversion rate of your website.

• Use a clear and concise message so that your visitors can understand what the popup is saying without having to read through a lot of text.
• Make sure that the popup window is relevant to your target audience.
• Use buttons that are easy to understand.
• Try not to clutter the popup window with too many options. In that way, your visitors can interact with your popup without any trouble.
• Test the popup window on different browsers and devices. While creating your popup, you need to test the popup window since it may not look the same on different browsers.
• Use a professional-looking icon.
• Make sure that the popup window looks good on all screen sizes. It is important for a convenient user experience on your website.

In Conclusion

Creating a PHP popup window is easy once you have learned the necessary coding knowledge. It can be developed with different parameters such as width and length.

You can create an alert window, confirm, and prompt window with PHP. However, if you do not want to deal with it, our popup builder can help you. As we have explained before briefly, creating popups with Popupsmart is easy and user-friendly.

What are your thoughts on using php popup windows on your website? Have you used them before? Let us know in the comments below!

Check out these blog posts as well:

Источник