Using Contact Form 7 you can easily add id and class attributes to your form element by adding the html_id and html_class attributes directly to the [contact-form-7] shortcode.
This feature is incredibly useful if you want to style your forms using custom CSS or target them with JavaScript for enhanced interactivity.
How to add `id` and `class` attributes to your Contact Form 7 form element
Example:
Explanation:
html_id="contact-form-123": Adds a unique id to your form which is helpful for styling or targeting the form with JavaScript.
html_class="class-1 class-2": Adds one or multiple classes to your form, allowing you to apply specific CSS styles.
Why use `id` and `class` attributes on your form element?
Adding id and class attributes can be beneficial in various scenarios, such as:
- Applying custom styles via CSS.
- Attaching JavaScript or jQuery functionality to your forms.
- Enhancing accessibility by using standardised classes.
- Creating unique identifiers for tracking or analytics purposes.
Conclusion
By adding id and class attributes to your Contact Form 7 form element you gain greater control over styling and functionality.
Useful link: Contact Form 7 FAQs
If you would like to discuss this article or have any other queries regarding its contents please don’t hesitate to contact me.