aerni/statamic-livewire-forms

A Statamic forms framework powered by Laravel Livewire

Livewire Forms

This addon provides a powerful framework to use Statamic forms with Laravel Livewire. No more submitting your form with AJAX or dealing with funky client-side validation libraries. Livewire Forms is a powerhouse that will make your life soooo much easier!

Features

• Use your Statamic form blueprints as a form builder
• Real-time validation with fine-grained control over each field
• No need for a client-side form validation library
• One source of truth for your validation rules
• Spam protection with Google reCAPTCHA v2 and honeypot field
• Support for display conditions set in your form blueprint
• Multi-site support; translate your form labels, instructions, placeholders, etc.
• Configured and styled form views

Installation

Install the addon using Composer:

composer require aerni/livewire-forms

Publish the config of the package (optional):

php please vendor:publish --tag=livewire-forms-config

The following config will be published to config/livewire-forms.php:

return [

    /*
    |--------------------------------------------------------------------------
    | Default View
    |--------------------------------------------------------------------------
    |
    | This view will be used if you don't specify one on the component.
    |
    */

    'view' => 'default',

    /*
    |--------------------------------------------------------------------------
    | Default Theme
    |--------------------------------------------------------------------------
    |
    | This theme will be used if you don't specify one on the component.
    |
    */

    'theme' => 'default',

    /*
    |--------------------------------------------------------------------------
    | Field Models
    |--------------------------------------------------------------------------
    |
    | You may change the model of each fieldtype with your own implementation.
    |
    */

    'models' => [
        \Aerni\LivewireForms\Fieldtypes\Captcha::class => \Aerni\LivewireForms\Fields\Captcha::class,
        \Statamic\Fieldtypes\Assets\Assets::class => \Aerni\LivewireForms\Fields\Assets::class,
        \Statamic\Fieldtypes\Checkboxes::class => \Aerni\LivewireForms\Fields\Checkbox::class,
        \Statamic\Fieldtypes\Integer::class => \Aerni\LivewireForms\Fields\Integer::class,
        \Statamic\Fieldtypes\Radio::class => \Aerni\LivewireForms\Fields\Radio::class,
        \Statamic\Fieldtypes\Select::class => \Aerni\LivewireForms\Fields\Select::class,
        \Statamic\Fieldtypes\Spacer::class => \Aerni\LivewireForms\Fields\Spacer::class,
        \Statamic\Fieldtypes\Text::class => \Aerni\LivewireForms\Fields\Text::class,
        \Statamic\Fieldtypes\Textarea::class => \Aerni\LivewireForms\Fields\Textarea::class,
        \Statamic\Fieldtypes\Toggle::class => \Aerni\LivewireForms\Fields\Toggle::class,
    ],

    /*
    |--------------------------------------------------------------------------
    | Captcha Configuration
    |--------------------------------------------------------------------------
    |
    | Add the credentials for your captcha.
    | This addon currently supports Google reCAPTCHA v2 (checkbox).
    |
    */

    'captcha' => [
        'key' => env('CAPTCHA_KEY'),
        'secret' => env('CAPTCHA_SECRET')
    ],

];

Commands

There are a number of helpful commands to help you create views, themes and components:

Command	Description
livewire-forms:setup	Step by step wizard to get you started
livewire-forms:view {name?}	Create a new Livewire form view
livewire-forms:theme {name?}	Create a new Livewire form theme
livewire-forms:component {name?}	Create a new Livewire form component

Getting started

Prerequisite

This addon provides configured and styled form views for all Statamic form fieldtypes. The components are styled with Tailwind CSS and make use of the @tailwindcss/forms plugin. If you want to use the default styling, you'll need a working Tailwind setup.

Run the setup command

Go ahead and run the following command in your console. It will guide you through creating your first view and theme. Optionally, you may also create a component to customize the form's behavior.

php please livewire-forms:setup

Render the form

Add the Livewire form component to your template and provide the handle of the Statamic form.

<!-- Antlers -->
{{ livewire:form handle="contact" }}

<!-- Blade -->
<livewire:form handle="contact">

You can also dynamically render a form that was selected via Statamic's Form fieldtype:

<!-- Antlers -->
{{ livewire:form :handle="field:handle" }}

<!-- Blade -->
<livewire:form :handle="field:handle">

Use the view and theme parameter if you want to use a view or theme that is different to the one defined in config/livewire-forms.php.

<!-- Antlers -->
{{ livewire:form :handle="field:handle" view="contact" theme="regular" }}

<!-- Blade -->
<livewire:form :handle="field:handle" view="contact" theme="regular">

Available Properties

Property	Description
handle	The handle of the form you want to use (required)
view	The component view you want to use
theme	The theme you want to use

Views

Use the following command to create a new view:

php please livewire-forms:view

This is the default view. You may customize it to your liking.

<form wire:submit.prevent="submit" class="w-full max-w-2xl">
    <div class="flex flex-col gap-y-16">
        @formSections
        @formHoneypot
        @formSubmit
        @formErrors
        @formSuccess
    </div>
</form>

Blade Directives

There are a couple of blade directives you may use in your form views. Each directive renders a view inside the current theme.

Directive	Description	View
@formSections	Loop through and render all form fields by section	sections.blade.php
@formSection('handle')	Render a specific from section	section.blade.php
@formField('handle')	Render a specific form field	field.blade.php
@formHoneypot	Render the form honeypot field	honeypot.blade.php
@formSubmit	Render the form submit button	submit.blade.php
@formErrors	Render the form validation errors	errors.blade.php
@formSuccess	Render the form success message	success.blade.php

Customization Example

Sometimes you need more control over the markup of your form. If you decide to go completely custom, you can render single fields using the @formField directive. You may also add or override field properties using an array as the second argument.

@formField('name', [
    'view' => 'nameInput',
    'tooltip' => 'Please enter your full name'
])

Use the properties in the field's view like this:

{{ $field->view }}
{{ $field->tooltip }}

Note: The view property will look for the view in the theme's fields directory: {theme}/fields/{view}.blade.php.

Note: There are a few properties such as options, default and conditions that won't work correctly when assigned in the view. This is due to the hydration lifecycle of Livewire. If you want to change those properties, you should create a custom component instead.

Themes

Themes allow you to customize the style and logic of your form fields. You may have any number of themes and use them for any of your forms. If a field's view doesn't exist in the configured theme, it will fall back to the default theme. You can set the default theme in config/livewire-forms.php.

Use the following command to create a new theme:

php please livewire-forms:theme

Important: It's very likely that future releases will introduce breaking changes to the theme views. If that happens, you will have to manually update your themes.

Field Views

Each field will load the view defined by its type by default. A subscription field of type: radio, for example, will load the radio.blade.php view.

Sometimes you may want to load a different view for a field. In this example, we want to display a fancy radio button group. Simply create a subscription.blade.php view within the theme's fields folder to autoload your custom view.

You may also manually override a field's view by adding view: {the_name_of_the_view} to the config in the blueprint.

Components

Sometimes you need more control over your form. For instance, if you want to dynamically populate a select field's options. There are a couple of concepts that help you customize your form experience.

Get started by creating a new component. The following example will create a new form component in app/Livewire/ContactForm.php

php please livewire-forms:component ContactForm

Render the component

Livewire Forms is smart enough to autoload custom components by matching the class name with the form's handle. The following example will look for a App\Livewire\ContactForm.php component. If there is no class with that name, the default form component will be loaded instead.

<!-- Antlers -->
{{ livewire:form handle="contact" }}

<!-- Blade -->
<livewire:form handle="contact">

Note: The component's name needs to end with Form. This is necessary for Livewire Forms to do its autoloading magic.

Field Models

Field models are responsible for generating a field's properties like view, label, and rules. For instance, all the fields of type \Statamic\Fieldtypes\Select::class are bound to the \Aerni\LivewireForms\Fields\Select::class model. A field property is created for each model method ending with Property, e.g. optionsProperty() will generate an options property.

To change a fields default model, simply change the binding in the models property in your component:

protected array $models = [
    \Statamic\Fieldtypes\Select::class => \App\Fields\Select::class,
];

If you want to change a model for a specific field only, simply use the field's handle as the key instead:

protected array $models = [
    'products' => \App\Fields\SelectProduct::class,
];

Tip: You may change the default bindings in config/livewire-forms.php. If you have a fieldtype that's not supported by this addon, simply create a new model and add the binding to the config.

Callbacks & Hooks

There are a couple of callbacks and hooks that let you modify fields and data at various lifecycle steps.

Hydrated Fields

Use this callback to modify the fields before they are rendered, e.g. a field's label. This is often the simpler route when changing a single thing, rather than adding a new field model binding.

protected function hydratedFields(Fields $fields): void
{
    $fields->get('name')->label('Your name');
}

Submitting Form

Use this hook to modify data before the form submission is created. Note, that you can only modify data of fields that are part of the form blueprint. You can't add data for nonexistent fields. In the example below: The form blueprint needs a full_name field.

protected function submittingForm(): void
{
    $this->data['full_name'] = "{$this->data['first_name']} {$this->data['last_name']}";
}

Created Submission

Use this callback to modify the data of the submission before it gets saved and events are triggered.

protected function createdSubmission(Submission $submission): void
{
    $title = $submission->augmentedValue('entry')->value()->title;

    $submission->set('entry_title', $title);
}

Submitted Form

Use this hook to perform an action after the form has been submitted.

protected function submittedForm(): void
{
    Newsletter::subscribe($this->data['email']);
}

Customization Example

In the following example we want to dynamically generate the options of a select field based on the entries of a Statamic collection. We also want to change the view of the field because the design needs to be different to a regular select field. There are two ways to achieve our task. We can either create a custom field model or use the hydratedFields callback. Choose whichever route feels better to you.

Using a custom field model

We start by creating a new SelectProduct field model class that extends the default Select model class. We then override the optionsProperty method to return our options from a collection. We also assign a different view using the $view class property.

namespace App\Fields;

use Aerni\LivewireForms\Fields\Select;
use Statamic\Facades\Entry;

class SelectProduct extends Select
{
    protected static string $view = 'select_product';

    public function optionsProperty(): array
    {
        return Entry::whereCollection('products')
            ->mapWithKeys(fn ($product) => [$product->slug() => $product->get('title')])
            ->all();
    }
}

Next, we need to tell the form which field we want to use the SelectProduct model for. In our case, we only want to use the SelectProduct model for the select field with the handle products.

namespace App\Livewire;

use Aerni\LivewireForms\Livewire\BaseForm;

class ContactForm extends BaseForm
{
    protected array $models = [
        'products' => \App\Fields\SelectProduct::class,
    ];
}

Using the hydratedFields callback

Instead of defining a new field model, we can also achieve the same thing using the hydratedFields callback.

namespace App\Livewire;

use Aerni\LivewireForms\Livewire\BaseForm;

class ContactForm extends BaseForm
{
    protected function hydratedFields(Fields $fields): void
    {
        $options = Entry::whereCollection('products')
            ->mapWithKeys(fn ($product) => [$product->slug() => $product->get('title')])
            ->all();

        $fields->get('products')
            ->options($options)
            ->view('select_product');
    }
}

Render the component

Lastly, we need to render our new ContactForm component in the template.

<!-- Antlers -->
{{ livewire:form handle="contact" }}

<!-- Blade -->
<livewire:form handle="contact">

Validation

Validation Rules

You can use any validation rule you want. Simply add it to the field in the form blueprint or use the blueprint builder in the CP. If you have validation rules like required_if, make sure to prefix the field with data.

validate:
  - 'required_if:data.newsletter,true'

Real-time Validation

Real-time validation works out of the box by updating the field's value on change event. You may override this behavior by setting the wire_model parameter in the field's config.

tabs:
  main:
    display: Main
    sections:
      -
        fields:
          -
            handle: email
            field:
              type: text
              wire_model: live.debounce.150ms
              validate:
                - required
                - email

To use Livewire's default behavior and defer all network requests until the form is submitted, you may set wire_model: defer.

Validation Messages

You can customize the validation messages of your fields by creating a custom form component and using either of the two methods below.

Note: Make sure to add data in front of the field's handle.

Using the $messages property

protected $messages = [
    'data.name.required' => 'What is your name darling?',
];

Using the messages() method

protected function messages(): array
{
    return [
        'data.name.required' => 'What is your name darling?',
    ];
}

Field configuration

There are a couple of configuration options for your form fields:

Parameter	Type	Supported by	Description
autocomplete	string	input, textarea, select	Set the field's autocomplete attribute. Defaults to on.
cast_booleans	boolean	radio, select	String values of true and false will be saved as booleans.
default	array, boolean, integer, string	All fieldtypes except assets	Set the field's default value
inline	boolean	checkboxes, radio	Set to true to display the fields inline
placeholder	string	input, textarea	Set the field's placeholder value
show_label	boolean	All fieldtypes	Set to false to hide the field's label and instructions.
width	integer	All fieldtypes	Set the desired width of the field.
wire_model	string	All fieldtypes	Customize wire:model, e.g. wire_model: live.debounce.150ms.

Localization

There are a few default message strings like the submit button label and success message that you might want to change. You can change the messages globally or on a per form level.

Globally

Publish the language files and change whatever message you'd like:

php artisan vendor:publish --tag=livewire-forms-translations

Per Form

1. Create a file called livewire-forms.php for each of your localizations, e.g., resources/lang/en/livewire-forms.php.
2. Create an array with the handle of each form for which you want to change a message for.
3. Use the same keys that are used in the global language files. Note, that the messages in this file will take precedence over the messages in the global language file.

return [

    'contact' => [
        'submit_button_label' => 'Contact now',
        'success_message' => 'Thanks for contacting us. We will be in touch.',
        'error_message' => 'There was an error with your submission:|There were :count errors with your submission:',
    ],

    'newsletter' => [
        'submit_button_label' => 'Signup now',
    ],

];

Translating sections and fields

You can translate your field labels, instructions, options, and placeholders using JSON files. Create a translation file for each language, e.g. resources/lang/de.json.

Example

Form Blueprint

tabs:
  main:
    display: Main
    sections:
      -
        display: Subscription
        instructions: 'Choose your subscription below'
        fields:
          -
            handle: subscription
            field:
              display: Subscription
              placeholder: 'Which subscription do you want?'

Translation File

{
    "Subscription": "Abo",
    "Choose your subscription below": "Wähle dein Abo",
    "Which subscription do you want?": "Welches Abo möchtest du?",
}

Captcha Fieldtype

This addon comes with a Captcha fieldtype that lets you add a Google reCAPTCHA v2 (checkbox) captcha to your form. The Captcha fieldtype is available in the form blueprint builder like any other fieldtype.

Note: Make sure to add your captcha key and secret in your .env file.

Events

This addon dispatches the following Events. Learn more about Statamic Events and Livewire Events events.

FormSubmitted

Dispatched when a Form is submitted on the front-end before the Submission is created.

Statamic

Statamic\Events\FormSubmitted

public function handle(FormSubmitted $event)
{
    $event->submission; // The Submission object
}

Livewire

formSubmitted

// JavaScript Example

Livewire.on('formSubmitted', () => {
    ...
})

SubmissionCreated

Dispatched after a form submission has been created. This happens after a form has been submitted on the front-end.

Statamic

Statamic\Events\SubmissionCreated

public function handle(SubmissionCreated $event)
{
    $event->submission;
}

Livewire

submissionCreated

// JavaScript Example

Livewire.on('submissionCreated', () => {
    ...
})

License

Livewire Forms is commercial software but has an open-source codebase. If you want to use it in production, you'll need to buy a license from the Statamic Marketplace.

Livewire Forms is NOT free software.

Credits

Developed by Michael Aerni

statamic-livewire-forms's Issues

Conditional Field Still Being Validated

When a field is hidden via conditional logic the validation logic appears to still be parsed for it and you cannot submit the form.

I would attempt to submit a pull request for this myself, but I am not sure how to filter the fields based on conditional logic before evaluating the validation rules.

File uploads get lost after submit

This week I got a message from my client that file uploads seemed to be broken on their form (it worked before). I tried debugging the issue, and it seems that file gets uploaded properly (I can see it I'n my assets). But then the field values gets cleared; it isn't attached to the e-email and the form submission in the CP doesn't show it either.

When logging the field in the submittedForm hook, it shows the field has a value (field type Livewire\TemporaryUploadedFile). But when doing the same in the e-mail template, the value is empty (field type Statamic\Fields\Value).

I see there was an issue (#14) before, that was fixed last year. Could be that this bug has regressed with one of the latest Statamic updates?

ReCaptcha::key() must be of the type string, null returned

I am not using ReCaptcha but I am getting this error:

Return value of Aerni\\LivewireForms\\Captcha\\ReCaptcha::key() must be of the type string, null returned at /xxx/vendor/aerni/livewire-forms/src/Captcha/ReCaptcha.php:58

It might be because I just updated from 1.0 to 1.2.0-beta.4 and some old code was left behind.

Anyway, I have to update the config file to this (empty strings):

'captcha' => [
  'enabled' => false,
  'key' => env('CAPTCHA_KEY', ''),
  'secret' => env('CAPTCHA_SECRET', '')
],

[idea] Automatically overwriting a field view based on the file existing

Here is some context:

If I have a form group with multiple fields and want to overwrite a specific field, I can't use @formGroup('mygroup') and have to use @formField for all fields just to overwrite one field view:

@formField('field1')
@formField('field2', ['view' => 'field2'])
@formField('field3')
...

A nice feature would be that a view field could be autoloaded if the file with the name of the field exists.
ex.: fields/field2.blade.php
This way we could still use @formGroup('mygroup') and just by creating the file fields/field2.blade.php we would be able to overwrite it.

To prevent conflict with names, we could use a specific filename syntax:
fields/field2--field.blade.php (or anything else)

Let me know what you think.

Safari autofill causes submitted field to validate again while using Alpine

I have this weird issue, where fields that were filled using Safari autofill will be validated again right after submit. When these fields required, a error will be shown because now the field are empty.

The weird thing is that this issue only arrises when I have a AlpineJS x-data property on the field. Also when entering text using the keyboard everything works as expected.

Here is my input.blade.php file for my custom theme. The reason I added Alpine is because I need a class on the wrapper when the input is focused or has a value.

<div class="field">
  <div
    class="input @if ($errors->has($field->key)) input--error @endif"
    x-data="{
        inputType: '{{ $field->input_type }}',
        inputValue: '{{ $field->value || $field->default }}',
        hasFocus: false,
    }"
    x-bind:class="(inputValue || hasFocus || inputType === 'date') && 'input--active'"
  >
    @if ($field->show_label && $field->input_type !== 'file')
      <label
        for="{{ $field->id }}"
        class="field__label input__label @if (is_array($field->validate) && in_array('required', $field->validate)) field__label--required @endif"
      >
        {{ $field->label }} <span x-text="inputValue"></span>
      </label>
    @else
      <label
        for="{{ $field->id }}"
        class="screenreader"
      >{{ $field->label }}</label>
    @endif

    <input
      id="{{ $field->id }}"
      name="{{ $field->id }}"
      type="{{ $field->input_type }}"
      class="input__element"
      @if ($errors->has($field->key)) 
        aria-invalid="true"
        aria-describedby="{{ $field->id }}-error" 
      @endif
      x-on:focus="hasFocus = true"
      x-on:blur="hasFocus = false"
      x-on:input="inputValue = $event.target.value"
      x-init="inputValue = document.getElementById('{{ $field->id }}').value"
      wire:model.{{ $field->wire_model_modifier }}="{{ $field->key }}"
    />
  </div>

  @if ($field->instructions && !$errors->has($field->key))
    <p class="field__instructions">{{ $field->instructions }}</p>
  @else
    @include($this->component->getView('error'))
  @endif

</div>

As a quick fix, is it possible to disable validation after submit? I've tried overwriting the updated function in the BaseForm class so it doesn't validate after submit. This stops the error message from showing up, but the success message will still disappear .

Google Recaptcha not showing

Hi,
I'm using recaptcha and i have set the CAPTCHA_KEY and CAPTCHA_SECRET to my .env file but still the captcha is not showing.

after i see on DevTools / Inspect element it show that Invalid site Key.

I've been double check that my CAPTCHA_KEY and CAPTCHA_SECRET was correct.

Nice plugin btw

Duplicate field ids when using multiple forms

The chrome developer console is flagging duplicate ids for various fields - Things like 'email' and 'honeypot' that appear on multiple forms on my page:

Probably no big deal but can we get a unique id prepended to each field id?

Required validation not applying to Select fields

I have enabled the 'Required' toggle in the validation tab of a Select field but the form submits when leaving this field blank.

Seems like a bug? Thanks!

Labels remain on textarea fields when using them in conditional mode

Hi,

Having an issue with the DOM diffing, ghost fields still showing when using conditional fields.

When having a radio button, which shows/hides other fields depending on the selected option, the toggled field labels say when switching options.

Made a simple example, using this blueprint below. When toggling between the two options in the_type field, you end up getting left over labels from the field that got hidden (though the textarea got removed). This does not happen if using radio fields instead of textarea fields for the conditional fields.

Hope I explained the issue well. I tried to narrow down when the issue happens, but have not figured out why yet. Was wondering if anyone might have more insight as to why this happens. Thank you.

sections:
  main:
    display: Main
    fields:
      -
        handle: the_type
        field:
          options:
            one: One
            two: two
          inline: false
          cast_booleans: false
          display: 'The type'
          type: radio
          icon: radio
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false
      -
        handle: textarea_one
        field:
          antlers: false
          display: 'Textarea One'
          type: textarea
          icon: textarea
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false
          if:
            the_type: 'equals one'
      -
        handle: textarea_two
        field:
          antlers: false
          display: 'Textarea two'
          type: textarea
          icon: textarea
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: false
          if:
            the_type: 'equals two'

Question: Is there a solution to the csrf problem when using static caching?

Just wondering, do these livewire forms work with static caching? I'm running into that CSRF problem, and it difficult for me to exclude these forms as they appear on a lot of my pages in the form of popups.

No big deal. I can do without static caching. Thanks.

Use commands to create antlers files

Is it possible to create Antlers files instead of Blade? All my views (including my Livewire components) are Antlers files, so it would be nice if my Livewire Form components are also Antlers files.

Support all fieldtypes

Add support for all Statamic form fieldtypes:

• Assets
• Checkboxes
• Integer
• Radio
• Select
• Text
• Textarea

Line breaks missing in email template

Not sure if this is a "bug" in the add-on itself, but when sending a multi-line message, there are no breaks in the email.

This is a test message

Here is a new line

will look like this in the email:

This is a test message Here is a new line

Should fields use wire:model.defer instead of wire:model.lazy

Hi,

I'm noticing that checkboxes and text fields are dissappearring and reappearing randomly when interacting. Would wire:model.defer be a better choice when defining the models on fields?

Thanks!

Improve the error messages for fields without labels

I have a newsletter form with a single field for the email address. I don't use a label for this field, just a placeholder.

The error message looks like this:

Can this fall back to the fieldname instead (without 'data.')?

Thanks!

Validation: Confirmed rule always validate to false

When using the confirmed rule, the validation always return false.

A work around is to use the same rule and by adding data. to the field name:
same:data.<field name>

Using:

• Statamic Livewire Forms v6.2.0
• Statamic v3.3.54

Use a single livewire component for all forms

First of all - Fantastic package! It has saved me a tonne of work. I will be buying a licence later.

I'm just wondering about a small admin problem. I wanted to give some of my Statamic users the ability to create forms and add them to entries themselves - without my help, but I don't know if that's possible. I think I will have to run php please make:livewire-form for this.

So I am wondering, do we we really need a separate livewire component for each form? Or is there a way to automatically assign a default form component that all forms fall back to? For me, the contents of each form component will be exactly the same:

<form wire:submit.prevent="submit" class="w-full max-w-2xl">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-12">
        @include('livewire-forms::fields')
        @include('livewire-forms::fields.submit')
        @include('livewire-forms::fields.honeypot')
        @include('livewire-forms::errors')
        @include('livewire-forms::success')
    </div>
</form>

No big deal anyway. Thanks for the great work, and for Swup Livewire also!

Attachments not being added to email

I have enabled the 'Attach uploaded assets to this email.' toggle on the statamic form but it seems that no attachment is being added.

I'm testing this with Mailtrap so the attachment might be hidden somewhere, but I cannot see it anywhere in the raw version of the email.

Does this work or am I doing something wrong? Thanks.

Support conditional logic

Just out of curiousity, are you planning to handle conditional showing of fields based on Statamic field settings?

I don't need it but just wanted to let my client know if they can use conditional logic.

Add support for invisible reCAPTCHA

Hi,

Invisible captcha support anytime soon?

Thanks.

Form field names

Hi,

This refers to this closed issue: #6

It's great that form inputs now have unique ids but I was assuming the input names would stay the same. Screenshot:

The problem is my logic relies on certain field names being passed such as email, but with the update it's hard to target because now it's called JqcAhRBDtUd3sDwcJgiq_email

I can probably work around this but do you think it would be better to keep the field names as they were? There's no harm in having duplicate field names, it's just duplicate field ids that produce the console warnings.

UPDATE: Ignore for now. This may not be an issue. I will be back soon...

Uploads can cause validation problems

File uploads are causing problems on my local development environment.

I am uploading quite small files but they can still take a few seconds to be processed. This means that I can click the submit button before the upload has completed and that can cause a few different errors:

• If file is required - validation fails because the file has not been uploaded
• Once validation fails it's sometimes impossible to submit the form, the uploading state or the field can get stuck and you need to refresh the page.

Perhaps disabling the submit button while files are being processed would be a good idea? An indicator that files are uploading would be nice.

It's probably not as big a problem on a live environment because the upload process will be faster but I worry that it may cause problems.

Thanks!

How to pass parameter to form view

I want to pass a parameter to the form view like this using blade:

<livewire:form handle="order" :extract="$extract" />

I've added the property to the Component like this:

class OrderForm extends BaseForm
{
    /*
    |--------------------------------------------------------------------------
    | Initialize Properties
    |--------------------------------------------------------------------------
    |
    | You may override the form's view and theme.
    |
    */

    protected static $VIEW = 'order';
    protected static $THEME = 'order';

    public $extract;

    // other code...
}

But I get null when I do this. How do I pass the parameter and receive the correct value of $extract

Google Captcha v2 not showing

So, I Just configure my form input *for this instance my submission form
I did set the CAPTCHA_KEY and CAPTCHA_SECRET on my .env and when i try it the captcha not showing. Screenshot attached below

Steps i've done before create this issue

1. Run php artisan optimize:clear
2. Use different Browser, even with Incognito Mode
3. Turn off Ad Blocker