Two column form layout - possible?

Support Forms & Blueprints
1

I need to create two forms on a modular page - one is a newsletter subscription and second is a contact form. As I understand I have to create a form.md file in each modular folder (_newsletter, _contact).

What about corresponding .html.twig files, how do I call them?

Is it doable with the Form plugin?

2

I’ve made it work thanks to this post: Modular Forms

Now wondering if it’s possible to change the layout of the contact form so two input fields (name and email) would be in one column on the left side and one bigger (message) would be on the right side.

3

I’ve solved the initial problem. Please look to my next comment for solution and another problem I’ve encountered (therefore edited the title of this post).

4

The form plugin actually already has a column and columns fields and you use them just like in the admin:

  fields:

    columns:
      type: columns

      fields:
      
        column1:
          type: column
          fields:

            field1:
              type: text
              label: Field 1

        column2:
          type: column
          fields:

            field2:
              type: text
              label: Field 2
...
5

OK, I thought it was only possible when creating blueprints, not in the front-end of the website. Let me give it a try, thanks!
PS
Any advise how to render it later on in Twig files? I have a problem with calling data which is too nested, will it be: {{fields.column1.type}}?

6

I’ve used your advice, but something is still not working as now only one column is displayed (before I had one row of three fields). Would you mind having a look at my code?

forms:
contact_form:
    name: contact
    action: /home
    fields:

        columns:
            type: columns

            fields:

                    column1:
                        type: column
                        fields:

                            - name: name
                              placeholder: Name
                              type: text
                              validate:
                                required: true
                              classes: contact__form__input
                            - name: email
                              placeholder: Email
                              type: email
                              validate:
                                required: true
                              classes: contact__form__input

                    column2:
                        type: column
                        fields:

                            - name: message
                              placeholder: Message
                              type: textarea
                              size: long
                              validate:
                                required: true
                              classes: contact__form__input--lg
7

@rhuk wow! Thank you so much. This option was exactly what I needed, but I couldn’t find it anywhere in the docs - is that right? So how could I know about this in the first place - without meeting nice and helpful people like you?

@OonaONeil you probably found your solution by now, I guess. But for other readers who joined the party later - like I did - it is a matter of addressing the differently generated HTML code for two columns with corresponding CSS rules.