如何让一个简单的联系表单输入框响应式

Question

我正在学习如何制作响应式网站..

我找到了一个足以满足我们需求的小型/简短的联系表单脚本。

这里的“消息”输入框没有响应。

活动页面位于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 1

制作您的表单元素width:100%。

textarea{
  width:100%;
}