[英]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.