sitecoreweb-forms-for-marketers

Add custom CSS class to legend element of WFFM form section


I am looking to add a CSS class to the legend element associated with a Web Forms for Marketers form. In the Form Section item in Sitecore I can add <ShowLegend>Yes</ShowLegend> to the Parameters field, which does add a legend element with class scfSectionLegend. That's nice, but I want to add a custom class that hides the legend text. How do I do this?

UPDATED:

I was able to resolve this by adding some css onto the existing CSS class scfSectionLegend. I added this:

    /* ACCESSIBILITY: Legend text should be intact but hidden for screen readers */
    clip: rect(1px, 1px, 1px, 1px); 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    position: absolute !important;

This works fine assuming we will never want WFFM legend text to be visible for this project, but that might change. I would like to be able to single out a specific occurrence in the DOM where the parent div has hideClass - something like this:

.hideClass.scfSectionBorderAsFieldSet.scfSectionLegend {
   [CSS properties here]
}

That way content authors control whether a legend is hidden or not. Unfortunately after running this, the CSS does not work; it does not hide the legend text. Thoughts? My CSS knowledge is not that great.


Solution

  • The Answer from @Anton is pretty close, but I would suggest that you apply your CSS differently.

    Add the parameters to match your CSS style: <CssClass>hideLegend</CssClass>

    The CSS Class will be applied to the parent fieldset and the markup should be similar to:

    <fieldset class="hideLegend">
        <legend>Custom Fields</legend>
            ...
        </div>
    </fieldset>
    

    Then create a style to target the legend only if the parent fieldset has the required class:

    fieldset.hideLegend legend {
        /* your custom CSS here */
        left: -9999px;
        position: relative;
    }
    

    Depending on the version of WFFM, you may see the following field options wen you select a section:

    Section Appearance

    If so you can add custom CSS classes to the drop list by creating an item under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes of template type /sitecore/templates/Web Forms for Marketers/Meta Data/Extended List Item. Set the item name to something friendly for your editors and Value field to match the CSS Class name (as above for example).

    The above was checked on Sitecore 8.1 Update 3 and WFFM 8.1 160523, the markup and screens may vary on different versions.