Recipe Widget

Create Detailed Recipe Cards for Your Website

Build recipe cards with ingredient lists, step-by-step directions, timing, nutrition, images, ratings, print and share controls, and responsive styling.

Create Your Recipe Widget - It's Free!

How to embed Recipe Widget to WordPress

1Get your embed code

After customizing your Jotform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jotform Website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

Learn more

Add Structured Recipe Content

Enter title, description, author, cuisine, course, image, video, servings, timing, calories, ratings, diet badges, keywords, notes, ingredients, and directions.

Content fields include:

IngredientsDirectionsTimingNutritionVideo

Add Recipe Content

Make Recipes Easier to Follow

Visitors can check off ingredients, copy a shopping list, scale servings, switch unit systems, expand steps, and use cook mode while following the recipe.

Visitor controls include:

Serving stepperUS/metric toggleCook modePrintShare

Set Cooking Controls

Match Your Site Design

Switch between light and dark card styles, adjust surface and accent colors, set width, radius, alignment, branding visibility, and scoped CSS.

Style controls include:

Light themeDark themeAccent colorsCard widthScoped CSS

Customize Style

Include Recipe Schema Markup

Enable structured Recipe JSON-LD output for embedded widgets so ingredient, instruction, image, time, nutrition, keyword, and rating fields stay machine-readable.

Schema fields include:

IngredientsInstructionsNutritionRatingsKeywords

Enable Schema