Any data entered into a Formidable form can be displayed on your site using Visual Views. Learn about the different View types and Advanced settings that you could use to accomplish more with your Views. If you're ready to create a View, you may follow these step-by-step instructions.
When creating a new View, these settings are displayed:
- Select View Type: You can choose between the Grid, Table, Calendar, or Classic.
- Select Data Source: From the Use Entries from Form dropdown, select the form that contains the data you would like to display. The View Name will be automatically populated with the selected form.
View Type
Grid
This View type enables a drag and drop builder to easily create a View layout using draggable column and row blocks. Learn how to display entries in a listing format, listing format with images, gallery format with the Grid type.
The Grid Style Settings gives you the ability to customize the View styling without any coding experience.
For more information on how to use a Grid type, please see this video tutorial.
Table
This View Type will automatically show your form entries in a table on the front-end. After choosing a form where the entries will be coming from, you can select the columns you want to display, and the HTML code will be auto-generated in the View builder. Learn how to create a Table View.
Table Settings
The Table Settings has multiple action icons and field options that will give you the ability to customize the View styling. These settings can be found in the View builder.
Click the settings icon on the right side of the column to add a column name, add link to details page, duplicate and delete columns.
- Column Name: Set the name for each column in the Table View.
- Add link to details page: Select this toggle if you have added a Detail page.
- Duplicate: Create a copy of the existing column
- Delete: Delete the selected column.
Select the Manage columns option to customize which form fields should be shown in the Table View. By default, it will display the current selected and unselected fields.
- Select all: Click this to select all columns in the table.
- Deselect all: Click this to deselect all columns in the table.
- Search: Type in the box to search the form field name.
To Add a column, click the Plus icon on the right side of the table.
To Move a column, select the Move icon and drag/drop to re-order the table columns.
Calendar
Show entries in a calendar format. Each event on your calendar can be turned into a link to a more detailed single entry page. When you select this option, four dropdowns will appear.
- Event Date: Determines where an event will appear on the calendar. For example, if you select "Entry Creation date" from this dropdown and create an entry on March 1st, 2013, the entry will appear on your calendar on March 1st, 2013. If you have any date fields in your form connected to this View, you can select a date field from the dropdown.
- End Date or Day Count: Determines when each event will end if you want to allow multi-day events. If you have a second date field or a number field in your form, you can select this from the dropdown.
- Repeat: Determines the period for any repeating events. If you would like to have repeating events, select a dropdown or radio button field from your form that contains values like "Daily", "Weekly", "Monthly", or "Yearly". If you want more repeat options, check the "Use separate values" option for this field. Then you can add text like "Every other week" with a saved value of "+2 weeks" or even just "2 weeks". Here's an example of what your dropdown/radio button field may look like:
Repeating events can also be set with relative PHP date formats. For example, you can add an option like "first Tuesday of next month." - End Repeat: Determines the end date for any repeating events. If you have repeating events and would like to set an end date for some or all of the repeating events, select the date field that will determine the end date for the repeating event.
Click here to see an example of a Calendar View. Any text added to the Content box will be used for each date on the calendar that includes an entry. The Detail Page Content box is for the single entry.
Classic
This View Type can be used to create a new View from scratch. When you select this option, click the Listing Page tab in the View builder and use the Content box to add all the field entries you would like to get listed. Any of the text in the Content box will be repeated for each entry.
Learn how to use the Detail Page Content and Detail Page Slug below. See the demo page for an example of a View with a detailed page.
Content
The Content section is where you can insert fields from your form, text, shortcodes, HTML, etc. that will be displayed in your View. This section will be repeated for each entry in your View. You may present the entries from your form as a table, list, gallery, or any other format using text, HTML, and CSS.
You can use a combination of the Filter Entries and Sort Entries settings to determine which entry will display in the View.
Filter Entries
Limit which entries are shown. Entries can be filtered based on parameters in the URL, the current user, date ranges, etc. For more information on filtering views, click here.
Sort Entries
Sort your displayed entries by any field, entry creation date, entry update date, or randomly rotate. If you have a Single Entry View and select Entry creation date – Descending, then only the most recent entry will be displayed. Likewise, when you select Random, a random entry will be displayed every time the page is visited or refreshed.
Before and After Content
These boxes are optional, but the Before Content section is a good place to put table headers or other content that should not repeat with each entry. The After Content section is a good place to put table footers or other content that should not repeat with each entry.
Detail Page Content
This setting is available with any View type. If the Detail Page tab is selected in the View builder, the Detail Page Content box will appear where you can use all the same shortcodes and conditional statements that the Listing Page Content box uses. This box is for the detailed single entry page.
The Customization panel in the right sidebar contains links and buttons which will help you insert fields and other shortcodes in your View content. For some examples of what you can do with Views, take a look at some demos.
Advanced Settings
Limit
Limit the total number of entries displayed in your View. Leave blank if you would like all entries shown. Set the Limit to 1 if you would like to display a single entry.
Page Size
Split your View into pages by setting a page size. Enter the number of entries you would like displayed on each page in the Page Size box.
Pagination Type
To display the Pagination Type dropdown, add a value in the Page Size input.
- Reload full page. Select this option to allow pagination by reloading the entire page.
- AJAX pagination. Select this option to allow pagination without reloading the entire page.
- Load more entries. Select this option to add a Load More button that displays more entries when clicked. Set the button text in the Global Settings → Message Defaults page.
- Infinite scroll. Select this option to automatically load more entries as the user scrolls down the page.
Detail Page Slug
This option will show when the main content box includes [detaillink] or the Detail page has content. It will be used when building the URL for the detailed entry pages. In the Parameter Name box, add the text you would like to add to the end of your site URL. The Parameter Value dropdown allows you to select the entry ID or key, which will also add on to the end of your site URL.
For example, if you type jobdetails in the Parameter Name box and select ID for the Parameter Value, your URL for the detailed entry page would look like:
http://example.com/job-listings/jobdetails/1309/.
The ID number on the end is specific to each detailed entry page. If you select Key for the Parameter Value, the ID (1309 in this example) would be replaced with the key which you can optionally define when you edit or create an entry.
Filter Content
Filter how the View content is shown when published on a page, post, or text widget.
- Run Formidable shortcodes only. Set as the default filter for the View content.
- Add paragraphs and process shortcodes. Choose this option if you need to run your View content through other plugins to process external shortcodes.
- Run content through WordPress (not recommended). Choose this option if you are using a plugin that depends on the the_content PHP filter.
Show code for this View
This checkbox is forcibly selected if you include a <table> tag in the Before Content box. If you are editing a view and notice the visual tab is selected and your table HTML is missing, you can switch to the HTML tab, close the content pop up, and reopen it. As long as the settings have not been saved, your old HTML will be back to way it was before loading it in the visual tab. While this is checked, the preview will also display the HTML as code.
View Key
While this is automatically generated based on the View name that you first added, you can still change this if you want.
Use Entries from Form
Select the form that contains the data you would like to display in your View. In this dropdown, you will only find forms that are compatible with the previously selected View template.
No Entries Message
Enter the message you would like users to see when there are no entries to display.
Switch to Classic View
Switching to classic gives you full control of your HTML, but it means that you will no longer have access to the layout builder or style editor tools. This option is available when you're using a Table or Grid type.
View
By clicking the View button, it will generate a preview link. The visibility is set to public if you publish it on a page, post, widget, or even within another View. We recommend using the View shortcode on a page instead of the Preview link.
Visibility
The default state for the Visual View visibility is private. Go to your list of Views and click Quick Edit to configure the visibility settings for each View.
