APA Component Library

Form 

<form>
    <div class="space-y-5">
        <div class="space-y-5 md:space-y-0 md:grid md:grid-cols-2 md:gap-5">

            <input type="text" placeholder="Vorname*" id="firstname" class="w-full py-3 px-6 text-black placeholder:text-black" />

            <input type="text" placeholder="Nachname*" id="lastname" class="w-full py-3 px-6 text-black placeholder:text-black" />
        </div>
        <div class="space-y-5 md:space-y-0 md:grid md:grid-cols-2 md:gap-5">

            <input type="text" placeholder="E-Mail" id="email" class="w-full py-3 px-6 text-black placeholder:text-black" />

            <input type="text" placeholder="Telefonnummer" id="phone" class="w-full py-3 px-6 text-black placeholder:text-black" />
        </div>

        <div class="space-y-5 md:grid md:grid-cols-1">

            <input type="text" placeholder="Betreff*" id="salution" class="w-full py-3 px-6 text-black placeholder:text-black" />
        </div>

        <textarea name="message" id="message" placeholder="Nachricht*" class="w-full h-40 max-h-56 py-3 px-6 text-black placeholder:text-black"></textarea>
        <div class="space-y-5 md:space-y-10">

            <button class="btn cursor-pointer inline-flex items-center w-full md:w-auto md:mt-5 bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95" type="submit">

                <span class="shrink-0">
                    Formular absenden
                </span>

                <span class="inline-flex items-center w-4 h-4    ms-9 ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                        <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                    </svg>
                </span>

            </button>
            <div class="max-w-3xl">

                <p class="default text-sm  leading-customText">Mit dem Absenden dieses Formulars wird der <a href="#" class="text-[#424343] italic">Datenschutzerklärung</a> dieser Website und der Speicherung der übermittelten Daten zugestimmt. Die mit * gekennzeichneten Felder sind Pflichtfelder. </p>

            </div>
        </div>
    </div>
</form>
 
<form>
    <div class="space-y-5">
        <div class="space-y-5 md:space-y-0 md:grid md:grid-cols-2 md:gap-5">
            {% render '@input' with {
                name: 'firstname',
                label: 'Vorname*'
            } %}
            {% render '@input' with {
                name: 'lastname',
                label: 'Nachname*'
            } %}
        </div>
        <div class="space-y-5 md:space-y-0 md:grid md:grid-cols-2 md:gap-5">
            {% render '@input' with {
                name: 'email',
                label: 'E-Mail',
                required: true,
                type: 'email'
            } %}
            {% render '@input' with {
                name: 'phone',
                label: 'Telefonnummer',
                type: 'tel'
            } %}
        </div>

        <div class="space-y-5 md:grid md:grid-cols-1">
            {% render '@input' with {
                name: 'salution',
                label: 'Betreff*',
                required: true,
            } %}
        </div>
        {% render '@textarea' with {
            name: 'message',
            label: 'Nachricht*'
        } %}
        <div class="space-y-5 md:space-y-10">
            {% render '@button' with {
                label: 'Formular absenden',
                tag: 'button',
                type: 'submit',
                classes: 'w-full md:w-auto md:mt-5',
                icon: {
                    name: 'arrow',
                    classes: 'ms-9',
                    strokeColor: 'text-white'
                }
            } %}

            <div class="max-w-3xl">
                {% render '@text' with {
                    text: 'Mit dem Absenden dieses Formulars wird der <a href="#" class="text-[#424343] italic">Datenschutzerklärung</a> dieser Website und der Speicherung der übermittelten Daten zugestimmt. Die mit * gekennzeichneten Felder sind Pflichtfelder.',
                    size: 'sm',
                } %}
            </div>
        </div>
    </div>
</form>
 
/* No context defined. */

No notes defined.