Formidable Forms

The Most Advanced WordPress Forms Plugin and Form Builder

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Create a View

Last Updated: November 9, 2020

Knowledge Base → Views → Create a View
— Premium Feature —

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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
  1. Go to Formidable → Views. Click the Add New button at the top of the page.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
    Create View Format All
    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.
    Create View Page Size
  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:
    Create View Table

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

    Create View Alt Table

  • frm-grid - Show table in a grid layout.
    <table class="frm-grid">

    Create View Grid Table

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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select Disable visual editor for this view.
  5. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
    Create View Format All
    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:
    Create form View Order List

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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select Disable visual editor for this view.
  5. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
    Create View Format All
    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:
    Create forms View Order List

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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
    Create View Format Both
    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.
    Create View Page Size
  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:
    Create View List Demo

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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
    Create View Format All
    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.
    Create View Page Size
  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:
    Create form View with Image

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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'All Entries' or 'Both (Dynamic)' for the View Format.
    Create View Format Both
    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.
    Create View Page Size
  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:
    Create View Gallery Demo

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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'Calendar' for the View Format.
    Create View Format Calendar
  5. Several calendar options will appear after you select 'Calendar'.
    • Create View CalendarEvent 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:
      Create View Repeat Field
    • 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.
    Create View Details 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:
    Create View Dynamic Calendar

  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:
    Calendar Gif

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.
    Create View Add New
  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.
    Create View Use Entries
  4. In the View Format section, select 'Single Entry'.
    Create View Format Single
  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'.
      Create View
    • If you want to display only the current user's entry, add a Filter that says 'UserID is equal to current_user'.
      Create View Filter User ID
    • 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.
      Create View Filter Entries
    • 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.
    Create View Details 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 View Single List

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.
    Create View Details 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,
    Create View Single Image

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 View Link to Detail

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'.
    Create View Filter User ID
    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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'Single Entry' for the View Format.
    Create 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.
    Create View Filter User ID
    Set the Order to 'Entry ID - Descending'.
    Create View
  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.
Repeatable Section Child View
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.
    Create View Add New
  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.
    Create View Use Entries
  4. Select 'Single Entry' for the View Format.
    Create 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"]'.
    Create View Submit View Filter
  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].
    Create View Redirect Submit View
  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.
Create View Form to View

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.
    Create View Redirect No entries found
  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 Videos

  • Create a dynamic view for job listings

Related Topics

  • About the Customization Panel
  • Advanced View Concepts
  • frm_before_day_content
  • How to Display Real Estate Listings
  • How to display Testimonials in WordPress
  • How to Set Up Comments
  • View Settings
  • Download and install
  • Display entries in a table
    • Styling table View
  • Display entries in a bulleted list
  • Display entries in a numbered list
  • Display entries in a listing format
  • Display entries in a listing format with images
  • Display entries in a gallery format
  • Display entries in a calendar
    • Common problems
    • Related customizations
  • Display a single entry
  • Create a basic detail page
  • Create a detail page with an image
  • Link to the detail page from the listing page
  • Create a View for the current user
  • Graph user's most recent entry
  • Create a View from a Repeater
    • Filter Repeatable Child View By a Field In the Parent View
  • Create View by Post Status
  • Show entry after form submission
  • Redirect if No Entries found
  • Create a download link
  • Advanced customization shortcodes
  • Troubleshooting
    • Missing boxes in View settings
  • Related Videos
  • Related Topics
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms
Install Formidable Lite

Using WordPress and want to get Formidable Forms for free?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact

Top Features

  • Front End Editor
  • Repeating Fields
  • Views from Entries
  • Calculator Forms
  • Conditional Logic
  • Visual Form Styler
  • Form Templates
  • User Submitted Posts
  • File Upload Forms
  • Spam Protection
  • Multi Page Forms
  • Surveys & Polls
  • Form Graphs & Charts
  • Save and Continue
  • Mobile Forms
  • Stripe Forms
  • PayPal Forms
  • WooCommerce Forms
  • MailChimp Forms
  • User Registration
  • Signature Forms
  • Bootstrap Forms
  • Quiz Maker
  • Zapier Forms
  • Salesforce Forms
  • HubSpot Forms
  • API Webhooks
  • Multilingual Forms
  • Directories

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2021 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started