Adding custom form within add_shortcode

Question

I'm adding a custom form within a shortcode, but whenever I paste the shortcode in the page editor the form posts automatically and redirects to /wp-admin/admin-post.php with a blank screen.

I'm using the admin_post hook to submit the form.

But when I add the form using the_content hook it works perfect. The only problem with this method is that I don't have full control of where to add the form in the page.

What am I doing wrong?

// ADD THE SHORTCODE FORM
add_shortcode('get_job_card_form', 'vision_get_job_card_form');
function vision_get_job_card_form()
{
    $formHtml = '<form action="' . admin_url('admin-post.php') . '" method="POST">';
    $formHtml .= wp_nonce_field('get_job_card', 'get_job_card_nonce');
    $formHtml .= ' <input type="hidden" name="action" value="get_job_card" />';
    $formHtml .= '<button name="getJobCard" type="submit" class="et_pb_button et_pb_button_2 et_pb_bg_layout_light">Get Job Card</button>';
    $formHtml .= '</form>';
    return $formHtml;
}

// ADMIN POST HOOK
add_action('admin_post_nopriv_get_job_card', 'get_job_card');
add_action('admin_post_get_job_card', 'get_job_card');
function get_job_card()
{
    include get_stylesheet_directory() . '/vision/data/vision-get-job-card.php';
    die();
}

Answer 1

whenever I paste the shortcode in the page editor the form posts automatically and redirects to /wp-admin/admin-post.php with a blank screen

I don't know what editor is that (🤔), and I'm not sure if this will fix the above issue, but I noticed your function is using wp_nonce_field() which by default displays/echo the output, so because you're doing $formHtml .= wp_nonce_field(...), then you need to disable the echo because otherwise you'd run into issues like invalid REST API's JSON response which then causes the block/Gutenberg editor to fail in saving the post.

// set the 4th parameter to false
$formHtml .= wp_nonce_field('get_job_card', 'get_job_card_nonce', true, false);