How to use nonce with front end submission form?

Question

Thanks to a variety of posts on here I've managed to put together a front end submission form. After about 24 hours of tweaking I've finally got everything working including a redirect to a 'success' page after submission, but I have no idea what to do with the nonce.

Here is the form page: http://pastebin.com/YWyXL3jY

And here is the success page: http://pastebin.com/3Usu0Pt6

They are both custom page templates (I know the formatting is a bit all over the place at the moment as different parts came from different sources, and I don't think I'm going to use the file upload feature as I'd rather use a plugin for better security).

Does the nonce need to be processed before the user is redirected to the success page? I have no experience at all with nonce's and am a 'copy and paste' php coder so please be gentle!

Huge thanks for any advice you can give :)

Answer 1

Use the following code inside just before tag on your front end code.

wp_nonce_field('name_of_your_action', 'name_of_your_nonce_field');

The above code will generate two hidden inputs inside your form tag. Now you can verify your nonce in the backend where you will process your form. Use the following code to verify the nonce you just created above.

  if(wp_verify_nonce($_REQUEST['name_of_your_nonce_field'], 'name_of_your_action')){

            // Nonce is matched and valid. do whatever you want now.

     } else {

           // Invalid nonce. you can throw an error here.
}

One note: see carefully how "name_of_your_action" is the first argument of 'wp_nonce_field()' function and it is the second argument of 'wp_verify_nonce()' function. :) So, do not use it as the first argument in both functions. Many people make this mistake so I wanted to mention.

Answer 2

To add a nonce to a form you can use the following function:

wp_nonce_field($action, $name, $referer, $echo)

• $action = (optional) this is a string which represents the action name
• $name = (optional) this is a string which represents the name of the nonce. If you leave this field blank WordPress will default to “_wpnonce”

Example:

Frontend:

<form action="" method="post">
<?php wp_nonce_field('my_delete_action'); ?>
<input type="hidden" name="id" value=" <?php echo $id; ?> " />
<input type="text" name="rec_name" value=" <?php echo $name; ?> " />
<input type="submit" value="Delete" />
</form>

Backend:

$retrieved_nonce = $_REQUEST['_wpnonce'];
if (!wp_verify_nonce($retrieved_nonce, 'delete_my_action' ) ) die( 'Failed security check' );

Source: https://www.tipsandtricks-hq.com/introduction-to-wordpress-nonces-5357

Answer 3

Use this for naunce and verification.

wp_nonce_field('test_action', 'submit_post');

This will generate the nounce field and you can verify with bellow code.

 if(wp_verify_nonce($_REQUEST['test_action'], 'submit_post')){
           /// do your work
  }else{
         /// throw an error
  }

Answer 4

Starting with this page: http://codex.wordpress.org/WordPress_Nonces

Then looking at usage for wp_verify_nonce and the example usage of wp_nonce_field, you must check the result of the verification and decide what to do (typically die, but in your case probably echo a failure message). You could probably just use the verification as your "check if the form was submitted" at line 8:

if ( empty($_POST) || wp_verify_nonce($_POST['name_of_nonce_field'],'name_of_my_action') === false ) {
    /* failure */
} else {
    /* success, processing, redirect */
}

Assuming the response is a success, then you would perform your next action -- like displaying a confirmation message, or in your case redirecting the page. Just make sure you redirect before any output has been printed.

Something to consider as well -- http://kovshenin.com/2012/nonces-on-the-front-end-is-a-bad-idea/ -- although in this case since you're creating content I believe the guy mentions it's "correct" to nonce.