Turning Form Submissions into Dynamic Landing Pages in HubSpot

Why Turn Form Submissions into Landing Pages?

Many companies receive form submissions that contain valuable content rather than just lead generation data. Instead of letting these submissions sit in a database, why not turn them into dynamic landing pages? Here are two powerful use cases:

1. Event Speaker Submissions – If you run an events company, you likely receive speaker applications with headshots, session titles, and descriptions. By automatically creating a landing page for each submission, you can easily market upcoming speakers, gather social proof, and drive event registrations.

   Workflow: A form submission triggers a landing page creation in "draft" mode, and a Slack notification is sent to the event organizer for review before publishing.

2. Community-Generated Content – Imagine allowing customers to submit insights, best practices, or case studies via a form. These pages could be gated, requiring customer authentication, and auto-enriched with company details like revenue, industry, and tenure using HubSpot’s Breeze Intelligence tool.

Now, let's dive into how to set this up in HubSpot CMS using Workflows, API calls, and HubL.

Step 1: Create Your HubSpot Form

Event Speaker Submission Form (Example Fields)

• First Name & Last Name (Text)
• Email (Email)
• Company Name (Text)
• Headshot (File Upload)
• Session Title (Text)
• Session Description (Textarea)

🎯 Pro Tip: Enable file uploads so speakers can submit their headshots directly.

Community Content Submission Form (Example Fields)

• Customer Name
• Email (used for authentication)
• Company Name
• Content Title
• Content Description
• Logo Upload

Once the form is created, go to Forms > Your Form and copy the Form ID (you’ll need it for automation).

Step 2: Create a Dynamic Landing Page Template in HubSpot CMS

This template will be used to generate pages dynamically.

1. Create a New Landing Page Template in HubSpot

Navigate to Marketing > Files and Templates > Design Manager, then:

1. Click Create a new file > Choose "HTML & HubL".
2. Use this HubL template to dynamically populate page content:

<h1></h1>
<p><strong>Speaker: </strong></p>
<img src="" alt="" style="width: 200px;" />
<p></p>

🎯 Pro Tip: Use query parameters or HubDB for storing and retrieving submission data dynamically.

Step 3: Automate Landing Page Creation via HubSpot Workflow

1. Set Up a Workflow in HubSpot

1. Go to Automation > Workflows and create a New Workflow.
2. Choose Start from Scratch.
3. Set the Enrollment Trigger to "Form Submission" (select your event/community form).

2. Add a Custom Code Action to Create the Landing Page

1. Click + to add an action.
2. Choose "Custom Code" (requires Operations Hub Pro/Enterprise).
3. Use this Node.js code to create the landing page:

const axios = require('axios');

exports.main = async (event, callback) => {
    const formSubmission = event.inputFields;
    const name = formSubmission.first_name + ' ' + formSubmission.last_name;
    const title = formSubmission.session_title;
    const description = formSubmission.session_description;
    const headshotUrl = formSubmission.headshot;

    const newPage = {
        name: `Speaker: ${name}`,
        slug: `speakers/${name.replace(/ /g, '-').toLowerCase()}`,
        content: {
            html: `<h1>${title}</h1><p><strong>Speaker: </strong>${name}</p><img src="${headshotUrl}" style="width: 200px;" /><p>${description}</p>`
        },
        published: false
    };

    try {
        const response = await axios.post('https://api.hubapi.com/cms/v3/pages/landing-pages', newPage, {
            headers: {
                Authorization: `Bearer YOUR_PRIVATE_APP_ACCESS_TOKEN`,
                'Content-Type': 'application/json'
            }
        });

        callback({ outputFields: { pageUrl: response.data.url } });
    } catch (error) {
        console.error("Error creating page", error);
    }
};

3. Add an Approval Notification via Slack

1. Add a new action: Send Slack Message.
2. Customize the message to include the page preview URL and options for approval or edits.

🚀 A new event speaker page has been created in draft mode.

👤 **Speaker:**  
📝 **Session:** 
🔗 **Preview:** 

✅ Approve | ✏️ Edit | ❌ Reject

Step 4: Restrict Access to Community Content Pages

For community-generated content, pages should be accessible only to customers.

1. Add Authentication to the Landing Page

Modify your HubL template:

    <p>Please log in with your company email to access this content.</p>

2. Auto-Enrich Customer Data with HubSpot Breeze Intelligence

Use Breeze to fetch company size, industry, and revenue:

<p><strong>Industry:</strong> </p>
<p><strong>Revenue:</strong> </p>
<p><strong>Customer Since:</strong> </p>

Conclusion: Transform Your Form Submissions into High-Value Content

By following these steps, you: ✅ Automate content creation from form submissions. ✅ Streamline event and community engagement. ✅ Enforce approval workflows before publishing. ✅ Enrich content with HubSpot intelligence. ✅ Restrict access for authenticated users.

What's incredible is that if you do this and have Air Traffic Control, you can create personalized event programs for every single attendee across your website and emails. You can even create custom LinkedIn audiences by session to drive registrations and deliver session recommendations in your event app if it's connected to your HubSpot account. This is a HUGE unlock for event teams.