Comp Stuff Comp Stuff - 1 month ago 12
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 http://qtest.pw

<div id="ContactWrapper">
<div id="ContactDiv1">
<h2>Request an Appointment</h2>
<?php
$action=$_REQUEST['action'];
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"/>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$phone=$_REQUEST['phone'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($phone=="")||($email=="")||($message==""))
{
echo "All fields are required, please fill <a href=\"\">the form</a> again.";
}
else{
$from="From: $name<$email>\r\nReturn-path: $email";
$subject="Appointment Request from Webpage for $name at $phone";
mail("helmichfrontdesk@gmail.com", $subject, $message, $from);
echo "Thank you for your Request. Your Email was sent! We will get back to you within one Business Day";
}
}
?>


CSS

#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

Make your form elements width:100%.

textarea{
  width:100%;
}