Skip to content
● Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Log in Register
Support

How to swap fields in contact form

Solved by pamtbaau View solution

Started by Natalia Bazilenco 3 years ago · 17 replies · 355 views
3 years ago

Hi, how I can swap fields in contact form. If I swap or add a new field, the form stops working.
Need swap Email with Phone fields

YAML
fields:
        -
            name: Name
            label: Iмя
            validate:
                required: true
                message: 'is required'
            autofocus: 'off'
            autocomplete: 'on'
            type: text
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            name: Email
            label: Email
            validate:
                required: true
                message: 'is required'
            type: email
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            phone: 'Телефон (whatsapp)'
            label: 'Телефон (whatsapp)'
            type: tel
            validate:
                required: true
                message: 'is required'
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            name: Message
            label: false
            placeholder: 'Ваше запитання...'
            validate:
                required: true
                message: 'is required'
            type: textarea
            outerclasses: 'col-6 col-12-small'
            classes: null
            rows: 7
3 years ago

Is this before or after? Could you share both? Also looks like indentation is a bit off

3 years ago

Before

YAML
---
title: Контакти
routable: false
cache_enable: false
form:
    name: contact-form
    template: form-messages
    action: /
    classes: 'row gtr-50 gtr-uniform'
    refresh_prevention: true
    fields:
        -
            name: Name
            label: Iмя
            validate:
                required: true
                message: 'is required'
            autofocus: 'off'
            autocomplete: 'on'
            type: text
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            name: Email
            label: Email
            validate:
                required: true
                message: 'is required'
            type: email
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            phone: 'Телефон (whatsapp)'
            label: 'Телефон (whatsapp)'
            type: tel
            validate:
                required: true
                message: 'is required'
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            name: Message
            label: false
            placeholder: 'Ваше запитання...'
            validate:
                required: true
                message: 'is required'
            type: textarea
            outerclasses: 'col-6 col-12-small'
            classes: null
            rows: 7
    buttons:
        -
            type: submit
            value: Відправити
            outerclasses: form-field
            classes: 'button primary'
    process:
        save:
            fileprefix: contact-
            dateformat: dmY-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
        email:
            subject: '[Form from Editorial Website] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
        message: 'Thank you from your submission !'
        display: /thankyou
        reset: true
class: small
process:
    markdown: true
    twig: true
features:
    -
        icon: 'fa fa-phone'
        header: null
        text: +123-456-7890
        url: null
    -
        icon: 'fa fa-envelope'
        header: null
        text: h[email protected]
        url: null
    -
        icon: 'fa fa-home'
        header: null
        text: '123 Anywhere St., Any City'
        url: null
    -
        icon: 'fa fa-globe'
        header: null
        text: www.reallygreatsite.com
        url: null
---

After

YAML
---
title: Контакти
routable: false
cache_enable: false
form:
    name: contact-form
    template: form-messages
    action: /
    classes: 'row gtr-50 gtr-uniform'
    refresh_prevention: true
    fields:
        -
            name: Name
            label: Iмя
            validate:
                required: true
                message: 'is required'
            autofocus: 'off'
            autocomplete: 'on'
            type: text
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            phone: 'Телефон (whatsapp)'
            label: 'Телефон (whatsapp)'
            type: tel
            validate:
                required: true
                message: 'is required'
            outerclasses: 'col-6 col-12-small'
            classes: null
        -
            name: Email
            label: Email
            validate:
                required: true
                message: 'is required'
            type: email
            outerclasses: 'col-6 col-12-small'
            classes: null
        -   
            name: Message
            label: false
            placeholder: 'Ваше запитання...'
            validate:
                required: true
                message: 'is required'
            type: textarea
            outerclasses: 'col-6 col-12-small'
            classes: null
            rows: 7
    buttons:
        -
            type: submit
            value: Відправити
            outerclasses: form-field
            classes: 'button primary'
    process:
        save:
            fileprefix: contact-
            dateformat: dmY-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
        email:
            subject: '[Form from Editorial Website] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
        message: 'Thank you from your submission !'
        display: /thankyou
        reset: true
class: small
process:
    markdown: true
    twig: true
features:
    -
        icon: 'fa fa-phone'
        header: null
        text: +123-456-7890
        url: null
    -
        icon: 'fa fa-envelope'
        header: null
        text: h[email protected]
        url: null
    -
        icon: 'fa fa-home'
        header: null
        text: '123 Anywhere St., Any City'
        url: null
    -
        icon: 'fa fa-globe'
        header: null
        text: www.reallygreatsite.com
        url: null
---
3 years ago

And what do you mean by "form stops working"?

3 years ago Solution

@NataliaB:
phone: 'Телефон (whatsapp)'

It seems you're missing the 'name' variable for the phone field

TXT
name: Phone
👍 2
3 years ago

BTW, I wonder how it works with the before config - your Phone field is missing the name 🤔

3 years ago

But it should save, or is save processor not working?

3 years ago

I am editing the contact.md file. I cut out the field with the phone and paste it in front of the field with the mail. And the form is not displayed on the site.

3 years ago

So far, I decided to rearrange the fields through the online editor for files .md type
But, every time turn to the online editor? Maybe there is another option? Syntax highlighting for files .md 🤔

3 years ago

@NataliaB, You have been notified twice about a missing name property in the phone field. When are you trying to make that correction and report on it?

3 years ago

Yes, thanks, is this an error? Tell me please, now its correct?

YAML

            name: Phone
            label: 'Телефон (whatsapp)'
            type: tel
            validate:
                required: true
                message: 'is required'
            outerclasses: 'col-6 col-12-small'
            classes: null
3 years ago

@NataliaB, And try replacing all tabs with spaces...

3 years ago

@NataliaB, I'm afraid I do not understand your last reply...

According the YAML specs:

To maintain portability, tab characters must not be used in indentation, since different systems treat tabs differently. Note that most modern editors may be configured so that pressing the tab key results in the insertion of an appropriate number of spaces.

3 years ago

@NataliaB, I see you have already opened a new post. Does that mean this issue has been solved? It is a good habit to mark a post as being solved by ticking the 'solution icon' in the lower right corner of the reply that has led you to the solution.

Please also reviews all your previous posts that have been solved.

👍 1

Suggested topics

Topic Participants Replies Views Activity
Multisite in subdirectory
Support · by Thomas, 1 week ago
2 54 11 hours ago
How to listen for GET requests instead of POST requests?
Support · by Anna, 3 days ago
2 60 14 hours ago
Twig not processing in 2.0.0
Support · by Justin Young, 15 hours ago
1 30 15 hours ago
Form: GRAV.Yes translation key
Support · by Duc , 1 week ago
2 65 5 days ago
Installing Grav on Windows 11
Support · by Colin Hume, 1 week ago
2 57 5 days ago