Formidable Forms

Formidable Forms

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

How to create a side-by-side product comparison

Last Updated: April 28, 2020

Knowledge Base → Views → Examples → How to create a side-by-side product comparison

Many sites include a page to search products and then check a box in the search results to see a side-by-side comparison. This type of comparison may be used for products like health insurance, vehicles, and more. This example shows how to add checkboxes to one view, and use those boxes to filter a second view for a side-by-side product comparison.

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

Create a searchable view

First, create a view that lists all the products that can be selected. Start with the instructions to create a table view.

In most cases, this view will be searchable in order to allow the user to narrow down the products they would like to compare. See more detail on creating a custom search form to filter this view.

Add checkboxes to the product listing view

Now that you have a view set up, add the checkboxes. By including form tags and checkboxes, you'll be able to send users to the second view when they click the 'Compare' button.

Before content (replace 'page-with-view' with the URL to your product comparison page):

<form method="get" action="[siteurl]/page-with-view">

In the content box:

<input type="checkbox" name="compare[]" value="[id]" />

After content:

<button type="submit" class="button">Compare</button>
</form>

Create the side-by-side product comparison

Next, create a view to show the selected products in more detail for the comparison. Set this view to show all entries, and add all of the product information here that you would like. You may want to set a limit on this view to show a maximum of 5 products or so to prevent the columns from being to narrow.

Before content:

&style>.columns2 .column{width:50%; float:left;}
.columns3 .column{width:33%; float:left;}
.columns4 .column{width:25%; float:left;}
.columns5 .column{width:20%; float:left;}
</style>
<div class="columns[entry_count]">

In the content box (replace 25 with the ID of the field holding the product name):

<div class="column">
<h2>[25]</h2>
Add all content here
</div>

After content:

</div>

Then add a filter like this in the comparison view:
Entry ID is equal to [get param=compare]

Now, the second view will be filtered for a side-by-side product comparison when the button in view 1 is clicked.

  • Create a searchable view
  • Add checkboxes to the product listing view
  • Create the side-by-side product comparison
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. Maybe you need to log in?

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