Responsive Contact Form with PHP

Last modified on June 22nd, 2019 by Vincy.

Responsive contact form will be useful while integrating this code component with an application which is already responsive. Contact form is one of the important component in an application which will be a medium used for the conversion.

It must be responsive to fit into various view port mobile, tablet in different screen size. In this example, I have created a one using CSS media queries with minimal design variations with responsiveness.

Check out the best secure responsive contact form you will ever get in the Internet. It is that is built with minimalism design concepts with state-of-the-art technology. It will definitely increase your enquiries.


In this example, the responsive contact form has the Name, Email, Phone and the Message fields. These fieldsets are designed to be viewed responsively based on the viewport.  Using media queries I set the window size region to change the fieldset styles. In the last article, we have seen an example code for the Slide-In contact form.

View Demo

Responsive Contact Form HTML

In a previous tutorial, we have seen how to do the responsive design with CSS media queries.

The responsive contact form HTML code is specified below. Also, I have shown the CSS media queries which are used to make the contact form to be fluid in all view port. 

<form id="frmContact" action="" method="post">
    <div id="mail-status"></div>
    <div class="contact-row column-right">
        <label style="padding-top: 20px;">Name</label> <span
            id="userName-info" class="info"></span><br /> <input
            type="text" name="userName" id="userName"
    <div class="contact-row column-right">
        <label>Email</label> <span id="userEmail-info" class="info"></span><br />
        <input type="text" name="userEmail" id="userEmail"
    <div class="contact-row">
        <label>Phone</label> <span id="subject-info" class="info"></span><br />
        <input type="text" name="subject" id="subject"
        <label>Message</label> <span id="content-info" class="info"></span><br />
        <textarea name="content" id="content" class="demoInputBox"
        <input type="submit" value="Send" class="btnAction" />
<div id="loader-icon" style="display: none;">
    <img src="LoaderIcon.gif" />

Ad the styles are,

body {
	max-width: 550px;
    font-family: Arial;

#frmContact {
	border-top: #a2d0c8 2px solid;
    background: #b1e2da;
	padding: 10px;

#frmContact div {
	margin-bottom: 20px;

#frmContact div label {
	margin: 5px 0px 0px 5px;    
	color: #49615d;

.demoInputBox {
	padding: 10px;
	border: #a5d2ca 1px solid;
	border-radius: 4px;
	background-color: #FFF;
	width: 100%;

.error {
	background-color: #FF6600;
    padding: 8px 10px;
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 0.9em;

.success {
	background-color: #c3c791;
	padding: 8px 10px;
	color: #FFFFFF;
	border-radius: 4px;
    font-size: 0.9em;

.info {
	font-size: .8em;
	color: #FF6600;
	letter-spacing: 2px;
	padding-left: 5px;

.btnAction {
	background-color: #82a9a2;
    padding: 10px 40px;
    color: #FFF;
    border: #739690 1px solid;
	border-radius: 4px;

.btnAction:focus {
    margin-right: 6px;
    display: inline-block;
    width: 32%;
@media all and (max-width: 550px) {
    .contact-row {
        display: block;
        width: 100%;

Calling PHP Mail Script via jQuery AJAX

In this example, I have used jQuery AJAX to call PHP mail script to send the contact email using Gmail SMTP.


$mail = new PHPMailer();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "tls";
$mail->Port     = 587;  
$mail->Username = "Your SMTP UserName";
$mail->Password = "Your SMTP Password";
$mail->Host     = "Your SMTP Host";
$mail->Mailer   = "smtp";
$mail->SetFrom($_POST["userEmail"], $_POST["userName"]);
$mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]);
$mail->AddAddress("recipient address");	
$mail->Subject = $_POST["subject"];
$mail->WordWrap   = 80;


if(!$mail->Send()) {
	echo "<p class='error'>Problem in Sending Mail.</p>";
} else {
	echo "<p class='success'>Contact Mail Sent.</p>";

Responsive Contact Form Output

In this section, I have shown the responsive contact form output for the mobile and the desktop view.

Contact Form in Mobile View


Contact Form in Desktop View


View DemoDownload

↑ Back to Top

Share this Article