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.
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.
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.
Getting the field ID
To get the field ID, edit the form and select the field you need the ID for.
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.
