设计师的PHP表单

Question

我对PHP没有任何了解。任何人都可以帮我制作这个表格并发送邮件：

那么我如何才能使这个表格与PHP一起使用？我可以使用Javascript发送表单数据，还是必须使用PHP。

/*start RSVP*/
.rsvp {
    width: 100%;
    padding: 100px 0;
    background-image: url("../images/rsvp.jpg");
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position:30% 40%;
}
.rsvp .rsvp-nested{
    background-color:white;
    padding:100px 50px;
}
.rsvp .rsvp-nested h1{
    font-size: 50px;
    margin:0;
    margin-bottom: 40px;
    font-weight: bold;
    text-align: center;
    font-family: 'Shadows Into Light', cursive;
    color: rgb(254, 88, 149);
}
.rsvp .rsvp-nested p{
    text-align:center;
    font-size:18px;
    font-weight:300;
    font-family:Consolas,Arial;
    margin-bottom:30px;
}
.rsvp .rsvp-nested a[href^="mailto"]{
      overflow-wrap: break-word;
}
.rsvp .rsvp-nested input{
    color: rgb(254, 88, 149);
    font: 300 14px "consolas", sans-serif;
    width:100%;
    border: none;
    border-bottom: 1px solid #cdc1c1;
    margin-bottom: 50px;
    padding: 8px;
    background-color:transparent;
    outline:rgb(254, 88, 149);
}
.select-style {
    overflow: hidden;
    margin-bottom: 50px;
    background: url("../images/arrow.png") right center no-repeat;
    border: none;
    border-bottom: 1px solid #cdc1c1;
}
.select-style select {
    color: rgb(254, 88, 149);
    font-size:14px;
    font-family:Consolas;
    padding: 8px;
    width: 100%;
    border: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    outline:none;
}
.rsvp textarea{
    color: rgb(254, 88, 149);
    font: 300 14px "consolas", sans-serif;
    border: none;
    width:100%;
    border-bottom: 1px solid #cdc1c1;
    margin-bottom: 50px;
    padding: 8px;
    resize:none;
    outline:none;
}
.rsvp button[type="submit"]{
    display:block;
    padding:15px 50px;
    margin:auto;    
    border:none;
    outline:none;
    color:rgb(254, 88, 149);
    border:2px solid rgb(254, 88, 149);
    font-size:20px;
    background-color:transparent;
    font-family: 'Shadows Into Light', cursive;
    cursor:pointer;
    transition:all .4s linear;
}
.rsvp select option{
    /*text-overflow: ellipsis;*/
}
.rsvp button[type="submit"]:hover{
    color:white;
    background-color:rgb(254, 88, 149);
}

/*end RSVP*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <section id="rsvp" class="rsvp">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="rsvp-nested">
                        <h1>are you attending?</h1>
                        <p>Please send before <span>December 1st, 2014.</span>  For any question please email: <br />
                            <a href="mailto:tutamon_designs@gmail.com">tutamon_designs@gmail.com</a>
                        </p>
                        <form action="/" method="post">
                            <div class="row">
                                <div class="col-lg-6">
                                    <input type="text" name="name" placeholder="Name" />
                                </div>
                                <div class="col-lg-6">
                                    <input type="text" name="name" placeholder="Email" />
                                </div>
                                <div class="col-lg-6">
                                    <div class="select-style">
                                        <select name="guests">
                                            <option value="0" disabled="" selected="">number of attendees</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="select-style">
                                        <select style="" name="rsvp">
                                            <option value="0" disabled="" selected="">Will you be coming</option>
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <textarea placeholder="Leave your Message"></textarea>
                                </div>
                                <button type="submit" name="theButton">I'm Attending</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

首先确定你的延伸是.php

第二次改变你的

<input type="text" name="name" placeholder="Email" />致

<input type="text" name="email" placeholder="Email" />和

<textarea placeholder="Leave your Message"></textarea>致

<textarea name="message" placeholder="Leave your Message"></textarea>

第3次将此代码放在您的页面中Click Here

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$guests = $_POST['guests'];
$rsvp = $_POST['rsvp'];
$message = $_POST['message'];
$submit = $_POST['theButton'];
if(isset($submit)){
$msg = "Name: $name /n Email: $email /n Number Of Attendees: $guests /n Will You Be Coming: $rsvp /n Message: $message"'
mail('tutamon_designs@gmail.com', 'Are You Attending?', $msg);
}
?>

此代码将用户输入发送至tutamon_designs@gmail.com