Step 1: Create the Form Settings

• Go to Forms > New Form
• Click Edit in the Form Settings box.
• Enter a Title for the form. You can use a title that tells you which form it is. It need not be displayed.
• Enter something in the description box if you want an introduction to your form. Or leave it blank if you don’t.
• In the right hand column, choose elements from the 4 “Fields” boxes to use in your form. These will be added top to bottom in the order you select them. E.g. Select Name, Email, Phone, Drop Down, etc.
• Each element will appear in the left hand column. Click on the Edit link to expand the element to show additional settings, such as “Required”. What appears depends on which element you’re editing.
• Click on Update Form to save your work. Don’t wait until the end…

Step 2: Create the Notifications Settings

• Click the Notifications link at the top of the window.
• Fill in the form with Send To Email, From Name, From Email, etc. Use the circled ? for help with what each means.
• You can probably leave the default Subject and Message boxes if they seem right. If not, use the “Merge Tags” to include the information from the visitor’s form submission.
• You can optionally send an email confirmation to the person who submitted the form, assuming you asked for their email address. Click on Enable email notification to users.
• Fill in the rest of the form that appears. This part of the form is similar to what you did above to specify the email that goes to you.
• Be sure to Save Settings before you leave the page.

Step 3: Decide how you want to respond to the visitor after submitting the form

• Go back to Form Settings
• Edit the Form Settings box at the top.
• Select the Confirmation tab
• You have the following choices (I recommend always using the Page option)
  • Text: Just replace the form with a short “thank you text”
  • Page: Select a “thank you” page. The visitor will be sent to that page. You need to create this page, of course, before you can select it here.
  • Redirect: Enter any old URL. The visitor will be sent to that URL. You could use this to send them somewhere off site. I don’t know why, though.
• Be sure to Update Form.

Step 4: Place the form on some page or post

• Edit (or create) the Page or Post or Widget Content to hold your form.
• In the editor, notice an icon above the Visual toolbar next to Upload/Insert. Hover over the icons to identify the Add Gravity Form icon. Click it.
• A lightbox will appear. You can select your form from the drop down menu. Choose to display your title or not, your description or not, and whether or not to enable Ajax.
• Hit “Insert Form” and you will see a “short code” that indicates to WordPress to display your form.
• Save the entry by hitting Publish or Update

Step 5: Test the form

• Go to the Page, Post, or Widget that contains your form.
• Fill in the form with sample data, and hit Submit.
• These things will happen:
  • WordPress will send email as indicated in the “Notifications” settings you did in Step 2.
  • You should be taken to the “Thank you” page you specified in Step 3. (Unless you chose Text, in which case the current page changes to display that text.)
  • The submission will also appear in the WordPress admin back end. Go to your form, and click on the Entries link to the right of  Notifications. You should see some of the field you submitted.

Step 6: Fix any problems you found in Step 5 by going back to some previous step and re-doing something.

This tutorial covers the Shortcodes Ultimate plugin. First, examine part of a post where you might want the accordion effect to happen. In this example, we’ll put the accordion effect on the following section.

<h3>Open/Close Accordion</h3>
This text will appear or disappear when the user clicks on the title for this section.


You need to do two things to create this effect: define what the user will click on to open and close a section and define what should appear or disappear when the user clicks that.

Define A Clickable Area That Opens And Closes

You’ll need to wrap an opening spoiler shortcode around whatever part of the post you want the user to click on in order to open or close the accordion. For example, if you wanted the user to be able to click on “Open/Close Accordion”, you’d wrap the title of that section like so.
[gn_spoiler title="
<h6>Social/online writer and producer</h6>
" open="0" style="1"]

Make sure you pay attention to the placement of the quotes after “title”. This spoiler shortcode uses three options, “title”, “open”, and “style”. Below, is a description of what each option does and the different values it can accept.

title="Section Title" // What the user can click on.

open="0" // Accordion closed by default.
open="1" // Accordion opened by default.

style="1" // Display the accordion with style 1.
style="2" // Display the accordion with style 2.

Define The Hideable Body Of Text

Everything below where you defined the title of the accordion section will be included in that section. Unless you want the whole page to be one, giant accordion piece, you’ll need to add a closing spoiler shortcode to denote where the accordion effect should stop.

...
This text will appear or disappear when the user clicks on the title for this section.[/gn_spoiler]


Define The Hideable Body Of Text

The basic pattern for creating an accordion section is: wrap a title in a spoiler tag and put a closing spoiler tag after the last paragraph you want to include. The following excerpt is how typical usage of the spoiler shortcode should look like. You can repeat this as many times as you want in a single post.
[gn_spoiler title="
<h6>Open/Close Accordion</h6>
" open="0" style="1"]

This text will appear or disappear when the user clicks on the title for this section.
[/gn_spoiler]

To start, take a look at the example shortcode below for the jcarousel.
gn_jcarousel source="post" limit="3" items="1" size="1013x269" link="none"

This code says that the carousel should grab the images that are attached to the post that the code is on, only use the first three attached images, only show one image at a time, make the size of the carousel 1013 pixels wide by 269 pixels tall, and don’t link to the image file.

Adding Images To The Carousel

You can tell the carousel which images you want to use by attaching images to a post. One way you can attach an image to a post is to press the “Add Media” button in the post editor. Upload the images you want, but don’t press “Insert into page”. Instead, close Insert Media by pressing the “x” in the upper right corner of the window, or lightbox. Another way you can attach images to a post is to click on “Media” in the left sidebar, search for the image you want, and look in the “Uploaded to” column, click “Attach”, and then select the page or post you want to attach the image to in the lightbox that pops up. If the image you want is already attached to another post, then see below.

The source option can be set three different ways.
source="post" // Use images from the post this code is on.
source="post=123" // Use images from the post with the id 123.
source="cat=123" // Use images from the category with the id 123.

Which ever way the source option is set, the images will appear in the order in which they were uploaded. It’s important to upload images in the order you want them to appear in the carousel. If you later decide that you want to rearrange the order of the images, you’ll have to delete them from the Media Library and reupload the images in the new order you want.

Specifying The Total Number Of Images To Use

Although jcarousel will load all of the images attached to a post by default, you can tell the carousel to only load a few with the limit option.

limit="5" // Only load the first 5 images attached to a post.

Choosing How Many Images Are Visible At Once

More than one image can be shown at a time, horizontally only. For example, if you have two images that are each 100px wide and the carousel is 200px wide, then you can show two images at once. If the width of the number of images you want to show is bigger than the width of the carousel, then carousel will become wider automatically. However, it might not look well, in which case, you’ll probably need to set this to a lower number.

items="1" // Show 1 image.
items="5" // Show 5 images. Check if the carousel displays right!

Setting The Size Of The Carousel

The size of the carousel can be set with the size option. The first number sets the width; the second number sets the height. Both width and height are in pixels.

size="32x64" // Set the size to 32 pixels wide and 64 pixels tall.

Customizing Image Links

Since each image in the carousel is also a link, when a user clicks on an image, the link can point to a few different things.

link="none" // Refreshes the current page.
link="image" // Direct link to the image file.
link="permalink" // Links to an information page about the image.
link="caption" // Links to the URL found in the image's caption.

In order to use the caption option, make sure you put a URL in the “Caption” box when you upload an image. If the caption option is used and no URL is found in an image’s caption, then the page will just refresh.

Specifying The Transition Speed

The speed of the transition between images can be set with the speed option. This option affects the time spent changing the images—not how long each image is displayed. This option lets you set the number of milliseconds you want the transition to last. There are 1000 milliseconds in 1 second.

speed="500" // Transition takes half a second to complete.
speed="1000" // Transition takes a whole second to complete.

Adding Space In Between Images

You can add some extra space in between images with the margin option. The number you enter is in pixels.

margin="64" // Put 64 pixels of empty space in between images.

All Together Now

You can combine all or only some of the options to create your customized carousel. At minimum, you should use the source, items, and size options in the jcarousel shortcode. The order you specify the options in doesn’t matter.

// Minimum options required for a functional carousel.
[gn_jcarousel size="828x220" source="post" items="1"]

// This shortcode is using all of the available options.
[gn_jcarousel source="post" limit="3" items="1" size="1013x269" link="none" speed="500" margin="256"]

• Go to DisplayBuddy > Carousel
• Hover over the group whose name you want to change and click on “Edit Group”
• Scroll down to Carousel Settings
• The first setting is Group Title. Change the title in that box.
• Be sure to Save Settings before you leave the page.

• Go to DisplayBuddy > Carousel. Copy the shortcode for the carousel that you want to place somewhere.
• Get into the editor for the Page, Post, or Widget Content you want to modify.
• Paste the shortcode you copied to where you want the Carousel to appear
• Hit Publish or Update to save the new content.

• Go to DisplayBuddy > Carousel
  This displays a list of carousel image groups.
• Scroll to the bottom to create a new image group; enter a name for the new group, and click on +Add Group
• or Hover over one of the existing group names and click on the Edit Group link when it appears.

Now you should be on the Carousel Group Settings page for the group you selected.

• Select +Add Image to add another image to the group
  This will open a lightbox; you can upload an image from your workstation or select an image from the media library.
• Select the checkbox next to an image and hit Remove to delete the image from this group. (It stays in the library.)

Note: All of the images must be the same size (width and height) or they might not display properly.

• Scroll down and set additional settings to modify your carousel.
• Hover over the circled ? marks to see help about each setting.
• Be sure to hit Save Settings before you leave the page.