Automating Form Submissions

Enhancing Efficiency and Accuracy

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

1. Create a session

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

2. Navigate to the form

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

3. Fill form fields

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

4. 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

Node.js

Stagehand

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);

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.

Node.js

await page.waitForTimeout(1000);

Implement Error Handling

Implement error handling for missing elements or validation failures

Node.js

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

Verify Submissions

Verify submissions with confirmation messages or URL changes

Node.js

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