Create a View

Any data submitted in a Formidable form can be displayed on your WordPress site using Views. A View can display a listing of all submitted entries and a detailed page for individual entries if wanted. With Views, your options are virtually limitless. You could create a real estate listings site, a job board, a journaling app, an event calendar, etc. You may also use a View to search and filter entries from the front-end of your site.

Download and install

1. If you haven't already done so, install and activate Formidable Forms Pro.
2. In your WordPress admin, go to Formidable → Add-Ons and click the Install button for the Visual Views plugin.

Display entries in a table

If you would like to create a table that displays WordPress form entries on the front-end of your site, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Table View as the View type.
   For more information on these formats, please see the Visual View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. In the Customize View, select the columns that you want to display in the View. You have the option to select all columns, deselect all columns, or search for a specific form field.
   
5. Click the Create a View button and the Table View will be automatically generated.
   
6. In the Advanced Settings, set the Page Size to 50 or less.
   
7. Click Update to save your View.
8. Publish your View on a page. When the page is visited, it should look something like this:
   

Styling table View

To customize your table View, go to the Table Settings and choose from the different styling available from the Row Style dropdown. You can also add a custom class by inserting it on the Custom classes box.

• Match theme settings - Show table that matches the theme settings.
• Zebra Stripes - Show table in alternating rows.
  
• Grid - Show table in a grid layout.
  

To Make table responsive, select this checkbox in the table settings.

If you don't see this option right away, go to your Formidable → Styles page and click the Update button to update the style settings.

If you would like to make your table sortable from the front-end, check out these instructions. You can insert "tablesorter" in the Custom classes box to allow for JS-side table sorting.

Display entries in a bulleted list

If you would like to create a bulleted list of entries for the front-end of your site, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Classic for the View type.
   
   For more information on these formats, please see the View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. In the Before Content box, add the following HTML:

   <ul>
   

5. In the Listing Page Content box, select the Text tab and add the following HTML:

   <li>[874]</li>

   Replace '874' with the field ID or key from your form. If you have set up a detail page, you can add a link to this by replacing [874] with:

   <a href="[detaillink]">[874]</a>

6. In the After Content box, add the following HTML:

   </ul>

7. Click Update to save your View.
8. Publish your View on a page. When the page is visited, it should look something like this:
   

Display entries in a numbered list

If you would like to create a numbered list of entries for the front-end of your site, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Classic for the View type.
   
   For more information on these formats, please see the View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. In the Before Content box, add the following HTML:

   <ol>
   

5. In the Listing Page Content box, select the Text tab and add the following HTML:

   <li>[874]</li>

   Replace '874' with the field ID or key from your form. If you have set up a detail page, you can add a link to this by replacing [874] with:

   <a href="[detaillink]">[874]</a>

6. In the After Content box, add the following HTML:

   </ol>

7. Click Update to save your View.
8. Publish your View on a page. When the page is visited, it should look something like this:
   

You can add HTML and CSS to completely customize your View. Add the CSS to your Formidable → Styles → Custom CSS.

Display entries in a listing format

If you would like to display a list of entries in a format similar to this Trails demo, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Grid for the View type.
   
   For more information on these formats, please see the Visual View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. Create the layout you would like. For this example, we'll skip the layout and click the link to start adding content.
5. In the Listing Page Content box, select the Text tab and add the following.

   <h3>[100]</h3>
   <strong>[101]</strong>
   <hr>

   Replace 100 and 101 with the field IDs or keys from your form. If you have set up a detail page, you can add a link to this by replacing [100] with:

   <a href="[detaillink]">[100]</a>

6. In the Advanced Settings, set the Page Size to 50 or less.
   
7. Click Update to save your View.
8. Publish your View on a page. When the page is visited, you should see something like this:
   

Display entries in a listing format with images

If you would like to display a list of entries with images, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Grid for the View type.
   
   For more information on these formats, please see the Visual View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. Click the Layout Builder button and add a two column row. You can add more rows and columns if you prefer.
   
5. Click Save Layout.
6. Click the plus to add content in the first box.
   
   This box is for the image, so insert:

   [home-image show_image=1 size=medium]

   If you would like a detail page, you can add a link to this by replacing this shortcode with:

   <a href="[detaillink]">[home-image show_image=1 size=medium]</a>

7. Click Update View, and then the plus for the second box. This box is for the text content. Add the following in the text editor for this box:

   [city], [state]
   $[listing-price] [blurb]
   [bedroom] Bedrooms | [bathroom] Bath | [sqft-living] sq. ft.

   Replace home-image with your File Upload field ID. Replace city, state, lsting-price, blurb, bedroom, bathroom, and sqft-living with the field IDs/keys from your form.

8. In the Advanced Settings, set the Page Size to 50 or less.
   
9. Click Update to save your View.
10. Publish your View on a page. When the page is visited, you should see something like this:
    

Display entries in a gallery format

If you would like to display your entries in a gallery format, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Grid for the View type.
   
   For more information on these formats, please see the Visual View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. Click the link to start adding content, and add the following content:

   <img src="[100 size=thumbnail]" alt="" style="width:100%" />
   <p>[101]</p>
   

   Replace 100 with the ID or key of the file upload field in your form. Replace 101 with a field ID or key from your form. If you would like a detail page, you can add a link to this by replacing <img src="[100 size=thumbnail]" alt=""/> with:

   <a href="[detaillink]"><img src="[100 size=thumbnail]" alt=""/></a>

5. In the Grid Style Settings, drag the Number of grid columns to 3 columns. Also set the Padding to 0.
   
6. In the Advanced Settings, set the Page Size to 50 or less.
   
7. Click Update to save your View.
8. Publish your View on a page. When the page is visited, you should see something like this:
   

If you would like to download this View instead of setting it up yourself, please see the Gallery Demo.

Display entries in a calendar

If you would like to display entries in a calendar, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Calendar for the View type.
   

3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. Several calendar options will appear after you select Calendar.
   • Event Date: Select the date field which will determine the date or start date of each event.
     
   • End Date or Day Count: If you will have any multi-day events, select the date field which will determine the end date or day count (which can be a number field) for the event.
   • Repeat: If you would like to have repeating/recurring 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, just 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:
     
   • End Repeat: If you have repeating events and you would like to set an end date for some or all of the repeating events, select the date field which will determine the end date for the repeating event.
5. Go to the Listing Page Content box, select the Text tab and add the following:

   <a href="[detaillink]">[571]</a><br/>

   Replace 571 with the ID of one of the fields from your form, most likely the event title.

6. Click on the Detail Page tab.
   
   Use the Customization panel (right sidebar) to add a few fields to the content box. A few helper tags are available for use inside a calendar view including [event_date].

   Your content for the detail page may look something like this:
   

7. Click Publish or Update to save your View.
8. Publish your View on a page. When the page is visited, you should see something like this:
   

Common problems

If the page slides when the click a previous or next month link, and the page does not change, this indicates a conflict with your theme (like Divi). The easiest solution is usually to turn off smooth scrolling in your theme.

Related customizations

• Force day content to a specific height and add scroll box.

Display a single entry

If you would like to display a single entry from your form, follow the instructions below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Grid for the View type.
   
   For more information on these formats, please see the Visual View Settings page.
3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. In the Advanced Settings, set the Limit to 1.
   
5. Click start adding content, and add a few fields IDs using the Customization panel (right sidebar).
6. Now you need to choose which entry to display. You can control which entry shows up by setting sorting or filtering entries in the View builder.
   • If you want to display only the most recent submitted entry, add a Row in Sort Entries to 'Entry creation date - Descending'.
     
   • If you want to display only the current user's entry, add a Filter that says 'UserID is equal to current_user'.
     
   • If you would like to display a specific entry, add a Filter which says 'Entry ID is equal to 12345', where 12345 is the ID of the entry you want to display.
     
   • If you would like to display a random entry every time the page is visited, set the Order to 'Random'.
7. Click Publish or Update to save your View.
8. Publish your View on a page. When the page is visited, you should see values from a single entry.

Create a basic detail page

If you would like to create a basic detail page for a View, follow the instructions below.

1. Go to edit any View.
2. In the Listing Page Content box, select the Text tab and add a link to the detail page:

   <a href="[detaillink]">[100]</a>

   Replace 100 with a field ID/key from your form.

3. Click on the Detail Page tab.
   
   Use the Customization panel (right sidebar) to add field IDs/keys to the content box. It may look something like this:

   <strong>[100]</strong>
   Distance: [101]
   Difficulty: [102]
   

   Replace 100, 101, and 102 with field IDs/keys from your form. If you would like to use a shortcode to insert all the fields for a single entry in the detail page, you can use the frm-show-entry shortcode and replace x with [id].

4. Click Update View button to save your View.
5. Publish your View on a page if you have not done so already. When the detail page of your View is shown, it will look something like this,
   

Create a detail page with an image

If you would like to create a detail page that includes an image, follow the instructions below.

1. Go to edit a View.
2. In the Listing Page Content box, select the Text tab and add a link to the detail page:

   <a href="[detaillink]">[100]</a>

   Replace 100 with a field ID/key from your form.

3. Click on the Detail Page tab.
   
4. In the Detail Page Content box, select the Text tab and add the following.
   

   <img src="[art-file size=medium]"/>
   <h2>[art-title]</h2>
   <p>By: [art-fname] [art-lname] [art-media]</p>

   Replace art-file, art-title, art-fname, art-lname, and art-media with field IDs/keys from your form.

5. Click Update View button to save your View.
6. Publish your View on a page if you have not done so already. When the detail page of your View is shown, it will look something like this,
   

Link to the detail page from the listing page

If you like to show a list of entries that link to a more detailed page, follow the instructions below. Before proceeding with the instructions, make sure you already have a Classic or Calendar View created.

1. Go into edit a View that has Classic or Calendar selected for the View Type
2. In the Listing Page Content box, select the Text tab and include something like this:

   <a href="[detaillink]">[872]</a>

   Replace '872' with a field ID from the form.

3. Make sure you have added content to your Detail Page. If you have not added content yet, you may follow the instructions here.
4. Click Update View button to save your View.
5. Publish your View on a page if you have not done so already. When the page is visited, it will work like this:
   

Create a View for the current user

If you would like to create a View that only displays the current user's entries, follow the instructions below. Before proceeding, you will first need to create a View.

1. Go into edit the form that is connected to your View. Add a UserID field if it doesn't already have one.
2. Go into edit your View.
3. In the View Builder, click the Filter entries link.
   
   Set up the filter so it says User ID is equal to current_user.
   
   Please note that for this to work you must have the User ID (hidden) field in your form.
4. Click Update View button to save your View.
5. Publish your View on a page if you have not done so already. When the page is visited, the View will only display the entries that the logged-in user submitted.

Graph user's most recent entry

Display the user's most recently submitted information in a graph. Please note that your users must be logged in when submitting entries in order for this to work.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Classic or Grid for the View type.
   

3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. In the Advanced Settings, set the Limit to 1.
   
5. In the Listing Page Content box, select the Text tab and insert the following shortcode:

   [frm-graph fields="x,y,z" entry="[id]"]

   Replace x, y, and z with a field IDs or keys from the form. Leave [id] as is. This shortcode will get the entry ID dynamically. For more graphing options, see the graphs documentation.

6. In the View Builder, click the Filter entries link.
   
   Set up the filter so it says User ID is equal to current_user. Please note that for this to work you must have a User ID (hidden) field in your form.
   
7. In the View Builder, click the Sort entries link.
   
   Set the Order to Entry ID - Descending.
   
8. Click Publish or Update to save your View.
9. Publish your View on a page if you have not done so already. Now when the page is visited, it will show a graph with the current user's most recent entry.

Create a View from a Repeater

When you create a repeatable section in a form, it technically creates a new form. This form is considered a child form, and the parent form is the form which holds the repeatable section.

You may need to create a View from your Repeatable Section if you want to sort or filter by a field in the Repeatable Section. In these cases, you can directly choose the Repeatable Section from the 'Use Entries from Form' dropdown menu in a View. The naming of the child form will be the name of your Repeatable section in your form with '(child)' next to it.

If you would like to include any values from fields outside of the Repeatable Section, you may use this shortcode in your View Content:

[frm-field-value field_id=x entry="[parent_id]"]

Replace x with the ID of any field outside of the Repeatable Section.

If you want to include an edit link in the Repeater View that will link to the parent entry, use the following shortcode:

[ frm-entry-edit-link id="[parent_id]" label="Edit" page_id=y]

Filter Repeatable Child View By a Field In the Parent View

If you create a View directly from the Repeating Section and you insert it inside of the main View, then you can search values inside and outside of the repeating section. You'll insert the child View like this:

[display-frm-data id=x p_id="[id]"]

You will also need to add a filter in the Child View that says

Parent entry ID is equal to [get param=p_id]

Then, if you are searching entries and want to search values outside of the repeating section, add a filter on the main View. If you want to search values inside of the repeating section, add a filter on the main View and on the Child View.

Create View by Post Status

If you are creating posts with your form, you may want to create a View that only shows posts that are published, or posts that are still drafts. If you would like to create a View that displays only draft posts for example, follow these instructions.

Show entry after form submission

If you would like to show a user the details from their submitted entry immediately after form submission, follow the steps below.

1. Go to Formidable → Views. Click the Add New button at the top of the page.
   
2. Select Classic or Grid for the View type.
   

3. In the Use Entries from Form dropdown, select the form that will be used as the data source. The View Name will be automatically populated with the selected form.
   
4. In the Advanced Settings, set the Limit to 1.
   
5. Click to start adding content. Use the Customization panel (right sidebar) to add a few field IDs or keys to the content box. Your content may look something like this:
   

   [176]
   	Email: [181]
   	Phone Number: [182]
   	

6. In the View Builder, click the Filter entries link.
   
   Add a filter that says Entry Key is equal to [get param=entry_key default="none"].
   
7. Save the View then publish it on a page. Copy the URL of the page.
8. Go into edit the form that users will be filling out. Click on the Settings tab.
9. Under On Submit select Redirect to URL. In the box that appears, paste the URL of the page where your View is published, followed by ?entry_key=[key].
   
10. Click Update to save your form.

Now when a user fills out the form, it will immediately redirect to the View where the user can see the details from their submitted entry.

Redirect if No Entries found

Use this JavaScript Example to set a timeout to automatically redirect to another page.

1. In the View settings (left sidebar), insert the JavaScript Example in the No Entries Message box.
   
2. Change 5000 to the length of time you would like before the auto-redirect. Note: 5000 milliseconds is equal to 5 seconds until the redirect happens.
3. Click Publish or Update to save your View.

Create a download link

If you would like to show a link that allows users to download a file upon clicking it, follow the steps below.

1. Go into edit a View.
2. In the Listing Page Content box, select the Text tab and insert the HTML tag (including the download attribute).

   <a href=".../wp-content/uploads/image.png" download="image">Download file</a>

   Replace /wp-content/uploads/image.png with the file URL and replace the image with the filename of the downloaded file.

3. Click Update to save your View.

If you're displaying images uploaded from a File Upload field, your content may look like this to download the full-sized image:

<a href="[101 size=full]" download>[101 show_image=1]</a>

Replace 101 with the ID of the File Upload field.

Advanced customization shortcodes

A variety of helpful advanced customization shortcodes like entry ID, entry key, and post ID can be used in your View. For more information on these available shortcodes, visit the Helpers page.

Troubleshooting

Missing boxes in View settings

In the Legacy Views, the Customization box in the sidebar scrolls with the page to make it easy to click and add content into your View. If a box gets moved into the sidebar it will be hidden under the Customization panel. Click the Unlock icon to let the panel move with the page.

Related developer hooks

• Display multi-selected option values in a view using the frmpro_fields_replace_shortcodes hook.