12

We are looking to use wffm on a responsive site and need to make wffm forms responsive. We are looking for advice or tips on how to go about this or any issues you have had regarding this.

  • 2
    Which version of WFFM/Sitecore - this will make a difference to the approach taken – Richard Seal Oct 5 '16 at 16:05
6

There is a really nice and free tool for creating responsive and custom styles for web form for marketers. I don't remember which WFFM versions it supports. You can try it here:

http://wffm.boondoggle.eu/

  • 1
    FYI - this site is no longer up – Ben Sewards Jun 26 '18 at 21:11
4

We have built responsive forms using WFFM and it's certainly one that needs a little thinking about in advance.

WFFM isn't the most flexible to start with so always try and make sure your forms are designed to be single column. Also try and avoid dependencies between fields as this can quickly descend into nightmare territory.

If you make use of MVC, you can override the views used for individual fields which makes it much easier to write your markup, and gives more scope for jumping through the hoops that WFFM inevitably throws at you.

Some useful information on implementation of WFFM and MVC on the Brainjocks blog

http://jockstothecore.com/wffm-mvc-implementation-tips/

  • 1
    Depends on which version of WFFM. In 8.0.5+ the view all use a C# Bootstrap HTML Helper class, and so there is very little markup to edit. But the forms are already using Bootstrap, so in theory already responsive. – jammykam Oct 5 '16 at 16:08
3

If you are using WFFM 8.0 update-5 or newer then the module uses Bootstrap to provide it's styling by default, so the forms are responsive to begin with. You don't need to do anything, it is enabled by default.

If however your own site is not using Bootstrap or you have conflicts with the styling on your own site then you can disable using the following setting which ensures that the css files not sent to the client:

<!-- Disable Bootstrap CSS for WFFM -->
<setting name="WFM.EnableBootstrapCssRendering" set:value="false" />

The markup generated by the WFFM module will still be in "Bootstrap" format, and the best option is to apply your own styling over the default generated markup when possible. WFFM 8.0 update-5 onwards uses C# Helpers to generate the HTML markup so it is not as simple as updating the cshtml Editor Templates as it was in earlier version of MVC WFFM.

1

We have also done so but we removed all of the styles that Web Forms for Marketeers ships with and created our own in-line with our own front-end build pipeline - we use SASS and Gulp to generate them.

We could then apply most of the same form styles we use elsewhere on the site for non-WFFM forms.

One thing to be aware of is if you remove JQuery UI some of the fields (such as the calendar field) require this to be in place to function. You will also need to support the half-section, one third classes in the form designer too if you remove all the styles as we have.

enter image description here

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.