Themed Gravity Forms

Add custom themes (or skins, if you like) to your Gravity Forms!

You can change how each single form must be shown, simply adding two attributes to the standard Gravity Form shortcode or using the new widget “Themed Form”.

See some live examples here.

How to use the shortcode

The best way to understand how the shortcode works is taking a look to the live examples.

The shortcode is quite straight forward:

Add the standard Gravity Forms shortcode to your content (post, page or custom post type).
Suppose you get this shortcode: [gravityform id="1" name="Client List"]
Change it like this: [gravityform id="1" name="Client List" action="theme" themename="autumn"]

The “action” attribute must be always “theme”, while the “themename” attribut must contain the name of the theme you want to use, or “default” that is the default theme, of course.

Theme Gravity Forms comes packed with three default themes (again, see the live examples linked above):

Default
Autumn
FormSpring (that’s a FormSpring like form)

The “themename” attribute is case insensistive, as theme folders names must be lowercase in any case.

How to use the widget

This is even easier:

Go to Appearance, then select Widgets
In your sidebar add the Theme Form widget
This widget is an exact copy of Gravity Form’s widget, but has an additional option that lists all available themes: set all option, chose one theme and you’re done!

How to use the Hidden Field

Edit your form and add a hidden field.
Set the name of this field to misamee-theme
Set the default value to the theme name you want to use (e.g.: autumn)
Use the default Gravity Forms shortcode (no need of additional attributes).

How to create custom themes

If you want to create your own theme:

create a folder mgft-themes in /wp-content
from /wp-content/plugins/misamee-gravity-forms-themes/themes, copy one of the existing themes folder (e.g. autumn) in /wp-content/mgft-themes
rename the folder as you like (let’s suppose that will be “custom”)
replace also the word “autumn” on css and js file. e.g.:
- /wp-content/mgft-themes/custom/js/misamee.themed.form.autumn.js -> /wp-content/mgft-themes/custom/js/misamee.themed.form.custom.js
- /wp-content/mgft-themes/custom/css/misamee.themed.form.autumn.css -> /wp-content/mgft-themes/custom/css/misamee.themed.form.custom.css
…or you can name them as you like, as long as you change the functions.php according
You can also add more css and js files: just remember to add them in the functions.php
Instead, if you want just add a files without using functions.php, add them in the theme’s root folder and they will be enqueued appropriately (css, js and php files only!)

The functions.php file

Here is a standard use of the functions.php file:

wp_enqueue_style("misamee-themed-form-$themeName", "{$themeData->themeUrl}css/misamee.themed.form.$themeName.css");
wp_enqueue_script('tooltipsy', "{$themeData->themeUrl}js/tooltipsy.min.js", array('jquery'), false, true);
wp_enqueue_script("misamee-themed-form-$themeName-js", "{$themeData->themeUrl}js/misamee.themed.form.$themeName.js", array('jquery'), false, true);

Keep in mind that this code is hooked to the wp_footer action.

You have some data available about the current theme that is running the code:

$themeName It’s the name of the current theme
$themeData It’s the theme object containing:
- $themeData->$type = ‘php’
- $themeData->$key = functions.php or the name of the current file, since you can add multiple php files
- $themeData->$file = the full path of the current file
- $themeData->$themeUrl = the url of the current theme
- $themeData->$deps = not used yet

Of course you don’t have to use this data, but in most of the cases it’s recommended in order not to mix CSS and JavaScript.

JavaScript files

It’s strongly recommended to give a specific context to all jQuery or DOM functions when using JavaScript files.

If you take a look to any of the existing themes, you’ll see that they always give this context:

jQuery(document).ready(function ($) {
    var $templateMainElement = $('.themed_form.autumn');
    if (!("placeholder" in document.createElement("input"))) {
        $("input[placeholder], textarea[placeholder]", $templateMainElement).each(function () {
...

Whenever a jQuery selection is made, instead of just specifying a selector, we give the context as a second parameter: it’s up to you to do that.

This way the script does what it must do only to the forms that actually implements this specific theme.

CSS Files

Like JavaScript files, CSS files must give a specific context or you will see unwanted styling to forms that doesn’t used a theme or use a different theme.

That’s one of the reason we have used SASS as allowing nested styles, it simplifies styling contextualization:

.themed_form.formspring {

  margin: 1px auto;

  .gform_wrapper {
    @include form-wrapper;

    margin: 0;
    max-width: 100%;

    .gform_heading {
      @include form-header;
...

Each theme form is wrapped by a div element. This dive element has a global class “theme_form” and a class with the name of the current theme (“formspring” in the example above).

Additional notes

Using functions.php is probably the best way to create a theme, as this gives you more control on what and how must be included.

However, you can add to the theme files without using the functions.php file, simply putting all the files that must be included in the theme’s root (this applies only to .css, .js and .php extensions).

Consider though that including files in this way is not possible to check for dependencies (e.g.: a JavaScript file that relies to a jQuery plugin that hasn’t been loaded).

If you really wants to use this way to include files, being included in alphabetical order, name appropriately, so a required file is included before it’s dependent file.

Misamee

Office and web solutions development