What You'll Build

A simple contact form that generates a downloadable PDF confirmation. When users submit the form, they'll see a "Download Confirmation" button that creates a professional PDF document with all their submission details.

Real-world use case: A customer fills out a support request. After submitting, they can download a PDF receipt showing exactly what they submitted and when - perfect for their records.

What You'll Learn

How to enable PDF generation with configurePdf()
Setting a custom filename for the downloaded PDF
Adding a header with title and subtitle
Creating sections to organize PDF content
Displaying form data in the PDF using addField() and addText()
Showing the download button with allowUserDownload

⚡

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: Enable PDF Generation

Let's add PDF generation to our contact form. The magic happens with form.configurePdf(). This tells the system "I want to create a PDF document from this form."

💡 Tip:

The first parameter 'confirmation' is a unique ID for this PDF. You can have multiple PDFs per form (we'll cover that in a later tutorial). The second parameter is a builder function where you'll configure everything.

💡 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., "confirmation") to see your generated document.

Step 2: Set the Filename

When users download the PDF, what should the file be called? Use filename to set a meaningful name.

💡 Tip:

Choose descriptive filenames that help users find the document later. Include words like "confirmation", "receipt", or "summary" to make it clear what the document contains.

Step 3: Add a Header

Every professional document needs a header. Add a title and optional subtitle that appear at the top of your PDF.

💡 Tip:

Use the title for the document name and the subtitle for additional context like dates or reference numbers.

Step 4: Display Form Data in the PDF

Now the important part - showing the actual form data! Use addSection() to create a titled section, then add rows with addField() to display label-value pairs.

💡 Tip:

Use form.textbox('name')?.value() to get the current value of a field. The ?. handles cases where the field might not exist, and ?? '' provides a fallback empty string.

Step 5: Add Download Button and Footer

Time to put it all together! Add allowUserDownload: true to show the download button, customize its label, and add a footer message.

💡 Tip:

Fill out the form, submit it, and you'll see a "Download Confirmation" button appear. Click it to generate and download your PDF!

Try It Yourself

Challenge 1: Change the header title and subtitle to something different
Challenge 2: Add a date field to the form and display it in the PDF
Challenge 3: Add a second section called "Submission Info" that shows the current date

What's Next

You've created your first PDF! In the next tutorial, you'll learn how to make it look more professional with advanced styling, headers, footers, and page layouts.

Continue to Professional Styling

Key concepts learned:

configurePdf(id, builder) - Enable PDF generation
pdf.configure(...) - Set filename, header, footer
pdf.addSection(title, builder) - Create titled sections
section.addRow() and row.addField() - Display data
allowUserDownload: true - Show download button