Poketto

Submit form responses with Next.js

Learn how to send easily submit form responses from your apps, or server-side applications.

Prerequisites

To get the most out of this guide, you’ll need to:

Create an API key
Create a form

Install

bash

npm install poketto-sdk

Submit with Next.js

typescript

import React, { useState } from 'react';
import { PokettoClient } from 'poketto-sdk';

const client = new PokettoClient({ apiKey: 'your-api-key' });

function FeedbackForm() {
	const [feedback, setFeedback] = useState('');
	const [loading, setLoading] = useState(false);

	const handleSubmit = async (e: React.FormEvent) => {
		e.preventDefault();
		setLoading(true);

		try {
			await client.submitResponseWithBrowserInfo('feedback-form-id', [
				{
					field_id: 'feedback',
					value: feedback
				}
			],
			{
				// Optional respondent data
				name: 'John Doe',
				email: 'john.doe@example.com',
			}
			);
			alert('Thank you for your feedback!');
			setFeedback('');
		} catch (error) {
			alert('Failed to submit feedback. Please try again.');
		} finally {
			setLoading(false);
		}
	};

	return (
		<form onSubmit={handleSubmit}>
			<textarea
				value={feedback}
				onChange={(e) => setFeedback(e.target.value)}
				placeholder="Your feedback..."
				required
			/>
			<button type="submit" disabled={loading}>
				{loading ? 'Submitting...' : 'Submit Feedback'}
			</button>
		</form>
	);
}