Getting started with Filament 3.3 - Need beginner help with FORMS

heat23. · 2024-06-13T21:08:53.480Z

I have Laravel 11 and I just installed filament forms and actions but having issues getting the most basic form created and displayed. Do I add my code to a normal Laravel controller? Do I make a livewire component? Please help me get started with a basic example.

A

awcodes•6/13/24, 9:26 PM

You would add the code to the livewire component.

A

awcodes•6/13/24, 9:27 PM

https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

Adding a form to a Livewire component - Form Builder - Filament

H

heat23.OP•6/13/24, 9:50 PM

@awcodes Ok I for further along, when I view the page the form field is not showing up properly. See screenshot.I am using Tailwind CSS in my project:

H

heat23.OP•6/13/24, 9:50 PM

<x-panel>
    <div>
        <form wire:submit.prevent="submit">
            {{ $this->form }}
            <x-primary-button>
                Submit
            </x-primary-button>
        </form>
    </div>
</x-panel>

<x-panel>
    <div>
        <form wire:submit.prevent="submit">
            {{ $this->form }}
            <x-primary-button>
                Submit
            </x-primary-button>
        </form>
    </div>
</x-panel>

<x-panel>
    <div>
        <form wire:submit.prevent="submit">
            {{ $this->form }}
            <x-primary-button>
                Submit
            </x-primary-button>
        </form>
    </div>
</x-panel>

<x-panel>
    <div>
        <form wire:submit.prevent="submit">
            {{ $this->form }}
            <x-primary-button>
                Submit
            </x-primary-button>
        </form>
    </div>
</x-panel>

A

awcodes•6/13/24, 9:53 PM

Looks like you’re missing the styles. That is all covered under the installation steps.

A

awcodes•6/13/24, 9:54 PM

https://filamentphp.com/docs/3.x/forms/installation

Installation - Form Builder - Filament

H

heat23.OP•6/13/24, 10:02 PM

I ran those on my existing project, perhaps something may not be compatibile? Here is the first part of my tailwind.config.js:

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

app.css has:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

postcss.config.js has:

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
};

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
};

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
};

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
};

A

awcodes•6/13/24, 10:03 PM

And what about your layout, did you include the

@FilamentScripts

@FilamentScripts

@FilamentScripts

@FilamentScripts and

@FilamentStyles

@FilamentStyles

@FilamentStyles

@FilamentStyles directives?

H

heat23.OP•6/13/24, 10:05 PM

app.blade.php:

@extends('layouts.base')

@section('body')
    @yield('content')

    @isset($slot)
        {{ $slot }}
    @endisset
@endsection

@extends('layouts.base')

@section('body')
    @yield('content')

    @isset($slot)
        {{ $slot }}
    @endisset
@endsection

@extends('layouts.base')

@section('body')
    @yield('content')

    @isset($slot)
        {{ $slot }}
    @endisset
@endsection

@extends('layouts.base')

@section('body')
    @yield('content')

    @isset($slot)
        {{ $slot }}
    @endisset
@endsection

base.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @hasSection('title')
        <title>@yield('title') - {{ config('app.name') }}</title>
    @else
        <title>{{ config('app.name') }}</title>
    @endif

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon.ico') }}" type="image/x-icon">

    <!-- Fonts -->

    {{-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> --}}
    <script src="https://use.typekit.net/ysj8spp.js"></script>
    <script>
        try {
            Typekit.load({
                async: false
            });
        } catch (e) {}
    </script>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/6c869df28d.js" crossorigin="anonymous"></script>

    <!-- Added by filament -->
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    @filamentStyles
    <!-- end filament -->

    @vite(['resources/css/app.css'])
    @livewireStyles
</head>

<body>
    @include('layouts.site-nav')
    @yield('body')

    @filamentScripts
    @vite('resources/js/app.js')
    @livewireScripts

</body>

@include('layouts.footer')


</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @hasSection('title')
        <title>@yield('title') - {{ config('app.name') }}</title>
    @else
        <title>{{ config('app.name') }}</title>
    @endif

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon.ico') }}" type="image/x-icon">

    <!-- Fonts -->

    {{-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> --}}
    <script src="https://use.typekit.net/ysj8spp.js"></script>
    <script>
        try {
            Typekit.load({
                async: false
            });
        } catch (e) {}
    </script>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/6c869df28d.js" crossorigin="anonymous"></script>

    <!-- Added by filament -->
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    @filamentStyles
    <!-- end filament -->

    @vite(['resources/css/app.css'])
    @livewireStyles
</head>

<body>
    @include('layouts.site-nav')
    @yield('body')

    @filamentScripts
    @vite('resources/js/app.js')
    @livewireScripts

</body>

@include('layouts.footer')


</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @hasSection('title')
        <title>@yield('title') - {{ config('app.name') }}</title>
    @else
        <title>{{ config('app.name') }}</title>
    @endif

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon.ico') }}" type="image/x-icon">

    <!-- Fonts -->

    {{-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> --}}
    <script src="https://use.typekit.net/ysj8spp.js"></script>
    <script>
        try {
            Typekit.load({
                async: false
            });
        } catch (e) {}
    </script>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/6c869df28d.js" crossorigin="anonymous"></script>

    <!-- Added by filament -->
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    @filamentStyles
    <!-- end filament -->

    @vite(['resources/css/app.css'])
    @livewireStyles
</head>

<body>
    @include('layouts.site-nav')
    @yield('body')

    @filamentScripts
    @vite('resources/js/app.js')
    @livewireScripts

</body>

@include('layouts.footer')


</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @hasSection('title')
        <title>@yield('title') - {{ config('app.name') }}</title>
    @else
        <title>{{ config('app.name') }}</title>
    @endif

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon.ico') }}" type="image/x-icon">

    <!-- Fonts -->

    {{-- <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> --}}
    <script src="https://use.typekit.net/ysj8spp.js"></script>
    <script>
        try {
            Typekit.load({
                async: false
            });
        } catch (e) {}
    </script>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/6c869df28d.js" crossorigin="anonymous"></script>

    <!-- Added by filament -->
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    @filamentStyles
    <!-- end filament -->

    @vite(['resources/css/app.css'])
    @livewireStyles
</head>

<body>
    @include('layouts.site-nav')
    @yield('body')

    @filamentScripts
    @vite('resources/js/app.js')
    @livewireScripts

</body>

@include('layouts.footer')


</html>

A

awcodes•6/13/24, 10:08 PM

Hmm, maybe the livewire directives are creating a problem. They shouldn’t be needed with v3. Not sure. Nothing obvious is standing out based on what you shared.

A

awcodes•6/13/24, 10:08 PM

Also, side note, why is the footer outside the body.?

H

heat23.OP•6/13/24, 11:16 PM

I tried commenting out the @livewire directives, but still an issue. Thanks for pointing out the footer outside of body, I moved it back.
How can I make sure that the page i loading the filament CSS? What should I look for in the Network Tab of the browser?

A

awcodes•6/13/24, 11:18 PM

Since you’re using it stand-alone it would be your app.css

A

awcodes•6/13/24, 11:19 PM

Sounds like you possibly missed a step somewhere, but hard to say without seeing the app’s code.

H

heat23.OP•6/13/24, 11:19 PM

Is there a specific element I can look for in the app.css to make sure the filament class is there?

A

awcodes•6/13/24, 11:19 PM

Not really, it’s all tailwind classes.

H

heat23.OP•6/13/24, 11:21 PM

Sigh...i was excited to give Filament a try, but I may just have to revert back and continue with something else

A

awcodes•6/13/24, 11:22 PM

If you follow all the steps in the installation guide it would be working.

A

awcodes•6/13/24, 11:22 PM

You just missed a step somewhere.

H

heat23.OP•6/13/24, 11:22 PM

Is there anything else I need to do besides what is decribed in https://filamentphp.com/docs/3.x/forms/installation ? I'm not using the full filament library

Installation - Form Builder - Filament

A

awcodes•6/13/24, 11:23 PM

I promise it works. I’m using it with no issues.

A

awcodes•6/13/24, 11:23 PM

I have panels on the backend for our CMS. And am using the forms package individually on the front end with no issues for our lead gen forms.

H

heat23.OP•6/13/24, 11:25 PM

Btw, I didn't already have livewire. I let composer install that dependency. Do I need ti install liverwire separately and follow their instructions?

A

awcodes•6/13/24, 11:25 PM

All the packages work standalone. Just have to setup the app / layouts correctly.

Hheat23.Btw, I didn't already have livewire. I let composer install that dependency. Do ...

A

awcodes•6/13/24, 11:25 PM

No, requiring any of the filament packages will also require livewire.

A

awcodes•6/13/24, 11:27 PM

It looks like everything you’re doing is correct. That’s why you’re seeing a browser validation error. It’s just something in your set up that is not creating the right classes for tailwinds’ jit compiler.

A

awcodes•6/13/24, 11:27 PM

It’s not a filament issue. Just a misconfiguration in your app.

H

heat23.OP•6/13/24, 11:31 PM

Do I use

php artisan make:livewire

php artisan make:livewire

php artisan make:livewire

php artisan make:livewire when creating a basic filament form?

A

awcodes•6/13/24, 11:32 PM

Sure, that’s just going to make a livewire component.

A

awcodes•6/13/24, 11:33 PM

But the layout for the page has to include filament styles and scripts.

A

awcodes•6/13/24, 11:34 PM

Now, that could be a full page livewire component or not. It’s dependent to your app and what blade components are used.

A

awcodes•6/13/24, 11:34 PM

It’s not necessarily filament specific.

A

awcodes•6/13/24, 11:35 PM

I think you might need to spend some time understanding how livewire and tailwind work to get a better understanding of the ecosystem.

A

awcodes•6/13/24, 11:36 PM

And we are certainly here to help, but there’s only so much we can offer.

H

heat23.OP•6/13/24, 11:37 PM

You've been very helpful and I appreciate it. I re-installed everything and now using the exact "create-post" example. Still having CSS issues: I do't imagine that the default text color is white!

H

heat23.OP•6/13/24, 11:37 PM

BTW - All my other Tailwind CSS on the page works fine.. Does that indicate anything?

A

awcodes•6/13/24, 11:44 PM

That sounds like a missing config for the dark mode class on the html element.

H

heat23.OP•6/13/24, 11:46 PM

I noticed that the input field has the class "dark:text-white "...Where is dark mode being set from?

A

awcodes•6/13/24, 11:47 PM

In your tailwind.config.js

A

awcodes•6/13/24, 11:47 PM

But your layout needs to handle the class.

H

heat23.OP•6/13/24, 11:48 PM

Here is my tailwind.config.js: I don't see any mention of Dark Mode. I guess I'm confused, what do I need to handle? I don't want dark mode - my app does not support it (I don't think)

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                 sans: ['proxima-nova', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'hw-body': '#EEEEEE',
                'secondary': '#16A085',
                'secondary-hover': '#149078',
                'secondary-focus': '#028c71',
                'secondary-active': '#028c71',
                'gray-muted' : '#777777',
            },
        },
    },

    plugins: [forms],
};

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                 sans: ['proxima-nova', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'hw-body': '#EEEEEE',
                'secondary': '#16A085',
                'secondary-hover': '#149078',
                'secondary-focus': '#028c71',
                'secondary-active': '#028c71',
                'gray-muted' : '#777777',
            },
        },
    },

    plugins: [forms],
};

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                 sans: ['proxima-nova', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'hw-body': '#EEEEEE',
                'secondary': '#16A085',
                'secondary-hover': '#149078',
                'secondary-focus': '#028c71',
                'secondary-active': '#028c71',
                'gray-muted' : '#777777',
            },
        },
    },

    plugins: [forms],
};

import preset from './vendor/filament/support/tailwind.config.preset';
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                 sans: ['proxima-nova', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'hw-body': '#EEEEEE',
                'secondary': '#16A085',
                'secondary-hover': '#149078',
                'secondary-focus': '#028c71',
                'secondary-active': '#028c71',
                'gray-muted' : '#777777',
            },
        },
    },

    plugins: [forms],
};

A

awcodes•6/13/24, 11:49 PM

You’re missing the presets key in this config.

A

awcodes•6/13/24, 11:50 PM

You’re importing it but not including it.

A

awcodes•6/13/24, 11:53 PM

H

heat23.OP•6/14/24, 12:13 AM

Can you point me to a doc that shows this step?

H

heat23.OP•6/14/24, 12:14 AM

it works now btw, thank you so much for your help! Can you recommend a good site with full working examples/tutorials of Filament 3? (besides the official doc)

A

awcodes•6/14/24, 12:14 AM

I’ve already posted it.

H

heat23.OP•6/14/24, 12:14 AM

ahhh of course human error, I see it now. sigh..thanks for spending the time to find the issue

A

awcodes•6/14/24, 12:15 AM

https://demo.filamentphp.com/login

Getting started with Filament 3.3 - Need beginner help with FORMS

Similar Threads

Similar Threads

Similar Threads