我目前正在尝试为我的联系表单获取特定的外观。 我想要复制的样式来自https://blind.com/contact/。我特别感兴趣的是自定义选项下拉列表,必填字段“red*”和Clant't或could send消息。
下面是我的代码:
HTML:
<section id="contact-site">
<div class="wrapper">
<div class="spacer2"></div>
<div><h1><?php echo $lang['chead'] ?></h1></div>
<div><h2><?php echo $lang['ctxt'] ?></h2>
</div>
<form class="contact-form" action="contactform.php" method="post">
<select class="contact-form-txt contact-form-large" name="subject">
<option><?php echo $lang['cformSub1'] ?></option>
<option><?php echo $lang['cformSub2'] ?></option>
<option><?php echo $lang['cformSub3'] ?></option>
</select>
<input type="text" name="name" class="contact-form-txt contact-form-backwards" placeholder="<?php echo $lang['cformName'] ?>">
<input type="text" name="company" class="contact-form-txt" placeholder="<?php echo $lang['cformComp'] ?>">
<input type="email" name="mail" class="contact-form-txt contact-form-backwards" placeholder="<?php echo $lang['cformMail'] ?>">
<input type="tel" name="phone" class="contact-form-txt" placeholder="<?php echo $lang['cformPhon'] ?>">
<input type="text" name="location" class="contact-form-txt" placeholder="<?php echo $lang['cformLoca'] ?>">
<select class="contact-form-txt" name="foundAt">
<option><?php echo $lang['cformKnow1'] ?></option>
<option><?php echo $lang['cformKnow2'] ?></option>
<option><?php echo $lang['cformKnow3'] ?></option>
<option><?php echo $lang['cformKnow4'] ?></option>
<option><?php echo $lang['cformKnow5'] ?></option>
</select>
<textarea name="message" class="contact-form-txt contact-form-large" placeholder="<?php echo $lang['cformTxt'] ?>"></textarea>
<button type="submit" name="submit" class="contact-form-btn"><?php echo $lang['cformSend'] ?></button>
</form>
</div>
</section>
CSS:
#contact-site{
background-color: #111111;
background-size: cover;
padding: 80px 0;
}
#contact-site h1{
color: white;
text-align: center;
font-weight: 300;
letter-spacing: 2px;
font-family: 'Raleway', sans-serif;
font-size: 2.3rem;
}
#contact-site h2{
color: white;
text-align: center;
font-weight: 900;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 1rem;
}
.contact-form{
max-width: 1200px;
width: 80vw;
margin: auto;
padding: 0 10px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-form-txt {
display: block;
width: 48%;
box-sizing: border-box;
margin: 20px 10px;
border: 0;
background: white;
padding: 30px 20px;
outline: none;
color: #111111;
transition: 0.5s;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1rem;
}
.contact-form-large{
width: 100%;
}
.contact-form textarea{
height: 250px;
resize: none;
}
.contact-form-btn{
background-color: #eb432b;
color: white;
text-decoration: none;
font-weight: 500;
letter-spacing: 2px;
font-family: 'Raleway', sans-serif;
font-size: 1rem;
text-align: center;
display: inline-block;
padding: 20px;
transition: 0.3s;
border: none;
margin: 25px 20px auto auto;
cursor: pointer;
}
.contact-form-btn:hover{
background-color: white;
color: #111111;
}
PHP:
<?php
if (isset($_POST['submit'])) {
$subject = $_POST['subject'];
$name = $_POST['name'];
$company = $_POST['company'];
$mailFrom = $_POST['mail'];
$phone = $_POST['phone'];
$location = $_POST['location'];
$foundAt = $_POST['foundAt'];
$message = $_POST['message'];
$mailTo = "me@mycompany.com";
$headers = "From: ".$mailFrom;
$txt = "Name: ".$name."\n"."Company: ".$company."\n"."Located in: ".$location."\n"."Found me through: ".$foundAt."\n"."Phone: ".$phone."\n"."E-Mail: ".$mailFrom."\n"."Message: ".$message;
mail($mailTo, $subject, $txt, $headers);
header("Location: contact.php?mailsend");
}
?>
这些提示可能会有帮助:
required
属性添加到必填输入(in也可以在css选择器内部用于红色开头的输入)