Problem Overview
I’m developing a simple project where I’d like the data from a form to be sent to Notion. However, when the form is submitted, I encounter a 405 Method Not Allowed error. The intention is to store the user’s inputs in my Notion database, but it isn’t working.
Code for Frontend Component
import { useState } from 'react';
import FormDisplay from '../components/FormDisplay';
import formStyles from '../styles/FormPage.module.css';
const FormPage = () => {
const [fullName, setFullName] = useState('');
const [emailAddress, setEmailAddress] = useState('');
const [formSubject, setFormSubject] = useState('');
const [userMessage, setUserMessage] = useState('');
const handleFormSubmit = async (event) => {
event.preventDefault();
const response = await fetch(`http://localhost:3000/form`, {
method: 'POST',
body: JSON.stringify({
fullName: fullName,
emailAddress: emailAddress,
formSubject: formSubject,
userMessage: userMessage
}),
});
if (response.ok) {
alert('Your submission has been recorded!');
setFullName('');
setEmailAddress('');
setFormSubject('');
setUserMessage('');
} else {
alert('There was an issue. Please try again later.');
}
};
return (
<div className={formStyles.container}>
<div>
<h3 className={formStyles.title}>Get in Touch</h3>
<FormDisplay />
</div>
<div>
<h3 className={formStyles.title}>Complete the Form</h3>
<form className={formStyles.form} onSubmit={handleFormSubmit}>
<div className={formStyles.row}>
<div>
<label htmlFor="fullName">Full Name</label>
<input
type="text"
name="fullName"
id="fullName"
value={fullName}
onChange={(e) => setFullName(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="emailAddress">Email</label>
<input
type="email"
name="emailAddress"
id="emailAddress"
value={emailAddress}
onChange={(e) => setEmailAddress(e.target.value)}
required
/>
</div>
</div>
<div>
<label htmlFor="formSubject">Subject</label>
<input
type="text"
name="formSubject"
id="formSubject"
value={formSubject}
onChange={(e) => setFormSubject(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="userMessage">Message</label>
<textarea
name="userMessage"
id="userMessage"
rows="5"
value={userMessage}
onChange={(e) => setUserMessage(e.target.value)}
required
></textarea>
</div>
<button type="submit">Send</button>
</form>
</div>
</div>
);
};
export async function getStaticProps() {
return {
props: { title: 'Contact Us' },
};
}
export default FormPage;
Code for API Endpoint
const { Client } = require('@notionhq/client');
const notionClient = new Client({
auth: 'your_secret_key_here',
});
export default async (req, res) => {
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Only POST requests are allowed' });
}
try {
const { fullName, emailAddress, formSubject, userMessage } = JSON.parse(req.body);
await notionClient.pages.create({
parent: {
database_id: 'your_notion_database_id_here',
},
properties: {
FullName: {
title: [
{
text: {
content: fullName,
},
},
],
},
EmailAddress: {
email: emailAddress,
},
Subject: {
rich_text: [
{
text: {
content: formSubject,
},
},
],
},
Message: {
rich_text: [
{
text: {
content: userMessage,
},
},
],
},
},
});
res.status(201).json({ message: 'Submission successful' });
} catch (error) {
console.error(error);
res.status(500).json({ error: 'Submission failed' });
}
};
What could be the reason behind the 405 error? The API endpoint appears to be set up correctly.