Skip to content
Featherwebs

Creating a Form

Creating a custom form in WordPress is easy. For our company websites, we do not use any third-party plugins to create forms. Instead, we use the WordPress API to create forms. This approach gives us more control over the form’s functionality and design.

Wordpress provide incredible support to work with form submission in our applicaitons. Whether we add a form in the admin or public facing areas, the built-in mechanism with the admin-post and admin-ajax scripts will allow us to handle your form requests efficiently.

Prerequisites

  1. Requires Captcha site key and secret key from google recaptcha admin panel.
  2. Add Google re-captcha keys to wp-config.php file. 
     define( 'RECAPTCHA_SITE_KEY', 'your_site_key' );
 define( 'RECAPTCHA_SECRET_KEY', 'your_secret_key' );
  3. Enqueue the google recaptcha script in functions.php file. 
     wp_enqueue_script( 'google-recaptcha', 'https://www.google.com/recaptcha/api.js' );

Create a Form

To create a form, write basic HTML markup with the required fields in any page where you want to add the form.

<form action="" method="post">
    <input type="text" name="name" id="name" >
    <input type="email" name="email" id="email" >
    <input type="submit" value="Submit">
</form>

For example, let’s create a form that allows users to submit their name and email.

Add Form Action

Now you need to add action to the form.

action="<?php echo esc_url( admin_url('admin-post.php') ); ?>"

This is the code after adding the action to the form.

<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
    <input type="text" name="name" id="name" >
    <input type="email" name="email" id="email" >
    <input type="submit" value="Submit">
</form>

The action attribute tells the browser where to send the form data when the user submits the form. In WordPress, you can use the admin-post.php file to handle the form submission.

Add Hidden action field

Now, you need to add a hidden field to the form.

<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
    <input type="hidden" name="action" value="contact_form_submission">
    <input type="text" name="name" id="name" >
    <input type="email" name="email" id="email" >
    <input type="submit" value="Submit">
</form>

The hidden field is used to pass the action name to the admin-post.php file located in the wp-admin directory of the wordpress. The action name is used to identify the form submission. Always use a unique and descriptive name for the action. For example, if you are creating a form to submit a contact form, you can use contact_form_submission as the action name. On doing so, WordPress will trigger two action hooks based on the logged in status of the user:

  • admin_post_{$action} for logged in users
  • admin_post_nopriv_{$action} for non-logged in users

We will talk about this later when we will handle the form submission.

Add Nonce Field

<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
    <input type="hidden" name="action" value="contact_form_submission">
    <?php wp_nonce_field( 'contact_form_action', 'contact_form_nonce' ); ?>
    <input type="text" name="name" id="name" >
    <input type="email" name="email" id="email" >
    <input type="submit" value="Submit">
</form>

The wp_nonce_field() function adds a hidden field to the form. This field is used to verify that the form submission is valid. The first parameter is the action name, and the second parameter is the nonce name. The nonce name is used to retrieve the nonce value later when validating the form submission.

Add google re-captcha

<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
    <input type="hidden" name="action" value="contact_form_submission">
    <?php wp_nonce_field( 'contact_form_action', 'contact_form_nonce' ); ?>
    <input type="text" name="name" id="name" >
    <input type="email" name="email" id="email" >
    <input type="submit" value="Submit">
    <div class="g-recaptcha" data-sitekey="RECAPTCHA_SITE_KEY"></div>
    <input type="submit" value="Submit">
</form>

The g-recaptcha div is used to display the google recaptcha. You can get the site key from the google recaptcha admin panel.