Responsive Web Design is not just optional these days, it should be built into every site, including pages where your form can be found. In this article, we’re sharing tips to help you make your site look sharp and work well with devices of any size to achieve responsive forms.
But first: what does “responsive” actually mean?
It’s quite simple, really. The term “responsive web design” was first coined by Ethan Marcotte to characterize pages that adjust their layout—they respond—to better fit the device a user has. One can do this with a combination of flexible grids, flexible images, and media queries. Although webpages by default can actually have 100% fluid layouts, the philosophy of responsive web design includes the goal of tailoring your content so it’s easier to read, to use, and and interact with—rather than having to zoom or scroll further.
Magic Liquidizer Responsive Table
by Elvin D.
If you deal with a lot of data, making your website responsive might feel like a deal-breaker, or at least a chore that you don’t want to deal with just yet, because you’re worried about all the HTML tables. Worry not, because this plugin with quite the catchy name optimizes their layout so it’s runs from top to bottom, rather than be squished from the narrow device width. You can specify at which width you’d like this adjustment to take effect, and just how specific your tables can be targeted.
WP Retina 2x
By Jordy Meow
Looking good on mobile doesn’t just mean refactoring your layout, but also making sure those images take advantage of those high-resolution displays. “Retina” is the word Apple uses to describe this, while the generic term for it is high-dpi. With this plugin you can generate hi-res automatically, or upload your own manually. You can also specify which method you’d like your site to use in displaying these retina images, as well as disable the Medium Large setting created by WordPress.
By WP Darko
Looking to display your team members on spiffy cards? This plugin lets you do that, and it’s responsive out of the box. Each one can show a profile picture, a short bio, and social media links. Insert it anywhere with a shortcode, and set your layout to show how many you’d like per row.
Smart Slider 3
Who doesn’t use some sort of slider or carousel these days? This plugin lets you build pretty much any kind of slider and making it responsive won’t be an extra concern. It supports layers, text, buttons, images, and video; you can pick from premade templates and different transition effects. Smart Slider is compatible with the most popular WP page builders, and is also optimized for touchscreens.
Build all the forms you need with CaptainForm’s drag-and-drop interface, with responsive design already included. You can insert up to 25 different field types and have 30 pre-built templates to choose from. Other super convenient features include form validation, conditional logic, form pagination, thank you page, submissions page, and CAPTCHA to fight spam.