Columns in contact forms

[geshov]

This is not a question, but a very simple ready-made solution for creating columns in forms that can be useful to someone.

Result:

Code:

title: Contact
cache_enable: false
form:
    name: feedback
    fields:
        row:
            type: fieldset
            classes: row
            fields:
                name:
                    type: text
                    label: Name
                    display_label: false
                    placeholder: 'Your Name'
                    classes: form-control
                    outerclasses: 'col-md-6 form-group mb-3'
                    validate:
                        required: true
                email:
                    type: email
                    label: Email
                    display_label: false
                    placeholder: 'Your Email'
                    classes: form-control
                    outerclasses: 'col-md-6 form-group mb-3'
                    validate:
                        required: true
                message:
                    type: textarea
                    rows: 5
                    label: Message
                    display_label: false
                    placeholder: 'Your Message'
                    classes: form-control
                    outerclasses: 'form-group mb-3'
                    validate:
                        required: true
    buttons:
        submit:
            type: submit
            value: 'Send Message'
            outerclasses: 'form-group text-center'
    process:
        email:
            reply_to: '{{ form.value.email | e }}'
            subject: 'Feedback from {{ form.value.name | e }}'
        reset: true
        message: 'Thank you for your feedback!'

This example uses the Bootstrap CSS library, but you can replace it with any other CSS library by modifying the classes accordingly.

Alex Geshov.

[danjames68]

This was incredibly useful - I didn't realise you could put classes in the form markdown file (duh). With tailwind, it looks like this:

form:
    name: villa-form
    fields:
        row:
            type: fieldset
            classes: 'sm:grid sm:grid-flow-row gap-x-2'
            fields:
                name:
                    label: Name
                    placeholder: 'Your name'
                    size: 30
                    autofocus: 'on'
                    autocomplete: 'on'
                    type: text
                    validate:
                        required: true
                email:
                    label: Email
                    placeholder: 'Your email address'
                    size: 30
                    type: email
                    validate:
                        required: true
                telephone:
                    label: Phone
                    placeholder: 'Add your phone with country code if you wish'
                    size: 30
                    type: text
                    validate:
                        required: false
                guests:
                    label: Guests
                    placeholder: 'How many will be travelling?'
                    size: 30
                    type: text
                    validate:
                        required: false
                dates:
                    label: Dates
                    placeholder: 'Be as precise or as vague as you like'
                    size: 30
                    type: text
                    validate:
                        required: false
                important:
                    label: 'Your story'
                    placeholder: 'Tell us a little about your ideal villa'
                    rows: 6
                    type: textarea
                    outerclasses: 'col-span-2'
                    validate:
                        required: false

Thanks!