How to change the ID of the WFFM Form and the form fields

Question

While we try to add a WFFM, the HTML generated was

form action="/SamplePage" class="" data-wffm="{223FE62B-B0FA-449C-AE09-EEF4BE7D5AE6}" enctype="multipart/form-data" id="wffm2eabf807b08d42c1ba89db4c5c069aff"

We would like to change the form id="wffm2eabf807b08d42c1ba89db4c5c069aff" to a valid id, example as

id="frm_SamplePage".

We need this ID to for styling the css.

Let me if this is possible and how this can be achieved.

note: We need to similar id to be setup for the text box in the form.

Answer 1

The default id generated for the form by the WFFM module is a valid id and meets both HTML4 and HTML5 specifications.

I would recommend not styling based on ID, espcially if you are following module or atomic design patterns. Instead, you should style based on CSS class:

.my-form-style {
   /* add your styles */
}

You can then set this on each form in the Custom CSS Class field on the form item itself. You must set this from the Content Editor, it is not editable from the Form Designer.

NOTE: This is only available in Sitecore MVC implementations.

You can do the same thing for the fields on the form. Again do not style based on ID since it makes your styles inflexible. Instead, use CSS class again:

.my-field {
   /* style all fields with this class */
}

.my-form-style .my-field {
   /* only style fields in the form where we set custom css class */
}

You can add the field styles in sitecore/System/Modules/Web Forms for Marketers/Settings/Meta data/CSS Classes using template Extended List Item, then select the style for each field that you require.

You can find more details in the appearance section of the WFFM documentation.