Installation
Installing the Addon
You can install Statamic Easy Forms using Composer:
composer require reachweb/statamic-easy-formsAfter installation, you should run the install command to complete the installation:
php artisan easy-forms:installWe suggest you publish everything as recommended by the install script.
Load the Required JavaScript
Easy Forms needs Alpine.js, its focus plugin, and its own JavaScript file. If you don't already load it, in your layout file, you can add the Alpine.js script inside the <head> of your page and the required JavaScript right before the </body> tag:
<!-- resources/views/layout.antlers.html -->
<!doctype html>
<html lang="{{ site:short_locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title ?? site:name }}</title>
{{ vite src="resources/js/site.js|resources/css/site.css" }}
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 font-sans leading-normal text-gray-800">
<div class="mx-auto px-2 lg:min-h-screen flex flex-col items-center justify-center">
{{ template_content }}
</div>
<script src="/vendor/statamic-easy-forms/js/easy-forms.js"></script>
</body>
</html>You can also bundle Alpine.js using Vite using the default Statamic setup. You can find more information on their website. Note that if you are using Laravel Livewire on your site Alpine.js is already loaded with all the required plugins.
You can version your Javascript file
If you want to version your Javascript file, you can add the ?v={{ easyform:version }} parameter at the end of the easy-forms.js file. This tag will add a hash that changes each time Easy Forms is updated via composer.
Styling with TailwindCSS
Easy Forms is built using Tailwind CSS v4 and includes pre-styled components that work out of the box.
You should install the Tailwind Forms plugin for better form resets:
npm install @tailwindcss/formsThen in your site.css include the theme file and the forms plugin:
/* resources/css/site.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms" {
strategy: class
}
@source "../views";
@source "../../content";
@import "./easy-forms-theme.css";It's also recommended to add the styling for Alpine's x-cloak feature to work correctly:
[x-cloak] { display: none !important; }Vite should then pick up the form templates from the vendor folder and compile everything.
If you want to adjust the templates, first edit the easy-forms-theme.css file, which allows you to change the basic display settings and affect every field type.
For bigger styling changes you can edit the templates directly.
easy-forms-theme.css missing?
In case you get an error message for Vite looking for easy-forms-theme.css make sure you've run the install command which publishes the file in your /resources/css folder.
Support Conditional Fields
The addon also supports conditional fields. You can find more information on Statamic's documentation. If you plan to use conditional fields, you also need to add Statamic's helper JavaScript file to your layout file:
<script src="/vendor/statamic/frontend/js/helpers.js"></script>Add the Assets to Your Project (If Not Using Tailwind CSS)
Post-installation, an easy-forms.css file will be available at public/vendor/easy-forms/css. It's not recommended, but if you're not using Tailwind CSS, you can add the styles in your layout file:
<link rel="stylesheet" href="/vendor/statamic-easy-forms/css/easy-forms.css">This might mess up your site's styling
As you might know, Tailwind CSS ships with some global CSS resets and styling. Adding our CSS file to your project might cause other things to break. This is provided mainly as a way to test things before you commit to using Easy Forms. You should always use the directions in the section above to compile your CSS.
License Activation
Easy Forms requires a license for production use. Purchase a license from the Statamic Marketplace.
For local development, you can test the addon without a license.
Next Steps
Now that you have Easy Forms installed, check out the Quick Start Guide to create your first form.
