← Back to showcase
Workflow Automation Validated

Complete a Multi-Page Form on Mondula

Fill a real multi-step form with text fields, date inputs, radios, checkboxes, dropdowns, and final contact details.

12 steps mondula.com demo_mondula_form.py 0 warnings

Watch The Demo

Open raw asset

This page pairs the final video with publishable screenshots and the exact rerun recipe.

Prompt

Go to mondula.com/msf-demo, complete each page, fill at least 6 input fields, and reach the submit-ready final step.

Reproduce It

python run_all.py --demo mondula_form --record
python run_all.py --demo mondula_form --narrate
python run_all.py --demo mondula_form --process
python run_all.py --demo mondula_form --record --narrate --process
python run_all.py --page-only

Toolchain

Playwright browser automation StepLogger captions and screenshots Gemini TTS with gTTS fallback FFmpeg compression and caption burn

Artifacts

  • output/mondula_form_final.webm
  • output/mondula_form_transcript.md
  • output/mondula_form_narration.txt
  • output/mondula_form_narration_timeline.json
  • screenshots/mondula_form_steps.json
  • output/mondula_form_manifest.json
  • tutorials/mondula_form.html

Storyboard Slideshow

Slide through each screenshot one step at a time, with the image on top and the step content below.

Storyboard Slideshow: one step per slide with the screenshot on top and the step content below.
Slide 1 of 12
Step 5: Fill text, custom textarea, and date fields on page two
Step 5
Step 5: Fill text, custom textarea, and date fields on page two

Fill text, custom textarea, and date fields on page two

https://mondula.com/msf-demo/
Step 7: Select a radio option, multiple checkboxes, and a dropdown value
Step 7
Step 7: Select a radio option, multiple checkboxes, and a dropdown value

Select a radio option, multiple checkboxes, and a dropdown value

https://mondula.com/msf-demo/
Step 9: Fill conditional fields based on the selected dish
Step 9
Step 9: Fill conditional fields based on the selected dish

Fill conditional fields based on the selected dish

https://mondula.com/msf-demo/
Step 11: Fill final contact page with six required input fields
Step 11
Step 11: Fill final contact page with six required input fields

Fill final contact page with six required input fields

https://mondula.com/msf-demo/
Step 12: Review summary and reach submit-ready final state
Step 12
Step 12: Review summary and reach submit-ready final state

Review summary and reach submit-ready final state

https://mondula.com/msf-demo/

Final Narration

The exact narration used in the finished audio.

Step 1

Step 1: Open the Mondula multi-step form demo page

Step 2

Step 2: Move from the intro page to the first form step

Step 3

Step 3: Fill first page text and textarea fields

Step 4

Step 4: Go to the next page with additional input fields

Step 5

Step 5: Fill text, custom textarea, and date fields on page two

Step 6

Step 6: Proceed to radio, checkbox, and dropdown inputs

Step 7

Step 7: Select a radio option, multiple checkboxes, and a dropdown value

Step 8

Step 8: Open the conditional input section

Step 9

Step 9: Fill conditional fields based on the selected dish

Step 10

Step 10: Move to the final contact-details page

Step 11

Step 11: Fill final contact page with six required input fields

Step 12

Step 12: Review summary and reach submit-ready final state

Validation checks compare steps JSON, transcript counts, narration beats, screenshot counts, and the final video artifact so mismatches are visible during the build instead of surfacing in feedback later.