0

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.

3

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.

Custom CSS CLass

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.

WFFM Fild Style

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

  • can you give a way to change the id to particular value ? – orangespark Jan 10 '18 at 5:40
  • @orangespark Not simply, I would guess it would require numerous edits in views, controller and pipelines, and then i'm not sure if it would have an impact on the form submission itself. As i've answered above, you can add a unique CSS class to each form so I can't see the advantage... – jammykam Jan 10 '18 at 22:02
  • in my case i am converting already existing site to sitecore so I have the css in which a lot of css is written with id selectors and also submit events are listened with same id. Basically this question addresses that issue and the answer you have provided is a coding practice but not a solution to the question asked by the OP. – orangespark Jan 11 '18 at 4:28
  • Well the OP accepted it as the answer, so I would assume it was a solution that solved their problem... besides, their question was specifically about styling. – jammykam Jan 11 '18 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.