简体   繁体   English

如何使简单的联系表单输入框响应

[英]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 活动页面位于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 的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%;
}

Make your form elements width:100% . 使您的表单元素width:100%

textarea{
  width:100%;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM