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!
Create Detailed Recipe Cards for Your Website Hero Bg Image

How to embed Recipe Widget to WordPress

1Get your embed code

After customizing your Jform 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 Jform Website widget embed code into the HTML field.

4Update and view

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

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:

IngredientsDirectionsTimingNutrition동영상
Add Recipe Content
Add Structured 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 mode출력공유
Set Cooking Controls
Make Recipes Easier to Follow

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
Match Your Site Design

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:

Ingredients설명NutritionRatings키워드들
Enable Schema
Include Recipe Schema Markup