Tables & Forms

The Red theme includes components for Tables, TablePress, and Gravity Forms. Tables are created directly in the page where you want them placed. TablePress tables are created in the TablePress plugin, then implemented on a page via the TablePress Component.  Forms are created first in the "Forms" feature accessed from the dashboard menu. Once you've created a form, you add the Gravity Form component to your page and select which form to use from a drop-down menu in the component.

Tablepress Component

The TablePress Component allows you to create custom tables with embedded links and images, without having to implement custom HTML code that could conflict with the RED Theme.  TablePress also allows you to stylize/format the text of the cells and import/export .csv files to ease in table creation.  As an added bonus, you can allow visitors to sort the table on the live site, or keep it static (it is set to allow this by default).

In order to use the TablePress Component, you must first create a table with the TablePress plugin.  Login to your site, and select “TablePress” from the dashboard.  You will then be able to create a new table, edit an existing one, or import/export a .csv file.  After you create a table, you can then add the TablePress Component to any page and it will allow you to select from a drop down, one of your pre-made tables.

Check out an example of the TablePress Component in action below.

Link ExamplesImage ExamplesFormatting Examples
Here is an example link to our Components and Post page.

therapy dog at Doggypalooza, an event sponsored by the Student Activities Board (SAB)
Photo: Jenny Fontaine

Example of Italics
Here is an example of linking to an email address.

Sears/Willis Tower at sunset

Example of Bold and Underlined

Example table

This field is the optional table caption. The table title can be hidden, but is required for screen readers. Tables can include row headers and column headers.
Column 1 Column 2 Column 3
Row 1 You can use HTML to Add a link but you also need to add HTML to add underline, link doesn't have typical link formatting I can manually add line breaks.
and here.
Another line
One more line to push content.
Row 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt aliquam tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt aliquam tortor.
Row 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt aliquam tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt aliquam tortor.

Example form

  • Field can include an input mask. You can set maximum characters and mark it required.
  • Add a Dropdown field

How to use Gravity Forms

Slate Form Component

backend view of slate form component

If you are already working within the Slate platform, RED allows you to implement/display Slate Forms on your site.  The Slate Form Component is available on Default, Contact, and Landing page Templates, as well as within Event post types.

There are three required data fields when implementing the Slate Form Component:

  • Title (with the option to hide this on the front end)
  • Domain (i.e. that you have registered with Slate)
  • Reference ID (The reference ID provided by Slate for the form you want to embed)


Giving Form Component

Giving Form Walkthrough

The Giving Form Component (only available on Default Template Pages), simplifies the way you can solicit donations to particular University of Illinois Foundation funds.  The Giving Form Component will direct visitors to an encrypted and secure U of I Foundation funding page, pre-filling whatever particular charitable fund you are promoting, as well as the charitable amount the visitor enters on your page.  The Giving Form Component has several required fields, which must be accurately filled out on the back-end (screenshot can be seen above).

They are as follows:

  • Department Name (for the site displaying the form)
  • Department Email (for the site displaying the form – where notifications will be sent when funds are donated.  Can be several emails, separated by commas.)
  • Tracking Code (for the department/school/etc. displaying the form to assist tracking funds allocated through the form – Created through the University of Illinois Foundation)
  • Fund Number (Created through the University of Illinois Foundation)
  • Fund Name (Created through the University of Illinois Foundation).
  • OPTIONAL – Fund Description

You can make several different funds available on a single page by clicking on “Add another fund” as well as set how the form will appear to the visitor (List or Tile).

IMPORTANT: When first creating a form, and after filling out all of the required information, we suggest that you set the “Destination Location” to “Test”.  This will allow you to test out the form, making sure that there are no discrepancies in where potential donors are being sent.  To test the form yourself, after “updating” the page, view the actual page (not the back-end) and fill out the form – as a visitor would.  If it sends you to the proper U of I Foundation Fund (secure test servers), than the form is working properly.  When you are finished testing, make sure to select “Production” from the “Destination Location” field in the component, and click “Update” to the page.  This will allow funds to actually be sent to the particular fund(s) you are promoting.

If you need more information on setting up an actual U of I Foundation fund, head over to their website.

See an example (test) of the Giving Form in action below.

Giving Form Example (TEST)

Test Fund 1

Here is where a brief description of the fund can be included.

Test Fund 2

The layout of this test Giving Form is set to Tile Style.