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.

04/13/2016
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.

10/08/2009
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.
Here
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. yoursite.uic.edu that you have registered with Slate)
  • Reference ID (The reference ID provided by Slate for the form you want to embed)

 

Giving Form Component

This documentation is for live “public” sites on Red and assumes your department has acquired the following from the University of Illinois Foundation (UIF): 

 

* A 5-digit tracking code

* An 8-digit code for each fund

* A public name for each fund

 

Your form cannot operate without these key elements. If you do not have the above information, please reach out to creditcardsignup@uif.uillinois.edu before proceeding. To add a UIF giving form on other, non-Red platforms, refer to the official UIF Online Documentation.

 

  1. Add the “Giving Form” component to the page in the editing window. This component is only available for pages using the “default” page template. 
  2. Enter a title, your Department Name, Department Email, and Tracking code. Note: Department Name and Department Email are deprecated fields no longer required by UIF and will be removed from this form at a later date. 
  3. If this is the first time setting up this form on your Red site, select the “Test” option under “Destination Location.” Do not select “Production” until you have completed steps 4-8. 
  4. Under the “Funds” area, enter the Fund Number and Fund Name for each fund you wish to list. These fields must match UIF’s records exactly. Alternately, you can group funds together with the “Add another group” button. Limit of 30 funds per donation form. 
  5. Save the page as a draft. 
  6. Email creditcardsignup@uif.uillinois.edu and schedule a testing window. This is a mandatory step in which UIF will verify the accuracy of the tracking code, fund code(s), and fund name(s) you entered in the Giving Form component. 
  7. At the time of the testing window, change the page status from “draft” to “published” so UIF staff can access the form. 
  8. After UIF tests your page, they will contact you with a list of any discrepancies that must be corrected. If you don’t already have an email address on record, they may request one for donation notification purposes. 
  9. Once you have UIF approval, change the “Destination Location” option on the form to “Production.” Your form is now ready to process donations via UIF. 
  10. To add new funds to the form after the initial approval, please contact creditcardsignup@uif.uillinois.edu to schedule another testing time. 

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.