Comp Stuff Comp Stuff - 1 year ago 78
CSS Question

How to make a simple contact form input box responsive

I am learning how to make responsive sites..

I found a small/short contact form script that is sufficient for our needs.

The "message" input box on this is not responsive.

The active page is at

<div id="ContactWrapper">
<div id="ContactDiv1">
<h2>Request an Appointment</h2>
if ($action=="") /* display the contact form */
<form action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
Your name:<br>
<input name="name" type="text" value="" size="30"/><br>
Your phone number:<br>
<input name="phone" type="text" value="" size="30"/><br>
Your email:<br>
<input name="email" type="text" value="" size="30"/><br>
Your request:<br>
<textarea name="message" rows="4" cols="70"></textarea><br>
<input type="submit" value="Send email"/>
else /* send the submitted data */
if (($name=="")||($phone=="")||($email=="")||($message==""))
echo "All fields are required, please fill <a href=\"\">the form</a> again.";
$from="From: $name<$email>\r\nReturn-path: $email";
$subject="Appointment Request from Webpage for $name at $phone";
mail("", $subject, $message, $from);
echo "Thank you for your Request. Your Email was sent! We will get back to you within one Business Day";


#ContactWrapper {
clear: both;
margin: auto;
max-width: 1232px;
display: block;
padding-left: calc((100% - 1232px)/2);
padding-right: calc((100% - 1232px)/2);
#ContactDiv1 {
clear: none;
float: left;
margin-left: 0;
width: 46%;
display: block;
margin-right: 2%;
padding-bottom: 4%;

Answer Source

Make your form elements width:100%.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download