How to Create a “Save This Recipe” Popup Triggered by Button Click

Home » Blog » How to Create a “Save This Recipe” Popup Triggered by Button Click

If you run a food blog or recipe site and want readers to save recipes for later, learning how to create a “save this recipe” popup is one of the most effective ways to turn casual visitors into subscribers.

In this guide, I’ll walk you through the step by step process from button-click triggers to targeting.

We’ll focus on a button-click popup box because it’s intentional, fast, and reader friendly. I’ll use a practical approach you can copy, with internal links to the right setup pages and documentation so you can implement this in minutes.

By the end, you’ll know how to create a “save this recipe” popup that fits your blog, shows up at the right moment, and routes subscribers into your email capture campaign for quick follow-up.

If you’re new to LeadsWithDemos popups and forms, start with our documentation to learn the basics and make sure everything displays correctly on your site. In this tutorial, I’ll cover:

i 3 Table Of Content

Let’s start with what the ‘Save Recipe’ popup is and when to use it.

What “Save Recipe” Popup Is, and When to Use It

Here’s the fastest way to think about it; a “Save Recipe” popup is a small, focused email capture form that opens when a reader clicks a button like “Save this Recipe”. It’s ideal for food blogs because the value exchange is crystal clear; readers enter their email, and you send a personal recipe link or a clean summary so they can revisit the dish later. It’s a smart, intent-driven use of popups for recipes, newsletters, and other gated content.

Use this method when readers are already engaged, typically after they scan ingredients, read tips, or reach the “How to Make It” section. Because the popup appears only on click, it feels helpful rather than intrusive. Start with intent-based moments that align with the reader’s flow.

To make this work in practice, focus on three essentials:

Best timing: Because this popup opens on click, place the “Save This Recipe” button at decision points such as top of the recipe, after the ingredients, or near the final step, so readers can open the form the moment they decide to save.
Ideal promise: Be clear so readers know what to expect, something like “I’ll email you the recipe link and a short, printable summary (ingredients and cook time) so it’s easy to find later”.
Routing: Add subscribers to your “Saved Recipe” campaign; send the confirmation and recipe link immediately, and tag them with the recipe’s category to personalize future follow-ups.

With those foundations set, the next question is placement! where your button should live on the recipe posts.

Where to Place It on Recipe Posts

Placement should follow the reader’s attention. I like to put the “Save this Recipe” button in three spots: near the hero area, after the ingredient list, and near the final step or notes. Each location is a natural point of intent, so the click‑triggered popup feels helpful rather than pushy.

Use a Popup Box so you can trigger on click and choose a display position that fits your design, either a centered modal for focus or a top/bottom corner to keep the recipe visible in the background. The Popup Box supports flexible positioning and can be triggered by buttons, anchor text, or a floating button.

Start with these high‑intent spots on the post:

Hero area (top of article): Readers decide quickly whether a recipe is worth saving. Place the button below the title or main photo.
After ingredients: This is a high‑intent checkpoint. Add a button next to “Ingredients” so readers can save once they’ve reviewed the list and cook time.
Near the method or tips: Catch readers who are committed to cooking and want an easy way to revisit.

Whichever placements you choose, keep the experience on‑brand and avoid auto‑triggering a popup the moment someone lands on a recipe, it could interrupt the reading flow and reduces perceived value. A click trigger is more respectful and typically performs better. If you must use an automatic trigger, you can delay it or require scroll depth, and cap frequency.

Next step: Choose your default display position and button locations, then review the documentation for button-click triggers and Popup Box positioning.

Why a Button‑Click Trigger Works Best

When readers choose to click “Save this Recipe”, they’ve already opted into the idea, so the popup is welcome. That’s the main reason I prefer a button click over scroll, inactivity, or exit intent only for save‑for‑later scenarios. You’ll still have access to those other triggers, but click‑to‑open is uniquely well‑suited to this job.

From a setup standpoint, button‑click triggers are simple; add the provided code snippet to a button’s or anchor’s CSS class, and your Popup Box will fire only when readers want it. This gives you precision and keeps the recipe experience clean. In practice, you’ll see three benefits right away:

Control: Click triggers avoid surprise interruptions and reduce the tendency for readers to tune out ad‑like elements.
Relevance: The popup appears at the exact moment readers intend to save.
Flexibility: You can also link a Slide-In or Sticky Banner button to a Popup Box, keeping the experience lightweight until someone asks for it.

Once the click trigger is live, test it against passive triggers (scroll, delay, exit intent) to confirm the lift in completions. In self‑initiated flows like a two‑step, click‑to‑open opt‑in that reveals the form after a “Yes” click, the completion often rises because friction is lower and motivation is higher. In one case study, this approach lifted opt‑ins by 81.34% over the control. (thrivethemes.com).

Plain‑English takeaway: a “Save this Recipe” button that opens the popup on click can boost form completion because readers chose to start the process.

Pro Tip: Use descriptive microcopy on the button like “Email me this recipe”, so expectations are clear.

Now, it’s time for me to tell you how to create a “save this recipe” popup step by step.

Step‑by‑Step to Build the “Save Recipe” Popup

Let’s build this end to end. This flow works whether you’re deploying on your main site, a landing page, or a testing environment. I’ll point to the exact settings so you can copy the setup and create a reliable, scalable “Save this Recipe” popup.

Important note: Before you begin, make sure you have:

A LeadsWithDemos account.
A LeadsWithDemos site.
(Optional) A website testing environment. In this tutorial, I’ll use a testing environment to place and validate the email capture forms. You can request access to a copy of this environment to practice before implementing on your live site.
The LeadsWithDemos tracking script installed.

For setup details, see our Getting Started guide for LeadsWithDemos.

Follow this sequence end‑to‑end:

Start from a template

Go to Site > Popups & Forms.
Open the Popup Templates tab.
Search for:

Save This Recipe | Top of Article | Popup Box | 1

Click the three dots (⋮) and choose Copy to Popups & Forms.

Edit basic details

In Popups & Forms, find the copied popup and click (⋮), then Edit.
Rename if you like (e.g., “Save This Recipe | Top of Article”) or keep the template name.
Add a clear description, for example:

This ‘Save Recipe’ popup emails a recipe link and short summary after submission.

Click Continue to edit settings.

Design settings

Hide Duration: set to 0.
Close Button: keep background transparent and the icon gray (adjust as needed for your brand).
Click Next.

Targeting & triggers settings

Focus on “Trigger on Button Click”.
Click Code Snippet, copy it, and save it for later. You’ll add it to the Save button’s CSS class on your site or testing site.
Turn off all other trigger types and display options.
Click Next to pass Custom JavaScript, then Finish.

Set as a Lead Gen Form

From the popup’s menu options (⋮), select Set as Lead Gen Form. This makes the popup selectable during the email capture campaign setup, and integrates with your after-capture actions.

Form and submit behavior

Click the Design button (bottom‑right) to open the builder.
Confirm fields (e.g., First Name, Email) and microcopy.
In the form content module, ensure the Submit action is set to Lead Form.
Click Save.

Add the Trigger Button Click Code Snippet to Your “Save This Recipe” Button

Note: I’ll set this up in a website testing environment, which you can get a copy for free.

Locate the code snippet you saved earlier and copy it (before copying it, make sure the classes are separate with a single space).
From the top Admin Bar, hover over the site name, and click Dashboard.
In the left sidebar, hover over Divi, click and Theme Builder.
Find the template applied to All Posts.
Click the pencil icon on Custom Body to open the layout in the Visual Builder.
In the Visual Builder, scroll to your post header area.
Hover the “Save This Recipe” button and click the gear icon to open its settings.
In the settings panel on the right, click the Advanced tab.
Expand Attributes, then click CSS Class.
Paste your snippet’s trigger class into the field.
Confirm Target Element is set to Module so the class applies to the button itself.
Click the Save button in the builder’s top‑right corner and wait for the spinner to finish.
Click Exit to return to the Theme Builder.
Verify you see All Changes Saved at the top.

Your click trigger is now set up. Next, create an email capture campaign that listens for this button click so you can see it in action.

At this point, your popup is configured, targeted, and ready for routing. That completes the button‑click trigger setup. Keep the promise specific and the form simple so readers know exactly what they’ll get after one click.

Next tutorial: I’ll show you how to set up an email capture campaign for your “Save this Recipe” flow, configure a button‑click popup, and use one question at a time prompts to build richer subscriber profiles.

Save This Post

Get Test Demo

Try It Free