Unknown issue with my contact form in wordpress

Question

I started working on a wordpress template and I am extremely stuck on this contact form, which I don't seem to find the problem. I must mention that I am somehow new to php, but I can understand pretty fast. This is what I am using for my contact page (there are also other elements but they do not interfere with the code I`m having trouble with):

    <?php get_header();
$two2_option = two2_get_global_options();
global $post; setup_postdata($post); ?>

<?php if($two2_option['two2_contact_email']){ ?>
        <form method="post" id="ajax_form" action="#">
        <fieldset>
          <ul class="form-item" id="field-name">
            <li>
              <label><?php _e("Name","jbirdie"); ?>:<span class="field-required" title="<?php _e("Required Field","jbirdie"); ?>">*</span></label>
              <input type="text" maxlength="90" name="name" id="name" placeholder="<?php _e("name","jbirdie"); ?>" size="30" class="form-field required text_input clear" />
            </li>
            <li>
              <label><?php _e("E-mail","jbirdie"); ?>:<span class="field-required" title="<?php _e("Required Field","jbirdie"); ?>">*</span></label>
              <input type="email" maxlength="90" name="email" id="email" placeholder="<?php _e("e-mail","jbirdie"); ?>" size="30" class="form-field required email text_input clear" />
            </li>
            <li>
              <label><?php _e("Phone","jbirdie"); ?></label>
              <input type="number" maxlength="90" name="phone" id="phone" placeholder="<?php _e("phone number","jbirdie"); ?>" size="30" class="form-field required email text_input clear" />
            </li>
            <li class="message">
              <label><?php _e("Comments","jbirdie"); ?> <span>Available for quotation</span></label>
              <textarea cols="55" rows="" name="message" id="message" placeholder="<?php _e("Comments","jbirdie"); ?>"  class="form-textarea text_area clear" ></textarea>
            </li>
          </ul>
          <input type="submit" name="submit" id="submit" value="send" class="submit form-submit" />
          <div id="result"></div>
        </fieldset>
     </form>
         </div>
        <?php } ?>
    </div>
    <?php } ?>
</div>

</div>

<?php get_footer(); ?>

and the following in functions.php :

add_action('wp_ajax_nopriv_two2_send_contact_form', 'two2_send_contact_form');
add_action('wp_ajax_two2_send_contact_form', 'two2_send_contact_form');

function two2_send_contact_form(){
    $two2_option = two2_get_global_options();
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];

    $subject = "Message from your portfolio";
    $body = "From $name, \n\n$email, \n\n$phone, \n\n$message";

    $to = $two2_option['two2_contact_email'];

    $result = mail($to, $subject, $body);

    if($result){ 
        print "<h3>".__("Success","two2")."</h3><p>".__("Your email has been sent!","two2")."</p>"; 
    } else {  
        print "<h3>".__("Error","two2")."</h3><p>".__("Try it again later, please.","two2")."</p>"; 
    }

    die();
}

...and it`s simply not working...can someone please give me a hint or sth to find the error?

Answer 1

Have you got a script to submit the form to the ajax handler? eg

<script type="text/javascript" >
  jQuery(document).ready(function($) {
     $('#ajax_form').submit(function(evt){
       var form_data = {
        action: 'two2_send_contact_form',
        name: jQuery('#name').val(),
        email: jQuery('#email').val(),
        phone: jQuery('#phone').val(),
        message: jQuery('#message').val()
      };
      $.post('<?php echo admin_url('admin-ajax.php'); ?>', form_data, function(response) {
        console.log(response);
      });
      return false;
    });
  });
</script>

http://codex.wordpress.org/AJAX_in_Plugins

Also there is an extra php closing brace <?php } ?> in your contact form.

Edit Corrected jQuery selector & ajax url.