Wordpress Contact Form Same Page

Question

I have a contact form in Wordpress on a page titled contact. I'm trying to submit it to the same page because I have the php mail code on the same page in a custom page template. On submit however the URL still loads as wordpress/contact/ but the wordpress content just displays as Not Found, like there isn't a contact page. If I set the action to a mail.php outside Wordpress it works fine. I'm utterly stuck.

<form class="alignleft" id="contact" action="[insert_php] the_permalink(); [/insert_php]" method="post">
    <input id="name" type="text" name="name" placeholder="Name" required="" />
    <input id="email" type="email" name="email" placeholder="Email" required="" />
    <select id="subject" name="subject">
        <option value="General Question">General Question</option>
        <option value="General Donation Information">General Donation Information</option>
        <option value="Membership Information">Membership Information</option>
        <option value="Taste of Loveland - Restaurant Vendor Information">Taste of Loveland - Restaurant Vendor Information</option>
        <option value="Taste of Loveland - Silent Auction Information">Taste of Loveland - Silent Auction Information</option>
        <option value="Tree for All - Tree Donation Information">Tree for All - Tree Donation Information</option>
        <option value="Tree for All - Fashion Show Information">Tree for All - Fashion Show Information</option>
        <option value="Other Event Information">Other Event Information</option></select>
    <textarea id="message" cols="40" maxlength="800" name="message" placeholder="Message" required="" rows="6"></textarea>
    <input type="submit" name="submitted" value="Send" />
</form>

This is the page-contact.php custom page template used for the page.

<?php
get_header(); ?>

<div id="main-content" class="main-content">

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

<?php
if(isset($_POST['submitted'])) {
        $mailTo = "test@wboco.com";
        $subject = $_POST['subject'];
        $message = $_POST['message'];
        $email = $_POST['email'];
        $name = $_POST['name'];
        $body = "New message from FHSL contact form:<br><br>".$message."<br>";   
        $headers = "To: <".$mailTo.">\r\n";
        $headers .= "From: ".$name." <".$email.">\r\n";
        $headers .= "Content-Type: text/html";
        $mail_success =  mail($mailTo, utf8_decode($subject), utf8_decode($body), $headers);    
}
?>


            <?php
                // Start the Loop.
                while ( have_posts() ) : the_post();

                    // Include the page content template.
                    get_template_part( 'content', 'page' );

                endwhile;
            ?>

        </div><!-- #content -->
    </div><!-- #primary -->
</div><!-- #main-content -->

<?php
get_footer();
?>

Answer 1

Add a prefix to all your form input names(eg cf_name rather than name), I've ran into this problem and for some reason WordPress uses some of those name values and will throw a 404 if they are overwritten. I am unclear as to why but I am positive this is your problem!

Answer 2

Add same issue with input name="name" and input name="e-mail". Fixed by adding prefix_ to input name's.

 <input type="text" name="prefix_name" id="name" class="" placeholder="prefix_name"> <input type="email" name="prefix_email" id="email" class="" placeholder="prefix_email">