wp_nonce_field is breaking form for reasons unknown

Question

I am trying to create a sign up form for WooCommerce. The problem is that the form wont work without wp_nonce, so I am trying to include it.

I have created a shortcode in functions.php to display the form, but when I use wp_nonce_field(), the form breaks.

Below is the code which works as expected (wp_nonce_field() is commented out) except for that the form doesn't POST because there is no wp_nonce:

add_shortcode('signup_form', 'get_signup_form');
function get_signup_form() {

//$wp_nonce_code = wp_nonce_field();

$signup_form_code = <<<EOT
<form method="post" class="popup-register" action="/my-account/">
<p style="text-align:center;"><input type="email" class="popup-input" style="width: 65%;" name="email" id="reg_email" placeholder="Enter your email address"><input type="submit" class="popup-input-submit button" style="margin: 0; border: 1px solid #999999;line-height: 19px;" name="register" value="Register"></p>
{$wp_nonce_code}
</form>
EOT;
return $signup_form_code;
}

When I uncomment wp_nonce_field() to try and make the form work, the form does not display at all - just blank. E.g.:

add_shortcode('signup_form', 'get_signup_form');
function get_signup_form() {

$wp_nonce_code = wp_nonce_field();

$signup_form_code = <<<EOT
<form method="post" class="popup-register" action="/my-account/">
<p style="text-align:center;"><input type="email" class="popup-input" style="width: 65%;" name="email" id="reg_email" placeholder="Enter your email address"><input type="submit" class="popup-input-submit button" style="margin: 0; border: 1px solid #999999;line-height: 19px;" name="register" value="Register"></p>
{$wp_nonce_code}
</form>
EOT;
return $signup_form_code;
}

I don't see what is wrong with wp_nonce_field() and the documentation hasn't really helped.

Answer 1

wp_nonce_field() will echo its output by default, so set the $echo parameter to false:

add_shortcode('signup_form', 'get_signup_form');
function get_signup_form() {

$wp_nonce_code = wp_nonce_field( -1, '_wpnonce', true, false );

$signup_form_code = <<<EOT
<form method="post" class="popup-register" action="/my-account/">
    <p style="text-align:center;">
        <input type="email" class="popup-input" style="width: 65%;" name="email" id="reg_email" placeholder="Enter your email address">
        <input type="submit" class="popup-input-submit button" style="margin: 0; border: 1px solid #999999;line-height: 19px;" name="register" value="Register">
    </p>
    {$wp_nonce_code}
</form>
EOT;
return $signup_form_code;
}