Automating Form Submissions

Overview

Automate form submissions to handle repetitive tasks like logins, registrations, and checkouts with greater speed and accuracy. Browserbase lets you interact with forms across websites while maintaining proper authentication.

Common Use Cases

Login automation
Registration forms
Data Entry
Survey and application submissions
Order placement and checkout processes

Implementation

Create a session

Create a Browserbase session and authenticate if needed. Use browser contexts to persist authentication across pages.

Navigate to the form

Go to the target page and wait for form elements to fully load before interacting with them.

Fill form fields

Identify and populate form elements (text inputs, dropdowns, radio buttons, checkboxes) with your data.

Submit and verify

Trigger the submit button and check for success messages or validation errors.

Google Form Submission

To demonstrate how to automate form submissions using Browserbase, you can use a sample Google Form designed specifically for this tutorial: Google Form

This form collects responses in various formats:

Text input
Radio button
Checkboxes

Follow Along: Form Fill Example

Step-by-step code for automating form completion workflows

Code Example

import { Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";
import dotenv from "dotenv";

dotenv.config();

async function main() {
	const stagehand = new Stagehand({
		env: "BROWSERBASE",
        verbose: 0,
	});

	await stagehand.init();
	const page = stagehand.page;

	async function fillForm(inputs: any) {
		// Navigate to the form
		await page.goto("https://forms.gle/f4yNQqZKBFCbCr6j7");

		// You can use the observe method to find the selector with an act command to fill it in
		const superpowerSelector = await page.observe({
            instruction: `Find the superpower field: ${inputs.superpower}`,
            returnAction: true
        });
		console.log(superpowerSelector);
		await page.act(superpowerSelector[0]);

		// You can also explicitly specify the action to take
		await page.act({action: "Select the features used: " + inputs.features_used.join(", ")});
		await page.act({action: "Fill in the coolest_build field with the following value: " + inputs.coolest_build});

		await page.act({action: "Click the submit button"});
		await page.waitForTimeout(5000);

		// Extract to log the status of the form
		const status = await page.extract({instruction: "Extract the status of the form", schema: z.object({status: z.string()})});
		console.log(status);

		await stagehand.close();
	}

	const inputs = {
		"superpower": "Invisibility",
		"features_used": [
			"Stealth Mode",
			"Proxies",
			"Session Replay"
		],
		"coolest_build": "A bot that automates form submissions across multiple sites.",
	}
	
	await fillForm(inputs);
}

main().catch(console.error);

import { Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";
import dotenv from "dotenv";

dotenv.config();

async function main() {
	const stagehand = new Stagehand({
		env: "BROWSERBASE",
        verbose: 0,
	});

	await stagehand.init();
	const page = stagehand.page;

	async function fillForm(inputs: any) {
		// Navigate to the form
		await page.goto("https://forms.gle/f4yNQqZKBFCbCr6j7");

		// You can use the observe method to find the selector with an act command to fill it in
		const superpowerSelector = await page.observe({
            instruction: `Find the superpower field: ${inputs.superpower}`,
            returnAction: true
        });
		console.log(superpowerSelector);
		await page.act(superpowerSelector[0]);

		// You can also explicitly specify the action to take
		await page.act({action: "Select the features used: " + inputs.features_used.join(", ")});
		await page.act({action: "Fill in the coolest_build field with the following value: " + inputs.coolest_build});

		await page.act({action: "Click the submit button"});
		await page.waitForTimeout(5000);

		// Extract to log the status of the form
		const status = await page.extract({instruction: "Extract the status of the form", schema: z.object({status: z.string()})});
		console.log(status);

		await stagehand.close();
	}

	const inputs = {
		"superpower": "Invisibility",
		"features_used": [
			"Stealth Mode",
			"Proxies",
			"Session Replay"
		],
		"coolest_build": "A bot that automates form submissions across multiple sites.",
	}
	
	await fillForm(inputs);
}

main().catch(console.error);

Playwright

import os
from playwright.sync_api import sync_playwright
from browserbase import Browserbase
from dotenv import load_dotenv

load_dotenv()

def create_session():
    """Creates a Browserbase session."""
    bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])
    session = bb.sessions.create(
        project_id=os.environ["BROWSERBASE_PROJECT_ID"],
        # Add configuration options here if needed
    )
    return session

def fill_form(inputs):
    """Automates form filling using Playwright with Browserbase."""
    session = create_session()
    print(f"View session replay at https://browserbase.com/sessions/{session.id}")

    with sync_playwright() as p:
        browser = p.chromium.connect_over_cdp(session.connect_url)

        # Get the default browser context and page
        context = browser.contexts[0]
        page = context.pages[0]

        print(f"View session replay at https://browserbase.com/sessions/{session.id}")

        # Navigate to the form page
        page.goto("https://forms.gle/f4yNQqZKBFCbCr6j7")

        # Select superpower
        page.locator(f'[role="radio"][data-value="{inputs["superpower"]}"]').click()
        page.wait_for_timeout(1000)

        # Select features used
        for feature in inputs["features_used"]:
            page.locator(f'[role="checkbox"][aria-label="{feature}"]').click()
        page.wait_for_timeout(1000)

        # Fill in coolest build
        page.locator('input[jsname="YPqjbf"]').fill(inputs["coolest_build"])
        page.wait_for_timeout(1000)

        # Click submit button
        page.locator('div[role="button"]:has-text("Submit")').click()

        # Wait 10 seconds
        page.wait_for_timeout(10000)

        print("Shutting down...")
        page.close()
        browser.close()

if __name__ == "__main__":
    inputs = {
        "superpower": "Invisibility",
        "features_used": [
            "Stealth Mode",
            "Proxies",
            "Session Replay"
        ],
        "coolest_build": "A bot that automates form submissions across multiple sites.",
    }
    fill_form(inputs)

This example form is for testing purposes - feel free to submit responses multiple times while experimenting.

Best Practices

Add wait time between interactions

Adding adequate waits between form interactions ensures the form has time to load and the elements are ready for interaction. This is especially important for forms that have a lot of content or require additional resources to load.

await page.waitForTimeout(1000);

Implement Error Handling

Implement error handling for missing elements or validation failures

try {
    await page.waitForTimeout(1000);
} catch (error) {
    console.error("Error waiting for timeout:", error);
}

try {
    await page.waitForTimeout(1000);
} catch (error) {
    console.error("Error waiting for timeout:", error);
}

try:
    await page.wait_for_timeout(1000)
except Exception as e:
    print(f"Error waiting for timeout: {e}")

Verify Submissions

Verify submissions with confirmation messages or URL changes

await page.waitForSelector("text=Your response has been recorded.")

Next Steps

Now that you understand how to automate form submissions using Browserbase, you can try it out for yourself.

Session Live View

Learn how to watch test sessions in real time

Uploads

Learn how to upload files with Browserbase

Overview

SDKs

APIs

Overview

Implementation

Google Form Submission

Follow Along: Form Fill Example

Code Example

Best Practices

Add wait time between interactions

Implement Error Handling

Verify Submissions

Next Steps

Session Live View

Uploads

Overview

SDKs

APIs

​Overview

​Implementation

​Google Form Submission

Follow Along: Form Fill Example

​Code Example

​Best Practices

​Add wait time between interactions

​Implement Error Handling

​Verify Submissions

​Next Steps

Session Live View

Uploads

Overview

Implementation

Google Form Submission

Code Example

Best Practices

Add wait time between interactions

Implement Error Handling

Verify Submissions

Next Steps