How to make responsive forms in wordpress?

Here is a scenario:

You have downloaded a responsive theme in wordpress and it has all the bells and whistles you need, after downloading a few plugins, that is.

You have uploaded a lot of content to the site and you need one last item: a form.

Here's the problem: the theme doesn't have a built-in form option. This means that any form plugin you download will likely produce a static form without some adjustments. It means that unless you can solve this problem, the only item on your site that won't be responsive is your form. What do you do?

If you have the perfect answer to this scenario, why not share with me your comments below?

The challenge was to create a form that would resize along with the rest of the page so that people on a mobile device could fill out the answers. It also looks better.

It turns out that for some coders and companies, they recognize that people probably won't fill out a long form on a mobile device, so why should we format the form to be responsive? As a personal mission, I decided to try anyway. I have a hunch that it would come in handy.


To begin, I downloaded more than one form plugin and tested them out.  I downloaded Formidable Forms because it is a drag and drop form builder but it has limited options with the free version and didn't fit my needs. I settled on Wordpress Form Manager because I could add any form field and because I only had to change the plugin css minimally to get it to be responsive. Here was my solution:

1) This step can be done outside of the style sheet when you enter information for each new entry. Basically, instead of entering a pixel width for your form, you can choose 100%. It means that your form will expand to the div that it is in and if the div size changes, the form dimensions will follow with it.

For the next step, I changed the 'ul' class in the main css to have a margin and padding of 0 so that all items in the form would justify left.

Next, in the main css,  I changed the margin border and padding in the 'fieldset' class to zero.

Lastly, there is an option in the Wordpress Form Manager within each specific form that you need to change.

In a specific form, below all of your form elements under 'appearance' you will need to change the label position from 'left' to 'top' this will make sure that all titles and input types are stacked on top of eachother to give you the most narrow form possible with this plugin.


By this point, there is no div that will be too large to fit within the content div. And because the content div is part of the responsive theme, it will already conform to browser and monitor sizes.

I hope this helps!


My next post will most likely be about project management on a range of projects I have worked on this year.