GuideForms
Login GuideForms PRO

Card Step

The Cards step is the most common step type in GuideForms. It presents visitors with a set of visual cards — each showing a label, optional description, and optional image — and lets them click one or more to make a selection. Cards are included in the free version with no restrictions.

When to use cards

Use a Cards step whenever visitors need to choose from a set of distinct options: product categories, style preferences, use cases, budget tiers, feature priorities, or any other criteria where the choices can be listed out. Cards work best with 2–8 options per step — enough to be useful, few enough to scan at a glance.

Step settings

When you add or select a Cards step in the editor, two settings appear above the card list:

Selection mode

  • Single (default) — The visitor can select exactly one card. A radio-button indicator appears at the bottom of each card. Clicking a different card deselects the previous one.
  • Multiple — The visitor can select any number of cards. A checkbox indicator appears instead. All selected cards contribute their filters to the query.

Choose single selection when the options are mutually exclusive (e.g. “Indoor” vs “Outdoor”). Choose multiple when visitors might want a combination (e.g. selecting several feature preferences).

Card fields

Each card in the list has the following fields:

Label

The main text shown on the card. Keep it to one or two words — for example “Budget”, “Mid-Range”, or “Premium”. The label is rendered at 14 px with bold weight on the frontend.

Description

An optional secondary line below the label. Use it to add brief context — for example “Under $50” or “For everyday use”. Shown in smaller, gray text. Leave it blank if the label is clear enough on its own.

Image

An optional image displayed at the top of the card. Click the image area to open the WordPress Media Library and select an image. The image is displayed at a maximum of 80 × 80 pixels with object-fit: contain, so it works with both square icons and wider graphics. To remove an image, click the remove button that appears on hover.

Filters

The most important part — this is how a card connects to your content. Filters determine which posts match when a visitor selects this card. See the How Filtering Works page for a full explanation of filter sources, operators, and values. In short:

  1. Click Add Filter inside the card editor.
  2. Choose a source from the dropdown — a taxonomy, meta field, ACF field, WooCommerce attribute, or other data source.
  3. Pick an operator (equals, contains, greater than, is any of, etc.). The available operators depend on the source type.
  4. Set the value — either type it in or select from a dropdown of existing terms/options.

You can add multiple filters to a single card. Between filters, a logic toggle lets you choose AND or OR to control how they combine. For example, a “Running Shoes” card might filter by category = “Shoes” AND tag = “Running”.

Managing cards

Adding cards

Click the Add Card button below the card list. A new empty card is appended. There is no hard limit on the number of cards, but aim for 2–8 per step for the best user experience.

Reordering cards

Each card has a drag handle in its header. Grab it and drag the card to a new position in the list. The order in the editor is the order visitors see on the frontend.

Deleting cards

Click the delete icon in the top-right corner of a card’s header. The card is removed immediately. Remember to save the guide to persist the change.

How cards look on the frontend

Each card renders as a clickable tile in a CSS grid. The layout from top to bottom is: image (if set), label, live match count (if filters are configured), description (if set), and a selection indicator (radio or checkbox depending on the mode).

Cards have three visual states:

  • Default — White background with a subtle border.
  • Hover — A slight lift effect with a soft shadow.
  • Selected — The border changes to the primary color and the radio/checkbox indicator fills in.

If a card has filters configured and no posts match the current selections, the card appears disabled — faded at 50% opacity and not clickable. This prevents visitors from making selections that would return zero results.

Cards are fully keyboard-accessible. Visitors can tab through them and press Enter or Space to select.

Live match count

When a card has filters assigned, a small number appears below the label showing how many posts currently match. As the visitor makes selections in other steps, these counts update in real time. This helps visitors make informed choices — they can see at a glance which options have the most results.

Cards with a count of zero are automatically disabled to prevent dead-end selections.

Tips

  • Use images consistently. Either add images to all cards in a step or none. Mixing cards with and without images looks uneven.
  • Keep labels short. One or two words work best. If you need more context, put it in the description field.
  • Match selection mode to the question. “What type of product?” is single select. “Which features matter to you?” is multi-select.
  • Test with real data. After mapping filters, preview the guide to check that match counts make sense and no cards show zero when they shouldn’t.
  • Consider card count vs columns. Six cards in 3 columns makes two clean rows. Five cards in 3 columns leaves a gap in the second row. Adjust columns or card count for a balanced layout.

Next steps

  • Slider Step — Numeric range selection for prices, distances, and more.
  • Lead Form Step — Capture visitor contact info with custom form fields.
  • How Filtering Works — Deep dive into filter sources, operators, and the facet index.