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 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
   
   For more information on these formats, please see the View Settings page.
5. Select Disable visual editor for this view.
6. In the Before Content box, add the following HTML:

   <table>
   <thead>
   <tr>
   <th>Name</th>
   <th>Birthday</th>
   <th>Age</th>
   <th>Home</th>
   </tr>
   </thead>
   <tbody>

   Replace 'Name', 'Birthday', 'Age' and 'Home' with the names of your table headers.

7. In the Content box, add the following HTML:

   <tr>
   <td>[872]</td>
   <td>[873]</td>
   <td>[875]</td>
   <td>[876]</td>
   </tr>

   Replace '872', '873', '875' and '876' with the field IDs or keys from your form. If you selected 'Both (Dynamic)' for your View format, you can add a link to the detail page by replacing [872] with this:

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

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

   </tbody>
   </table>
   

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

Styling table View

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

If you would like to style your table View, you could use the built-in CSS classes. In the Before Content box, replace <table> with the following:

• frm-alt-table - Show table in alternating rows.

  <table class="frm-alt-table">

  

• frm-grid - Show table in a grid layout.

  <table class="frm-grid">

  

If you would like to make your table sortable from the front-end, check out these instructions.

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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select Disable visual editor for this view.
5. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
   
   For more information on these formats, please see the View Settings page.
6. In the Before Content box, add the following HTML:

   <ul>
   

7. In the Content box, add the following HTML:

   <li>[874]</li>

   Replace '874' with the field ID or key from your form. If you selected 'Both (Dynamic)' for your View format, you can add a link to the detail page by replacing [874] with this:

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

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

   </ul>

9. Click Publish or Update to save your View.
10. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select Disable visual editor for this view.
5. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
   
   For more information on these formats, please see the View Settings page.
6. In the Before Content box, add the following HTML:

   <ol>
   

7. In the Content box, add the following HTML:

   <li>[874]</li>

   Replace '874' with the field ID or key from your form. If you selected 'Both (Dynamic)' for your View format, you can add a link to the detail page by replacing [874] with this:

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

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

   </ol>

9. Click Publish or Update to save your View.
10. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
   
   For more information on these formats, please see the View Settings page.
5. Select Disable visual editor for this view or just temporarily switch to the Text editor.
6. Add the following in the Content box.

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

   Replace 100 and 101 with the field IDs or keys from your form. If you selected 'Both (Dynamic)' for your View format, you can add a link to the detail page by replacing [100] with this:

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

7. In the Advanced Settings area, set the Page Size to 50 or less.
   
8. Click Publish or Update to save your View.
9. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
   
   For more information on these formats, please see the View Settings page.
5. Add the following into your CSS file or into the 'Formidable' → 'Styles' → 'Custom CSS' section.

   .listing_info{float:left; width:235px; margin-right:10px;}
   .listing_list img{width:370px;float:right;}
   

6. In the Content box, add the following:

   <div class="listing_info">
   <img src="[home-image size=thumbnail]" alt=""/>
   </div>
   <div class="listing_list"><strong>[city], [state]</strong>
   <strong>$[listing-price]</strong> [blurb]
   [bedroom] Bedrooms | [bathroom] Bath |[sqft-living] sq. ft.</div>
   <div style="clear:both;"></div>

   If you selected 'Both (Dynamic)' for your View format, you can add a link to the detail page by replacing <img src="[home-image size=thumbnail]" alt=""/> with this:

   <a href="[detaillink]"><img src="[home-image size=thumbnail]" alt=""/></a>

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

7. In the Advanced Settings area, set the Page Size to 50 or less.
   
8. Click Publish or Update to save your View.
9. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
   
   For more information on these formats, please see the View Settings page.
5. Add the following into your CSS file or into the 'Formidable' → 'Styles' → 'Custom CSS' section.

   .art-vote-links {margin-left:3px;}
   ul.art-contest li {
   background-image:none !important;
   float:left;
   display:inline;
   box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
   margin:5px 7px 10px 3px;
   padding:0;
   }
   ul.art-contest img{
   width:250px;
   max-height: 150px;
   vertical-align: middle;
   opacity:1;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   position:relative;
   }
   ul.art-contest img:hover{opacity:.6;}
   ul.art-contest a, ul.art-contest img{transition:all 0.3s ease 0s;}
   ul.art-contest p a {color:#333333;}
   ul.art-contest p a:hover{text-decoration:none;color:#298CBA;}
   ul.art-contest p {margin:15px;color: #999999;}
   ul.art-contest {clear:both;}
   

6. In the Before Content box, add the following:

   <ul class="art-contest">
   

7. In the Content box, add the following:

   <li>
   <img src="[100 size=thumbnail]" alt=""/>
   <p>[101]</p>
   </li>
   

   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 selected 'Both (Dynamic)' for your View format, you can add a link to the detail page by replacing <img src="[100 size=thumbnail]" alt=""/> with this:

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

8. In the After Content box, add the following:

   </ul>
   <div style="clear:both;"></div>
   

9. In the Advanced Settings area, set the Page Size to 50 or less.
   
10. Click Publish or Update to save your View.
11. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select 'Calendar' for the View Format.
   
5. 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.
6. Go to the Content box. 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.

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

   Your Dynamic Content may look something like this:
   

8. Click Publish or Update to save your View.
9. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. In the View Format section, select 'Single Entry'.
   
5. In the Content box, 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 an Order or a Filter in the Advanced Settings of your View.
   • If you want to display only the most recent submitted entry, set the Order 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 into edit a View that has 'Both (Dynamic)' or 'Calendar' selected for the View Format.
2. In the Content box, 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 Dynamic 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 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 into edit a View that has 'Both (Dynamic)' or 'Calendar' selected for the View Format.
2. In the Content box, 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.
   
   Add the following to the Dynamic Content box.

   <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.

4. Click Update 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,
   

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 'Both (Dynamic)' or 'Calendar' View created.

1. Go into edit a 'Both (Dynamic)' or 'Calendar' View.
2. In the Content box, 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 in the Dynamic Content box. If you have not added content to the Dynamic Content box yet, you may follow the instructions here.
4. Click Update 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. Scroll down to the Advanced Settings. In the 'Sort & Filter' section click the '+Add' button next to Filter Entries. 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 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to graph.
   
4. Select 'Single Entry' for the View Format.
   
   For more information on these formats, please see the View Settings page.
5. In the Content box, 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. Scroll down to the 'Advanced Settings'. In the 'Sort & Filter' section click the '+Add' button next to Filter Entries. Set up the filter so it says 'User ID is equal to current_user'. Please note that you must have the 'User ID (hidden)' field in your form.
   
   Set the Order to 'Entry ID - Descending'.
   
7. Click Publish or Update to save your View.
8. 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. Enter a title for your View.
3. In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
   
4. Select 'Single Entry' for the View Format.
   
5. 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. Scroll down to the Advanced Settings. Under Sort & Filter 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. Scroll down to the Advanced Settings → Sort & Filter section, 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 Content box, 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:

<a href="[101]" download="[101 show_filename=1]">[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

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.