In SSR mode, Astro pages can both display and handle forms. In this recipe, you’ll use a standard HTML form to submit data to the server. Your frontmatter script will handle the data on the server, sending no JavaScript to the client.
output: 'server'
) enabledCreate or identify a .astro
page which will contain your form and your handling code. For example, you could add a registration page:
Add a <form>
tag with some inputs to the page. Each input should have a name
attribute that describes the value of that input.
Be sure to include a <button>
or <input type="submit">
element to submit the form.
Use validation attributes to provide basic client-side validation that works even if JavaScript is disabled.
In this example,
required
prevents form submission until the field is filled.minlength
sets a minimum required length for the input text.type="email"
also introduces validation that will only accept a valid email format.The form submission will cause the browser to request the page again. Change the form’s data transfer method
to POST
to send the form data as part of the Request
body, rather than as URL parameters.
Check for the POST
method in the frontmatter and access the form data using Astro.request.formData()
. Wrap this in a try ... catch
block to handle cases when the POST
request wasn’t sent by a form and the formData
is invalid.
Validate the form data on the server. This should include the same validation done on the client to prevent malicious submissions to your endpoint and to support the rare legacy browser that doesn’t have form validation.
It can also include validation that can’t be done on the client. For example, this example checks if the email is already in the database.
Error messages can be sent back to the client by storing them in an errors
object and accessing it in the template.
Learn how to share state across framework components with Nano Stores.
Add an RSS feed to your Astro site to let users subscribe to your content.
Learn how you can import YAML data by adding a Rollup plugin to your project.
Learn how to use JavaScript to send form submissions to an API Route
Learn how to build HTML forms and handle submissions in your frontmatter
Learn how to use Bun with your Astro site.
Learn how to call endpoints from the server in Astro.
Learn how to create an API route and fetch it from the client.
Learn how to build your Astro site using Docker.
Learn how to install a rehype plugin to add icons to external links in your Markdown files
Use dynamic routing and content collections to add internationalization support to your Astro site.
Build a remark plugin to add reading time to your Markdown or MDX files.
Learn how to share state across Astro components with Nano Stores.
© 2021 Fred K. Schott
Licensed under the MIT License.
https://docs.astro.build/en/recipes/build-forms/