GuideForms
Login GuideForms PRO

Creating your first guide

This tutorial walks you through creating a simple guide from scratch. By the end, you’ll have a working multi-step guide embedded on a page that filters your content in real time.

Step 1: Create a new guide

  1. In your WordPress admin, go to GuideForms → All Guides.
  2. Click the Add New button.
  3. Enter a name for your guide — for example “Product Finder”. This name is only visible in the admin, not on the frontend.

You’re now in the Guide Editor — a three-column interface with the step list on the left, the step editor in the center, and the settings panel on the right.

Step 2: Add your first step

  1. Click the + Add Step button in the left panel.
  2. Choose Cards as the step type. This is the most common step type and is available in the free version.
  3. Give the step a title that visitors will see — for example “What are you looking for?”.
  4. Optionally add a description below the title to provide more context.

Step 3: Add card options

Each card represents one answer option that visitors can select. Add a few cards to your step:

  1. Click + Add Card in the step editor.
  2. Enter a title for the card — for example “Laptops”.
  3. Optionally add a description and an image to make the card more visual.
  4. Repeat for each option you want to offer (e.g. “Tablets”, “Monitors”, “Accessories”).

You can reorder cards by dragging them. For the best visual result, aim for 3 to 6 cards per step.

Step 4: Assign a filter

Filters are what connect visitor selections to your actual content. Each card needs to map to a filter value so GuideForms knows which posts to show.

  1. In the step editor, open the Filter section.
  2. Select a filter source — for example a taxonomy like “Product Category” or a custom field.
  3. GuideForms will automatically detect available values. Map each card to its corresponding value (e.g. the “Laptops” card maps to the “Laptops” category).

If you don’t see your fields listed, make sure the facet index has been built. Go to GuideForms → Tools and click Rebuild Index.

Step 5: Add more steps (optional)

A guide can have as many steps as you need. Click + Add Step again to add a second step — for example a price range (using a Slider step in Pro) or a feature preference (using another Cards step).

Each additional step further narrows down the results. Keep it focused — most effective guides have 2 to 4 steps.

Step 6: Configure results

After the last step, visitors see the filtered results. You can configure how results are displayed in the settings panel on the right:

  • Layout — Grid or list view
  • Columns — Number of columns in grid layout
  • Posts per page — How many results to show before pagination
  • Content — Toggle title, excerpt, featured image, and read-more link

Step 7: Save and preview

Click the Save button in the top right corner. Your guide is now saved as a draft. Use the Preview button to open a live preview and test the guide flow yourself — click through the steps and verify that the correct results appear.

Step 8: Embed on a page

Once you’re happy with the guide, embed it on any page or post:

Using the Gutenberg block

  1. Edit the page where you want the guide to appear.
  2. Click the + block inserter and search for “GuideForms”.
  3. Insert the block and select your guide from the dropdown.
  4. Publish or update the page.

Using the shortcode

Alternatively, paste the shortcode anywhere shortcodes are supported:

[guide id="123"]

Replace 123 with your guide’s ID. You can find the ID in the GuideForms → All Guides list or in the Guide Editor URL.

That’s it

You now have a working guide on your site. Visitors can step through it, make selections, and see filtered results in real time. From here you can: