The RackForms WordPress Plugin

In Brief: The RackForms WordPress plugin performs one simple task: append a block of JavaScript to every WordPress page so that any RackForms iFrame embedded in our posts scales to the full width of the page, and then resizes in reaction to any page resize action if -- and this is key -- if the area the iFrame is placed in is liquid, that is, it resizes in reaction to page resize events.

The end result should be a form page that always takes up the full width of the page, then resizes (shrinks or grows) when the user resizes the page.

This is of greatest benefit to mobile users, in that per responsive web design, a smaller page should shrink so that all page elements remain visible and usable. For a WordPress blog page this means images rescale and the page reorders itself so that all page elements, such as menus and posts, lay out in a way that's easily digestible for smaller screens. For forms this means all elements take up the maximum horizontal space (so they're easy to click on).

Dependencies: WordPress 3.5 or higher, and posts with RackForms jobs embedded in them.

Hints & Tricks: In order for this plugin to have any real effect we must use the -mobile version of the form in our embed code. This is because the mobile version of our form is saved with all form elements having 100% width, field labels on top, and the page layout mode is set to sortable.

The good news is this plugin automatically loads the mobile version of the form if a browser sniff check returns true for running on a mobile device.

Of course we could design a form from the start to be set with the attributes the mobile version has, but this rarely makes sense for most layouts. Thus the mobile version of the form is a way for us to have two separate layouts without the extra work.

That said, in the newest versions of WordPress, that is, 3.5 and above, and specifically the two default themes, 'Twenty Twelve', 'Twenty Eleven', use a clever form of responsive web design that basically negate the need for this plugin. That is, so long as we just use the -mobile version of our form, they will automatically resize appropriately.

Thus, it's best to think of this plugin as a last resort if the theme you're using isn't a responsive one (which is a good possibility for most older themes and free ones, at least for the nest year or so as responsive web design is still a very new concept), or if the main target device for your site is mobile browsers.

Where to find the plugin: The plugin folder is located in the Goodies > WordPress folder of our RackForms download.

How to install the plugin: Simply move the plugin folder to your WordPress installations wp-content > plugins directory, navigate to the Plugins section of the WordPress admin interface, locate the RackForms iFrame Resize entry, and click activate.

Important note: Please note that becuase of the restrictions placed on web browsers and iFrames, the forms embedded on our WordPress pages must be hosted from the same domain as where WordPress is running.

That is, if WordPress is on domain.com, our forms must also come from domain.com, not sample.com.

Options/Properties

Basic Attributes