GiveWP Form Grid Shortcode

The give_form_grid shortcode allows for an easy way to display multiple donation campaigns and also allows quick access to each individual donation form.

Donation Form Grid Shortcode

The [give_form_grid] shortcode allows you to display multiple forms in an interactive grid anywhere on your website. This will help your donors more clearly decide which form to donate to.

Say you would like a page to display a number of your site’s donation forms in a nice easy-to-see way. This will help your donors more clearly decide which form to donate to. This shortcode can display a modal window donation form that pops up, or redirect your donors to that form page. Donation goals and featured images can be added to help convey the need for each form.

Shortcode Builder Options

Use the GiveWP Shortcode builder to toggle on and off certain arguments in order to customize this shortcode. With the GiveWP Form Grid shortcode builder, you can customize the shortcode using the following specifications:

• Forms Per Page: Shows how many forms will display per page. Pagination controls will be visible if more forms exist
  • Shortcode attribute: [forms_per_page]
  • Attribute values: single numerical value, defualt is “12”
• Form IDs: Show forms based on ID. By default, all forms appear on the grid.
  • Shortcode attribute: [ids]
  • Attribute values: A comma-separated list of form IDs will cause the grid to include only those forms, default “All Forms”
• Exclude Form IDs: Exclude one or more forms from the grid.
  • Shortcode attribute: [exclude]
  • Attribute values: A comma-separated list of form IDs will cause the grid to exclude only those forms.
• Columns: Set the number of columns you would like to display in your grid.
  • Shortcode attribute: [columns]
  • Attribute values: best-fit (default), 4, 3, 2, 1.
• Order By: Choose the parameters by which the forms appear.
  • Shortcode attribute: [orderby]
  • Attribute values: date (default), title, amount_donated, number_donations, menu_order, post__in, closest_to_goal.
• Order: Choose the order in which the donors appear, according to the Order by choice.
  • Shortcode attribute: [order]
  • Attribute values: DESC for descending order (default), ASC for ascending order.
• Categories: If you have categories enabled in GiveWP, you can list the category IDs that you want displayed in this grid.
  • Shortcode attribute: [cats]
  • Attribute values: A comma-separated list of form category IDs will cause the grid to include only forms from those categories.
• Tags: If you have tags enabled in GiveWP, you can list the category IDs that you want displayed in this grid.
  • Shortcode attribute: [tags]
  • Attribute values: A comma-separated list of form tag IDs will cause the grid to include only forms with those tags.
• Display Type: Show form as modal window or redirect to the form page.
  • Shortcode attribute: [display_style]
  • Attribute values: modal_reveal (default) or redirect. “modal_reveal” will pop up a window allowing your donors to make a donation from the form grid page. “Redirect” will take your donors to the single donation form page.
• Show Title: This enables/disables display of the title in the form.
  • Shortcode attribute: [show_title]
  • Attribute values: true (default), false
• Show Excerpt: This enables/disables display of the form content in the form
  • Shortcode attribute: [show_excerpt]
  • Attribute values: true (default), false
• Show Goal: This shows the progress bar of the forms, if a goal has been enabled in the form.
  • Shortcode attribute: [show_goal]
  • Attribute values: true (default), false
• Show Featured Image: Choose if the featured image of the form is shown.
  • Shortcode attribute: [show_featured_image]
  • Attribute values: true (default), false
• Show Donate Button: Show or hide the donate button.
  • Shortcode attribute: [show_donate_button]
  • Attribute values: true (default), false
• Donate Button Text: Apply custom text to all donate buttons in this form grid.
  • Shortcode attribute: [donate_button_text]
  • Attribute values: your custom text
• Tag Background Color: Apply this background color to all tags in this form grid.
  • Shortcode Attribute: [tag_background_color]
  • Attribute value: #69B868
• Tag Text Color: Apply the text color of all form tags if present.
  • Shortcode Attribute: [tag_text_color]
  • Attribute Value: #333333
• Donation Button Text Color: The text color of the donate button. Applies to all donate buttons in this form grid.
  • Shortcode Attribute: [donation_button_text_color]
  • Attribute Value: #69B868
• Progress Bar Color: Apply this background color to all progress bars in this form grid. This will override individual form progress bar colors.
  • Shortcode Attribute: [progress_bar_color]
  • Attribute Value: #69B868

Additional Shortcode Arguments

There are some additional shortcode attributes that you can add into your shortcode manually that are not visible in the shortcode builder.

• Featured Image Size: This sets the featured image size used within the card display based on your WordPress Media Settings. It will not change the actual card display size itself, but instead chooses which of the image sizes from Media settings will be used. A smaller image will be stretched to fill the display card.
  • Shortcode attribute: [image_size]
  • Attribute values: medium (default), small, large
• Featured Image Height: Adjust the height of the featured image.
  • Shortcode attribute: [image_height]
  • Attribute values: Any value in pixels.  Include the units, for example “100px”.
• Excerpt Size: You can truncate the exact word-length of the excerpt displayed with this argument.
  • Shortcode attribute: [excerpt_length]
  • Attribute values: single numerical value. Default is “16”.

Sample Layout – Modal Forms

This example is great for forms that need less information from a donor and that should be faster to fill out. It uses the modal option, which opens up the form directly on the page. The image is small and the excerpt is short.

[give_form_grid columns="2" show_goal="true" show_excerpt="true" show_featured_image="true" display_style="modal_reveal"]

Sample Layout – Minimal Grid

This example shows a grid with minimal elements to keep the layout clean.

[give_form_grid columns="2" show_goal="false" show_excerpt="false" show_featured_image="false"]