无法使用Bootstrap联系表单在WordPress HTML / PHP中工作

Question

I've come across a snippet of bootstrap code that constructs a nice looking contact form that I want to use on a WordPress site. I'm not able to get the form to communicate correctly with the php file given in the form "action".

I'm looking for help as to what my HTML and PHP should look like and how I can get this form to work in WordPress.

here is the HTML:

<form class="form-horizontal" role="form" method="post" action="http://stevetest.dev/wp-content/themes/bones/get_in_touch.php">
 <div class="form-group">
    <label for="Name" class="col-sm-3 control-label"><b>Your name</b></label>
    <div class="col-sm-9">
        <input class="form-control" name="name" id="Name" type="text" placeholder="Your Name or Company">
    </div>
</div>
<div class="form-group">
    <label for="contact-email" class="col-sm-3 control-label"><b>Your Email</b></label>
    <div class="col-sm-9">
        <input class="form-control" id="contact-email" name="contact-email" type="text" placeholder="">
    </div>
</div>
<div class="form-group">
    <label for="contact-message" class="col-sm-3 control-label"><b>Select Topic</b></label>
    <div class="col-sm-9">
        <select class="form-control" id="prependedInput" >
            <option>Please select topic...</option>
            <option>General</option>
            <option>Services</option>
            <option>Orders</option>
        </select>
    </div>
</div>
<div class="form-group">
    <label for="contact-message" class="col-sm-3 control-label"><b>Message</b></label>
    <div class="col-sm-9">
        <textarea class="form-control" rows="5" id="contact-message" name="contact-message"></textarea>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-12">
        <button type="submit" class="btn pull-right">Send</button>
    </div>
</div></form>

Below is the PHP:

<?php
if ($_POST["submit"]) {
    $name = $_POST['Name'];
    $email = $_POST['contact-email'];
    $message = $_POST['contact-message'];
    $from = 'Demo Contact Form'; 
    $to = '[e-mail]'; 
    $subject = 'Message from Contact Demo ';
    $body = "From: $name
 E-Mail: $email
 Message:
 $message";
    // Check if name has been entered
    if (!$_POST['name']) {
        $errName = 'Please enter your name';
    }
    // Check if email has been entered and is valid
    if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errEmail = 'Please enter a valid email address';
    }
    //Check if message has been entered
    if (!$_POST['message']) {
        $errMessage = 'Please enter your message';
    }

if (!$errName && !$errEmail && !$errMessage) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
    }
}
    }?>

When I submit the form, I get this form. I'm taken to a new page (get_in_touch.php). And I get the following error

Notice: Undefined index: submit in /srv/www/stevetest/htdocs/wp-content/themes/bones/get_in_touch.php on line 2

Answer 1

there isn't a name field of the input tag (use name attribute in the input tag). Name attribute is important while passing values next pages.