How to Locate Form ID and Field ID

Introduction

Do you need to locate form ID and field ID for WPForms to use in your custom code or custom CSS? It’s very easy to find the ID number for a form or field to use within other code snippets such as CSS, PHP or even JavaScript.

Many code snippets will require a form ID and/or field ID. With these values, it’s possible in certain cases to apply code only to a specific form or field.

Methods to locating the ID

Below, we’ll show you both methods on finding the form and field ID.

Form ID

The simplest way to quickly locate a form’s ID is on the Forms Overview page. To get to this page, go to WPForms » All Forms. In the Shortcode column, you’ll see the embeddable shortcode for each form and this will include the form ID.

For example, the screenshot below is indicating the shortcode [wpforms id="211"]. The ID for this form would be 211.

How to locate a forms ID

Field ID

To locate the ID for a specific field, you’ll need to open the form builder and click on the field in the preview area. This will open the Field Options panel for that field.

At the top of the Field Options, you’ll see the field type followed by the field ID. In the screenshot below, the field’s ID is 13.

Locate field ID for WPForms

Using the form and field ID

In most of the developer docs for custom functions and for styling, you’ll see a lot of snippets ask you to update the form and field IDs. Such as this one for example.

/**
 * Add a word count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 * 
 */
 
function wpf_dev_count_words_only() {
    ?>
    <script type="text/javascript">
        jQuery('#wpforms-722-field_11').keyup(updateCount);
        jQuery('#wpforms-722-field_11').keydown(updateCount);
        function updateCount() {
            var cs = jQuery.trim(this.value).length ? this.value.match(/\S+/g).length  + " words total" : 0;
            jQuery('#wpforms-722-field_12').text(cs);
        }
     
    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_count_words_only' );

For this snippet, we need to know the form ID and the field ID. In order to find those, first, go to your WordPress admin and click on the WPForms menu.

Getting the form ID

To get the form ID, just go to your WPForms list and use the number that is shown inside the Shortcode column.

copy the number that is shown inside the Shortcode column on the WPForms list

Getting the field ID
To get the field ID, edit the form and select the field you need the ID for.

copy the number from thre field ID when the field is selected

FAQ

Q: Why is finding the form or field ID important?

A: If you want to add specific custom CSS or custom code and only want to target specific forms or form fields, you would need to first identify the form or field ID and then use that ID when adding your custom CSS or custom code.