The section type "dreamform-license" is not valid

[outline4]

Hi,

I've just purchased and installed kirby-dreamform for the first time.

The plugin is created. The forms folder and the forms.txt as well.

When I visit forms via the sidebar there's this message: The section type "dreamform-license" is not valid

Where do I enter the license number? I am on a live domain.

Also: I don't see an icon like in the docs...

Another (unrelated) problem is that when I click, within the form builder, on new layout, the first layout is kinda bizzarre:

What am I doing wrong?

Be patient, it's my very first time I install this plugin.

Cheers
Stefan

--

Kirby: 4.4.1, Php: 8.3.12, Server: LiteSpeed, Plugins: bogdancondorachi/table-field: 2.4.0 tobimori/dreamform: 1.4.1

This is what I defined in the config.php:

// Settings for the DreamForm plugin
'tobimori.dreamform' => [
    // Custom layouts in 12 column grid
    'layouts' => [
        '1/1',
        '1/2, 1/2',
        '1/3, 1/3, 1/3'
    ],

    // Enable HTMX Mode
    'mode' => 'htmx',
    'guards' => [
        'available' => ['honeypot']
    ],
    'secret' => '..........',
],

    use tobimori\DreamForm\Support\Menu;
'panel.menu' => fn () => [
    'site' => Menu::site(),
    'forms' => Menu::forms(),
    'users',
    'system',
],

'content' => [
    'uuid' => true,
],

[outline4]

Hi, after checking the docs I saw that a lot of stuff was broken. So I downloaded it from dev branch and copied it manually into the plugin folder and now it all works out. I could enter my serial and I am happy that the plugin is not as ugly as it was at the beginning ;)

Just a quick question to get me started:

I need an exact html structure for my fields because it's integrated in a design system. exactly like this:

<div class="grid grid--responsive-cols-3 gap--responsive">

    <!-- input field -->
    <div class="form__group__input">
        <label for="my-id" class="text--base">
            Label
            <!---->
        </label>
        <input
            type="outline"
            id="my-id"
            name="my-id"
            placeholder="Placeholder"
            class="input--outline input--base"
        />
        <!---->
    </div>

    <!-- input field required -->
    <div class="form__group__input">
        <label for="my-id" class="text--base text--asterisk">
            Label Required
            <!---->
        </label>
        <input
            type="outline"
            id="my-id"
            name="my-id"
            placeholder="Placeholder"
            class="input--outline input--base input--error"
            required="required"
        />
        <div class="badge badge--sm badge--error">
            This field is required
        </div>
    </div>

    <!-- select field -->
    <div class="form__group__select">
        <label for="select-id" class="text--base">
            Label
            <!---->
        </label>
        <div class="select">
            <select
                id="select-id"
                name="select-name"
                class="input--outline input--base"
            >
                <option disabled="disabled" selected="selected">
                    Choose your country
                </option>
                <option>Switzerland</option>
                <option>Swaziland</option>
                <option>Sweden</option>
            </select>
            <div class="select__icon">
                <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
                    <path
                        d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
                    ></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- select field required -->
    <div class="form__group__select">
        <label for="select-id" class="text--base text--asterisk">
            Label Required
        </label>
        <div class="select">
            <select
                id="select-id"
                name="select-name"
                class="input--outline input--base input--error"
                required="required"
            >
                <option disabled="disabled" selected="selected">
                    Choose your country
                </option>
                <option>Switzerland</option>
                <option>Swaziland</option>
                <option>Sweden</option>
            </select>
            <div class="select__icon">
                <svg role="presentation" aria-hidden="true" viewBox="0 0 24 24">
                    <path
                        d="m5.706 10.015 6.669 3.85 6.669-3.85.375.649-7.044 4.067-7.044-4.067z"
                    ></path>
                </svg>
            </div>
        </div>
        <div class="badge badge--sm badge--error">
            This field is required
        </div>
    </div>

</div>

<div class="grid grid--responsive-cols-3/4-1/4 gap--responsive">
    <div class="remaining-seats">
        <p><strong>Die ausgewählte Führung hat: 20 verfügbare Plätze</strong></p>
    </div>

    <button type="button" class="btn btn--base btn--outline-negative">
        <span class="btn__text">
            Abschicken
        </span>
    </button>

</div>

Is something like this easily doable or should I stick with custom forms altogether?

Also: is it easy to create it's own fields?

Cheers
Stefan

[tobimori]

You can override all snippets in your own snippet folder. The file structure is the same as in the plugin. The Form snippet can be override by creating a file in site/snippets/dreamform/form.php, and all fields are e.g. site/snippets/dreamform/fields/text.php.

I would generally recommend against that (or suggest to keep the overrides to a minimum, that's what the partials are for), the built-in structure is pretty similar to what you need and you can attach classes or custom attributes to any objects, but if it's the only way, it's possible.

Here is a guide for creating a custom field.