How to Use the Contraceptive Method Effectiveness Calculator

This guide walks through what the calculator does, how to add it to a WordPress page, and how to read the results once it’s live.

What the tool is for

The calculator lets a visitor compare birth control methods side by side using two standard measures:

• Typical-use rate — how many pregnancies occur per 100 people using the method for one year, in real-world conditions (missed pills, inconsistent use, and so on).
• Perfect-use rate — the same measure, but assuming the method is used exactly as directed every time.

Comparing the two numbers for a given method is often more useful than either number alone — a big gap between them usually means effectiveness depends heavily on how consistently the method is used, while a small gap means the method is close to “fire and forget.”

The tool does not ask for or store any personal information, and it doesn’t give individualized recommendations. It’s a comparison and education aid, not a substitute for a conversation with a clinician.

Adding it to a WordPress page

1. Open the page or post where you want the calculator to appear, using the block editor.
2. Add a Custom HTML block. Click the + icon, search for “Custom HTML,” and add it to the page.
3. Paste the full code. Copy everything from the file you were given — starting at <div class="concalc-root"> and ending at the closing </div> — and paste it into the block.
4. Preview the page. Use the block’s Preview tab, or preview the full page, to confirm it renders correctly before publishing.
5. Publish. No shortcode, plugin, or additional setup is needed — the styling and behavior travel with the block.

If your site uses a page builder (Elementor, Divi, etc.) instead of the block editor, look for an “HTML,” “Code,” or “Embed” element and paste the code there instead of a Custom HTML block.

If something looks off

• Fonts look plain (no serif headline): some hosts or ad/tracker blockers prevent the Google Fonts request from loading. The tool falls back to your system’s default serif and sans-serif fonts automatically, so this is cosmetic only and won’t break functionality.
• Layout looks squeezed or oversized: the calculator is capped at 880px wide and centers itself, so it should sit comfortably in most theme content columns. If your theme’s content column is unusually narrow, the method grid will simply wrap to fewer columns per row — this is expected responsive behavior, not a bug.
• Nothing appears at all: double-check the entire block was pasted, including the opening <div class="concalc-root"> tag and the closing <script> and </div> tags at the end. A partial paste is the most common cause of a blank block.

How a visitor uses it

1. Browse or filter methods. The top row of pill-shaped buttons (All, Natural, Barrier, Hormonal, LARC, Permanent) filters the method grid below. Filtering doesn’t affect anything already selected — it only changes what’s shown in the browsing grid.

2. Select methods to compare. Clicking a method card selects it (it gets a highlighted border) and adds it to the “Your comparison” section below. Clicking it again deselects it. Up to five methods can be compared at once; selecting a sixth will drop the oldest selection to make room.

3. Read the stat cards. Each selected method gets its own card showing:

• A large number: pregnancies per 100 users per year with typical use
• A smaller line underneath: the same figure for perfect use

The gap between those two numbers is often the most informative part — a method with “7 typical / 0.3 perfect” (like the pill) is highly effective when used exactly as directed, but real-world consistency brings the practical number up significantly.

4. Read the comparison chart. Below the stat cards, a horizontal bar chart lines up all selected methods by typical-use rate, shortest bar (most effective) to longest (least effective). The chart uses a compressed scale so that very effective methods (well under 1 per 100) and less effective ones (into the double digits) both stay visible on the same chart — bar length shows relative order and rough magnitude, not a strict linear ratio.

5. Remove a method. Click the small × in the corner of any stat card, or click its card again in the grid above, to remove it from the comparison.

Suggested framing copy for the page

If you’re placing this on a page with surrounding text, a short intro above the tool and a link to a clinician-finder or scheduling page below it tends to work well — for example, inviting readers to use the comparison as a starting point for a conversation with their provider rather than as a final answer.

A note on the data and disclaimer

The effectiveness figures are the standard published one-year U.S. failure rates commonly cited in clinical patient education materials. They’re built into the tool’s footer disclaimer, which notes that:

• Individual results vary by health history and consistency of use
• Condoms are the only listed method that also reduces STI risk
• The tool is educational only and isn’t a substitute for medical advice

Keep that footer text in place when embedding the tool — it’s there to set accurate expectations for visitors, not just as legal boilerplate.