Wordpress custom form page causing 404 not found page

Question

I have created a wordpress contact page as detailded premium.wpmudev.org/blog/how-to-build-your-own-wordpress-contact-form-and-why/ and i have done some customization to the form. The problem is that with such customizations I get error 404 upon submitting the form. If I use the form as is provided in the above tutorial, does work fine.

Please find below my code:

<?php

  //response generation function

  $response = "";

  //function to generate response
  function my_contact_form_generate_response($type, $message){

    global $response;

    if($type == "success") $response = "<div class='success'>{$message}</div>";
    else $response = "<div class='error'>{$message}</div>";

  }

  //response messages
  $not_human       = "Human verification incorrect.";
  $missing_content = "Please supply all information.";
  $email_invalid   = "Email Address Invalid.";
  $message_unsent  = "Message was not sent. Try Again.";
  $message_sent    = "Thanks! Your message has been sent.";

  //user posted variables
  $name = $_POST['message_name'];
  $email = $_POST['message_email'];
  $message = $_POST['message_text'];
  $human = $_POST['message_human'];

  //php mailer variables
  $to = get_option('admin_email');
  $subject = "Someone sent a message from ".get_bloginfo('name');
  $headers = 'From: '. $email . "\r\n" .
    'Reply-To: ' . $email . "\r\n";

  if(!$human == 0){
    if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
    else {

      //validate email
      if(!filter_var($email, FILTER_VALIDATE_EMAIL))
        my_contact_form_generate_response("error", $email_invalid);
      else //email is valid
      {
        //validate presence of name and message
        if(empty($name) || empty($message)){
          my_contact_form_generate_response("error", $missing_content);
        }
        else //ready to go!
        {
          $sent = wp_mail($to, $subject, strip_tags($message), $headers);
          if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
          else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
        }
      }
    }
  }
  else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);

?>

<?php get_header(); ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_directory'); ?>/cf_style.css">
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_directory'); ?>/cf_responsive.css">


<div id="wrap">
<div id="main">

<div id="content">

    <?php the_post(); ?>
    <header class="page-entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header>

        <div class="entry-content" class="clearfix">
            <?php the_content(); ?>     
        </div>

        <section id="container" class="clearfix">

        <div id="respond">
            <?php echo $response; ?>

            <!--
                <form action="<?php the_permalink(); ?>" method="post">
                  <p><label for="name">Name: <span>*</span> <br><input type="text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
                  <p><label for="message_email">Email: <span>*</span> <br><input type="text" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
                  <p><label for="message_text">Message: <span>*</span> <br><textarea type="text" name="message_text"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
                  <p><label for="message_human">Human Verification: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
                  <input type="hidden" name="submitted" value="1">
                  <p><input type="submit"></p>
                </form>

            -->



        <form name="hongkiat" id="hongkiat-form" action="<?php the_permalink(); ?>" method="post"> 
        <div id="wrapping" class="clearfix">
            <section id="aligned">
            <input type="text" name="name" id="name" value="<?php echo esc_attr($_POST['name']); ?>" required autofocus placeholder="<?php _e( 'Il tuo nome', 'yoko' ); ?>" autocomplete="off" tabindex="1" class="txtinput neutral-field" onblur="displayValidationStatus(this)" onkeypress="displayNeutralStatus(this)"> <div class="input-validation"></div>

            <input type="email" name="email" id="email" value="<?php echo esc_attr($_POST['email']); ?>" required placeholder="<?php _e( 'eM@ail', 'yoko' ); ?>" autocomplete="off" tabindex="2" class="txtinput neutral-field" onblur="displayValidationStatus(this)" onkeypress="displayNeutralStatus(this)"> <div class="input-validation"></div>

            <input type="email" name="confermaEmail" id="confermaEmail" required placeholder="<?php _e( 'Conferma eM@ail', 'yoko' ); ?>" autocomplete="off" tabindex="3" class="txtinput neutral-field" onblur="displayValidationStatus(this)" onkeypress="displayNeutralStatus(this)"> <div class="input-validation"></div>

            <input type="url" name="website" id="website" value="<?php echo esc_attr($_POST['website']); ?>" placeholder="<?php _e( 'Sito web', 'yoko' ); ?>" pattern="^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?" autocomplete="off" tabindex="4" class="txtinput neutral-field" onblur="displayValidationStatus(this)" onkeypress="displayNeutralStatus(this)"> <div class="input-validation"></div>

            <input type="tel" name="telephone" id="telephone"  value="<?php echo esc_attr($_POST['telephone']); ?>" placeholder="<?php _e( 'Tel. opzionale, ma consigliato', 'yoko' ); ?>" tabindex="5" class="txtinput neutral-field" onblur="displayValidationStatus(this)" onkeypress="displayNeutralStatus(this)"> <div class="input-validation"></div>

            <input type="text" name="oggetto" id="oggetto" value="<?php echo esc_attr($_POST['oggetto']); ?>" placeholder="<?php _e( 'Oggetto', 'yoko' ); ?>" autocomplete="off" tabindex="6" class="txtinput neutral-field">
            <textarea name="message" id="message" value="<?php echo esc_attr($_POST['message']); ?>" required placeholder="<?php _e( 'Inserisci il tuo messaggio...', 'yoko' ); ?>" tabindex="7" class="txtblock neutral-field" onblur="displayValidationStatus(this)" onkeypress="displayNeutralStatus(this)"></textarea><div class="input-validation"></div>


            <input type="hidden" name="submitted" value="1">
            </section>

        </div>

        <section id="buttons" >
            <input type="submit"  name="submit" id="submitbtn"  class="submitbtn" tabindex="7" value="<?php _e( 'INVIA', 'yoko' ); ?>">
        </section>


        </form>

        </div>


    </section>


    </div>

For your convenience, I have left the original code from the mentioned tutorial commented out above my modified form.

What am I doing wrong?

Plus what do I need to to in order tu turn the form into an ajax form proving feedback on the submission step withot page reload?

Answer 1

avoid using generic field names like "name","email" or "messages". Just change your variable to (e.g.) "name1" or "hongkiat_name" to distinguish it from internal WordPress vars.

Here's the list of reserved names in $_POST and $_REQUEST used by WordPress 3.5: https://wordpress.stackexchange.com/questions/77337/page-returns-404-with-post-variables-but-not-without