Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Create a View

Last Updated: June 2, 2022

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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
Subscribe on YouTube

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.
    Create View Add New
  2. Select Table View as the View type.
    Create View Format TableFor 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.
    Create View Use Entries
  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.
    Create View Customize View
  5. Click the Create a View button and the Table View will be automatically generated.
    Create View Create Table Builder
  6. In the Advanced Settings, set the Page Size to 50 or less.
    Create View Page Size
  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:
    Create View Table

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.
Create View Table Settings

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

To Make table responsive, select this checkbox in the table settings.
Create View Table Responsive
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.
    Create View Add New
  2. Select Classic for the View type.
    Create View Format All
    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.
    Create View Use Entries
  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:
    Create form View Unordered 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. Select Classic for the View type.
    Create View Format All
    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.
    Create View Use Entries
  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:
    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. Select Grid for the View type.
    Create View Format Grid
    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.
    Create View Use Entries
  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.
    Create View Page Size
  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:
    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. Select Grid for the View type.
    Create View Format Grid
    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.
    Create View Use Entries
  4. Click the Layout Builder button and add a two column row. You can add more rows and columns if you prefer.
    grid view layout
  5. Click Save Layout.
  6. Click the plus to add content in the first box.
    grid view add content
    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.
    Create View Page Size
  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:
    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. Select Grid for the View type.
    Create View Format Grid
    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.
    Create View Use Entries
  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.
    grid view styling
  6. In the Advanced Settings, set the Page Size to 50 or less.
    Create View Page Size
  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:
    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. Select Calendar for the View type.
    Create View Format Calendar

  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.
    Create View Use Entries
  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.
      Create View Calendar
    • 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 FieldCreate View Repeat1 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.
  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.
    Create View Details 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:
    Create View Dynamic Calendar

  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:
    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. Select Grid for the View type.
    Create View Format Grid
    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.
    Create View Use Entries
  4. In the Advanced Settings, set the Limit to 1.
    Create View Single Entry Limit
  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'.
      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 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.
    Create View Details 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 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 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.
    Create View Details 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,
    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 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 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. In the View Builder, click the Filter entries link.
    Create View Layout 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 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.
    Create View Add New
  2. Select Classic or Grid for the View type.
    Create View Format Recent Entry

  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.
    Create View Use Entries
  4. In the Advanced Settings, set the Limit to 1.
    Create View Single Entry Limit
  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.
    Create View Layout 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 a User ID (hidden) field in your form.
    Create View Filter User ID
  7. In the View Builder, click the Sort entries link.
    Create View Layout Sort Entries
    Set the Order to Entry ID - Descending.
    Create View
  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.
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. Select Classic or Grid for the View type.
    Create View Format All

  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.
    Create View Use Entries
  4. In the Advanced Settings, set the Limit to 1.
    Create View Single Entry Limit
  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.
    Create View Layout Filter Entries
    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. In the View settings (left sidebar), 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 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.

Related Articles

  • How to Use a WordPress PDF Certificate Generator How to Use a WordPress PDF Certificate Generator
    Read More
    Formidable PDF: Custom WordPress PDF Generator Plugin
    Read More
    How To Use a PDF Editor in WordPress How To Use a PDF Editor in WordPress [Design Your PDFs!]
    Read More
  • Best WordPress Goal Tracking Plugin The Only WordPress Goal Tracking Plugin You Need
    Read More
    How to get WordPress Infinite Scroll on your site How to Get WordPress Infinite Scroll on Your Site
    Read More
    Introducing the Best Low Code Application Platform for WordPress Introducing the Low Code Application Platform for WordPress
    Read More
  • Display form submissions in an image carousel in WordPress with Formidable Forms How to Display Form Submissions in an Image Carousel
    Read More
    How to Restrict Access to WordPress Content to Specific Users How to Restrict WordPress Content to Specific Users
    Read More
    How to Create a WordPress QR Code (With Prefilled Fields) How to Create Dynamic WordPress QR Codes and Auto-Fill Forms
    Read More
  • How to show business hours on WordPress site How to Show Business Hours on Your WordPress Website
    Read More
    How to Make a Responsive Table How to Make a Responsive Table in WordPress
    Read More
    How to Create a Personal Journal Platform in WordPress How to Create a Private WordPress Journal Platform
    Read More
  • WordPress table plugin The Ultimate WordPress Table Plugin
    Read More
    How to Display Form Submissions in WordPress How to Display Form Submissions in WordPress (3 Steps)
    Read More
    GravityView plugin alternative The Best GravityView Alternative: Formidable Views vs. GravityView
    Read More

Related Topics

  • Advanced View Concepts
  • 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 developer hooks
  • Related Articles
  • Related Topics
Categories
×

Categories

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

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form.

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
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 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 See User Reviews