提问者:小点点

带有必填字段和自定义下拉框的联系人表单


我目前正在尝试为我的联系表单获取特定的外观。 我想要复制的样式来自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");
    }
    
?>

共1个答案

匿名用户

这些提示可能会有帮助:

  1. 下拉菜单-这里有一个关于下拉菜单定制的很好的教程,这篇关于css转换的文章也会很有帮助
  2. 必填字段-首先,将required属性添加到必填输入(in也可以在css选择器内部用于红色开头的输入)
  3. 星型-通常使用css::After Selector实现此类元素