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.
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
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.
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.