简体   繁体   中英

Contact Form with required fields and custom drop down

I am currently trying to get a certain look for my contact form. The style I want to copy is from https://blind.com/contact/ I am especially interested in the custom option dropdowns, the required field "red *" and the couldn't or respectively could send message.

Mine is looking like this atm:
我的看起来像这个atm with the basic dropdowns and no response message.

Here is my code:

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");
    }
    
?>

These tips may be helpful:

  1. Dropdowns - here is a good tutorial about dropdown customization, also this article about css transitions could be helpful
  2. Required fields - first of all, add required attribute to the required inputs (in can also be used inside css selectors for inputs with red starts)
  3. Stars - usually such elements are implemented using css::after selector

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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