Responsive Contact Form with PHP
by Vincy. Last modified on July 19th, 2022.
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.
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.
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
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"
class="demoInputBox">
</div>
<div class="contact-row column-right">
<label>Email</label> <span id="userEmail-info" class="info"></span><br />
<input type="text" name="userEmail" id="userEmail"
class="demoInputBox">
</div>
<div class="contact-row">
<label>Phone</label> <span id="subject-info" class="info"></span><br />
<input type="text" name="subject" id="subject"
class="demoInputBox">
</div>
<div>
<label>Message</label> <span id="content-info" class="info"></span><br />
<textarea name="content" id="content" class="demoInputBox"
rows="3"></textarea>
</div>
<div>
<input type="submit" value="Send" class="btnAction" />
</div>
</form>
<div id="loader-icon" style="display: none;">
<img src="LoaderIcon.gif" />
</div>
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%;
margin-top:5px;
}
.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 {
outline:none;
}
.column-right
{
margin-right: 6px;
}
.contact-row
{
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.
<?php
require('phpmailer/class.phpmailer.php');
$mail = new PHPMailer();
$mail->IsSMTP();
$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;
$mail->MsgHTML($_POST["content"]);
$mail->IsHTML(true);
if(!$mail->Send()) {
echo "<p class='error'>Problem in Sending Mail.</p>";
} else {
echo "<p class='success'>Contact Mail Sent.</p>";
}
?>
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.