Filament•6mo ago

Getting started with Filament 3.3 - Need beginner help with FORMS

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.

36 Replies

awcodes•6mo ago

You would add the code to the livewire component.

awcodes•6mo ago

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

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

heat23.OP•6mo ago

@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:

heat23.OP•6mo ago

<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>

awcodes•6mo ago

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

awcodes•6mo ago

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

Installation - Form Builder - Filament

heat23.OP•6mo ago

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',
    ],

app.css has:

@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: {},
    },
};

awcodes•6mo ago

And what about your layout, did you include the @FilamentScripts and @FilamentStyles directives?

heat23.OP•6mo ago

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

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>

awcodes•6mo ago

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. Also, side note, why is the footer outside the body.?

heat23.OP•6mo ago

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?

awcodes•6mo ago

Since you’re using it stand-alone it would be your app.css Sounds like you possibly missed a step somewhere, but hard to say without seeing the app’s code.

heat23.OP•6mo ago

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

awcodes•6mo ago

Not really, it’s all tailwind classes.

heat23.OP•6mo ago

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

awcodes•6mo ago

If you follow all the steps in the installation guide it would be working. You just missed a step somewhere.

heat23.OP•6mo ago

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

awcodes•6mo ago

I promise it works. I’m using it with no issues. 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.

heat23.OP•6mo ago

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

awcodes•6mo ago

All the packages work standalone. Just have to setup the app / layouts correctly. No, requiring any of the filament packages will also require livewire. 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. It’s not a filament issue. Just a misconfiguration in your app.

heat23.OP•6mo ago

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

awcodes•6mo ago

Sure, that’s just going to make a livewire component. But the layout for the page has to include filament styles and scripts. Now, that could be a full page livewire component or not. It’s dependent to your app and what blade components are used. It’s not necessarily filament specific. I think you might need to spend some time understanding how livewire and tailwind work to get a better understanding of the ecosystem. And we are certainly here to help, but there’s only so much we can offer.

heat23.OP•6mo ago

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!

heat23.OP•6mo ago

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

awcodes•6mo ago

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

heat23.OP•6mo ago

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

awcodes•6mo ago

In your tailwind.config.js But your layout needs to handle the class.

heat23.OP•6mo ago

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],
};

awcodes•6mo ago

You’re missing the presets key in this config. You’re importing it but not including it.

awcodes•6mo ago

heat23.OP•6mo ago

Can you point me to a doc that shows this step? 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)

awcodes•6mo ago

I’ve already posted it.

heat23.OP•6mo ago

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

awcodes•6mo ago

https://demo.filamentphp.com/login

awcodes•6mo ago

And the code is open sourced. https://github.com/filamentphp/demo

GitHub

GitHub - filamentphp/demo: Source code for the demo.filamentphp.com...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

heat23.OP•6mo ago

Thank you - Is there a modal example there?

Gaming

Programming

Getting started with Filament 3.3 - Need beginner help with FORMS