What You'll Build

An event registration form that generates a professional-looking ticket/confirmation PDF. The document will have an elegant header, footer with page numbers, two-column layouts, and visual separators.

Real-world use case: A conference attendee registers online and receives a beautifully formatted PDF ticket they can print or show on their phone at the check-in desk.

What You'll Learn

Creating professional headers with title and subtitle
Creating multi-page documents with addPageBreak()
Adding footers with custom text and page numbers
Building two-column layouts with addRow() and multiple addField() calls
Using addDivider() for horizontal lines
Adding vertical spacing with addSpacer()
Setting page size (pageSize: 'A4' | 'Letter')
Customizing the download button label

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippets, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Professional Header

Every professional document starts with a strong header. Add a title for the event name and a subtitle to clarify what this document is.

💡 Tip:

Use the title for your brand or event name, and subtitle for context like "Registration Confirmation" or "Invoice #12345".

💡 Tip:

To preview the PDF, use the dropdown button in the top-right corner of the Preview panel. Click it and select the PDF name (e.g., "ticket") to see your generated document.

Step 2: Creating Multiple Pages

For longer documents, you can split content across multiple pages. Use addPageBreak() to start a new page.

💡 Tip:

Call pdf.addPageBreak() between sections to force content onto a new page. This is useful for separating different types of information - like attendee details on page 1 and ticket details on page 2.

💡 Tip:

The header appears at the top of every page automatically. This keeps your branding consistent throughout the document.

Step 3: Footer with Page Numbers

Now that we have multiple pages, let's add a footer with automatic page numbering.

💡 Tip:

Set showPageNumbers: true to automatically add "Page 1 of 2" style numbering. The footer text is great for contact info, disclaimers, or reference numbers.

Step 4: Two-Column Layout

Make your PDF more compact and professional by placing two fields side by side. Simply call addField() twice within the same addRow().

💡 Tip:

When you add multiple fields to a single addRow(), they appear side by side in columns. Use dropdown.value() to get the selected value.

Step 5: Visual Separation

Add visual polish with dividers and spacers. addDivider() creates a horizontal line, and addSpacer() adds vertical space.

💡 Tip:

Use addSpacer(10) to add 10 pixels of vertical space. You can also call addSpacer() without a parameter for default spacing. Combine dividers and spacers to create clear visual sections.

Step 6: Final Polish

Add the finishing touches: set the page size to A4 and customize the download button text to match your use case.

💡 Tip:

Use pageSize: 'A4' for international standard or 'Letter' for US standard. The downloadButtonLabel should tell users exactly what they're getting - "Download Your Ticket" is clearer than just "Download PDF".

Try It Yourself

Challenge 1: Add a "Registration ID" field that shows a unique number in the PDF
Challenge 2: Create a three-column row with First Name, Last Name, and Email
Challenge 3: Add an "Important Information" section with multiple text lines using addText()

What's Next

Your PDFs now look professional! In the next tutorial, you'll learn how to add tables and summaries - perfect for order confirmations and invoices.

Continue to Tables & Summaries

Key concepts learned:

header with title and subtitle - Professional document headers
addPageBreak() - Creating multi-page documents
footer with text and showPageNumbers - Footers with page numbers
Multiple addField() in one addRow() - Column layouts
addDivider() and addSpacer(height) - Visual separation
pageSize and downloadButtonLabel - Configuration options