JetFormBuilder Form ID: How to Add One Like Elementor Forms

How the snippet works and how to test it

• jet-form-builder/before-start-form is a JetFormBuilder filter that runs just before the opening <form> tag is rendered.
• The callback receives two arguments. $before_form_start holds the markup output before the form. $form is the form object being rendered.
• $form->add_attribute( 'id', ... ) adds the id attribute to the form tag. $form->form_id is the form's post ID, so the result is jet-form-123.
• return $before_form_start; passes the original markup back unchanged. If you remove this line, the markup before the form start is lost.
• 0, 2 sets priority 0, so it runs early, and 2 accepted arguments. Without the 2, WordPress passes only the first argument, and PHP stops with a fatal 'Too few arguments' error because the function requires $form.

The code comes from Crocoblock's Code Lab and the matching gist.

Test it

1. Clear your page cache and any caching or optimization plugin cache.
2. Open a page that contains the form, right-click the form and choose Inspect.
3. Find the form tag. You should see <form id="jet-form-123" ...> with your form's number.
4. For a quick JavaScript check, run document.getElementById('jet-form-123') in the browser console. It should return the form element, not null.

You built the form in Gutenberg, Elementor or Bricks? Run this same check on the live page for each placement you rely on.

Use the ID in CSS, JavaScript and analytics

CSS

Style one form without affecting the others on the same page. You can add this in Appearance > Customize > Additional CSS or in your child theme stylesheet:

#jet-form-123 {
	max-width: 640px;
	margin: 0 auto;
}

#jet-form-123 input[type="email"] {
	border-color: #0f766e;
}

For more styling ideas, see our guide to styling JetFormBuilder file upload fields.

JavaScript

Attach behavior to one specific form. This example runs once, the first time a visitor starts interacting with the form:

document.addEventListener( 'DOMContentLoaded', function () {
	const form = document.getElementById( 'jet-form-123' );
	if ( ! form ) {
		return;
	}
	form.addEventListener( 'focusin', function () {
		console.log( 'Visitor started the contact form' );
	}, { once: true } );
} );

If you want to change what happens after a submission, our tip on a custom JetFormBuilder success message popup is a good next step.

Analytics and third-party tools

Tag managers and tracking tools can usually filter by form ID. Set the condition to match jet-form-123 so a tag or event fires only for that form, not for every form on the site.

Optional: custom ID names per form

You may want readable IDs such as contact-form, for example to match an existing Elementor tracking setup. Map form IDs to names and keep the default pattern for everything else. Use this instead of the snippet above, not alongside it:

add_filter( 'jet-form-builder/before-start-form', function ( $before_form_start, $form ) {
	// Form post ID => HTML id you want on the <form> element.
	$bmc_custom_ids = array(
		123 => 'contact-form',
		456 => 'quote-form',
	);

	$bmc_form_id = (int) $form->form_id;

	if ( isset( $bmc_custom_ids[ $bmc_form_id ] ) ) {
		$form->add_attribute( 'id', sanitize_html_class( $bmc_custom_ids[ $bmc_form_id ] ) );
	} else {
		$form->add_attribute( 'id', 'jet-form-' . $bmc_form_id );
	}

	return $before_form_start;
}, 0, 2 );

Replace 123 and 456 with your real form IDs. Keep each name unique across the page.

Common problems

The id does not appear

• Clear every cache layer: page cache, CDN and any plugin that combines or caches HTML.
• Confirm the snippet is active. Check that it is in the active child theme's functions.php, or that the snippet is switched on in your snippets plugin.
• Make sure you are inspecting the <form> tag, not a wrapper div around it.

The same form appears twice on one page

Both copies get the same id. That is invalid HTML. getElementById() returns only the first copy, and ID-based tracking may fire for the wrong one. Use a separate form for the second placement, or target the forms with an additional CSS class instead of the ID.

Critical error after saving functions.php

This is usually a stray second <?php tag, a missing semicolon or a half-copied line. Restore your backup, or fix the file over SFTP. Then paste the snippet again exactly as shown.

The form shows a different ID

If the JetForm block has a value in Advanced > HTML anchor, JetFormBuilder applies it after the snippet runs, so the anchor replaces jet-form-123. Clear the anchor field, or target the anchor ID instead.

The ID changed after moving the site

Importing forms into another site creates new post IDs. Look up the new form ID and update any CSS, JavaScript or tracking rules that use the old one.

Keep the plugin updated

As of October 2026, the current JetFormBuilder release is 3.6.7, and it requires WordPress 6.1+ and PHP 7.0+. Versions 3.6.5.2 through 3.6.6.1 include a series of security fixes, so run at least 3.6.6.1 before you build anything on top of your forms.

Once the snippet is in place, every JetFormBuilder form gets a predictable jet-form-{id} attribute that works the same way Elementor's Form ID does for styling, scripts and tracking. If you would rather have someone set up the IDs, tracking or custom form behavior for you, post a request on BoostMyCroco.