How to Locate Form ID and Field ID

Are you looking to find the Form ID and Field ID in WPForms for use in your custom CSS or code? Locating these IDs is a breeze and essential for tailoring your forms precisely to your needs.

When working with CSS, PHP, or JavaScript snippets, you often require specific form or field IDs to target them accurately. Fortunately, WPForms makes it easy to locate these IDs, allowing you to apply customizations selectively.

Whether you’re styling a form, adding functionality, or implementing custom logic, having the Form ID and Field ID on hand empowers you to make targeted adjustments without affecting other elements on your site.

So, if you’re ready to enhance your forms with personalized touches, let’s dive in and discover how to find those crucial IDs!

Locating the 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="561"]. The ID for this form would be 561.

Locating the 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 » General panel for that field.

At the top of the General tab, you’ll see the field type followed by the field ID. In the screenshot below, the field’s ID is 1.

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-561-field_13' ).keyup(updateCount);
        jQuery( '#wpforms-561-field_13' ).keydown(updateCount);
        function updateCount() {
            var cs = jQuery.trim(this.value).length ? this.value.match(/\S+/g).length  + " words total" : 0;
            jQuery( '#wpforms-561-field_14' ).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.

FAQ

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

A: When you want to customize WPForms forms and fields further with specific custom code snippets as mentioned throughout many of our tutorials or customize certain fields on certain forms to look and feel slightly different than the default styles that WPForms or your WordPress theme give you, it’s important to only target those specific forms or fields. In order to only those specific forms and fields to utilize the unique Ds that each form is given.

For example, let’s say you wanted to do some A/B testing on your quote forms. You pick or create two forms and want to have the Submit button red on form A but blue on form B to possibly see which form had the higher completion rate. If you added CSS without targeting the form ID, all form submissions would be red which is no good for your A/B testing. Therefore you would want to target each CSS rule to that specific form and the only way to do this is by using that specific form’s ID.