Custom Form Action in Wordpress

Question

I use a custom form that I have been using for a while now. The form validates via PHP held on the same page and returns the result to the user on the same page.

I am building my first WordPress site and seem to have a problem with the form action. I have tried several paths for this action but it returns to a 404 page and the email fails to send.

I am not sure if this form method will work within WP or if I'm just being a dumb noob. (i'm betting on the later).

I'd rather not use a form plugin but if all else fails I may have to.

Any help here is much appreciated

<?php

    /*
        Template Name:Contact Page
    */

?>

<?php
if($_POST)
{
$javascript_enabled = trim($_POST['browser_check']);
$contact_name = trim($_POST['name']);
$email = trim($_POST['email']);
$antispam = trim($_POST['AntiSpam']);
$msg = trim($_POST['msg']);
//mail settings
$enquiry_address = "blah@blah.com";
$headers = "From: ".$email;
$message = "Contact name: $contact_name\nContact Email: $email\nMessage: $msg";
$to = $enquiry_address;
$antispam_answer = "35";
    if ( $name == "" )
    {
        $result = "Please enter your NAME";
    }
    elseif (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email)) 
    {
        $result = "Enter a valid EMAIL address";
    }
    elseif($antispam <> $antispam_answer) {
    $result = "The Anti-Spam answer is not correct.";
    }
    elseif ( strlen($msg) < 10 )
    {
        $result = "Message must be more than 10 characters";
    }
    else
    {           
            mail($to, $subject, $message, $headers);
        if( $selfcopy == "yes" )
            mail($email, $subject, $message, $headers);
        $result = "Your mail has been sent succesfully! Thanks for your enquiry";       
    }
}
    if($javascript_enabled == "true") {
        echo $result;
        die();
    }
?>

<?php get_header(); ?>

<div class="content">

    <div class="row">
        <div id="map"></div>
    </div>

    <div class="main2">

    <div class="row narrow clearfix">

        <div class="half">


            <form name="contactform" id="form" method="post" action="" class="clearfix">

                <div id="result"><?php if($result) echo "<div class='message'>".$result."</div>"; ?></div>

                <input type="text" class="text" placeholder="CONTACT NAME *" required name="name" value="<?php echo $contact_name; ?>" />

                <input type="email" class="text" placeholder="CONTACT EMAIL ADDRESS *" required name="email" value="<?php echo $email; ?>" />

                <input type="text" name="AntiSpam" class="text" maxlength="2" required placeholder="ANTISPAM - WHAT IS 20 + 15 ? *" />

                <textarea class="textarea" name="msg" placeholder="YOUR MESSAGE *" required value="<?php echo $msg; ?>" ></textarea>

                <input type="submit" name="submit" value="SEND" id="submit"/>

            </form>


            <script type="text/javascript">
                document.contactform.browser_check.value = "true"; //sets the hidden input(browser_check) value as true if the javascript is enabled.
                $("#submit").click(function(){
                $('#result').html('<img src="_images/loading.gif" class="loading-img" alt="loader image">').fadeIn();
                var input_data = $('#form').serialize();
                $.ajax({
                type: "POST",
                url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
                data: input_data,
                 success: function(msg){
                $('.loading-img').remove(); //Removing the loader image because the validation is finished
                $('<div class="message">').html(msg).appendTo('div#result').hide().fadeIn('slow'); //Appending the output of the php validation in the html div
                }                      
                }); 
                return false;
                }); 
            </script>
        </div><!--/half-->

        <div class="half last">

        </div><!--/half-->
    </div><!--/row-->
    </div><!--/main-->

</div><!--/content-->

<?php get_footer(); ?>

Answer 1

One solution that worked for me:

Before submitting a form, if you are using:

<input type="text" name="name" value=""> 

Then you must replace it with:

<input type="text" name="myname" value="">

name="name" stops your form action in WordPress ...

Answer 2

Please use the below code it will help you

<form name="contactform" id="form" method="post" action="<?php echo  get_permalink($page_id); ?>" class="clearfix">


</form>

In form action use get_permalink() function to set form action page url.