Create a form in a modular page

Hi,
I have a modular page contact.html.twig that contains a form

<form action="" method="post" name="contact">
<input type="text" id="input-2" required>
<label>Name</label>
</form>
<button form="contact-form" type="submit">Send</button>

I wanna send an email that contains the form content and show a thank you message when I click the send button.

I tried to add this code to modular.md file
content:
items: '@self.modular'
order:
by: default
dir: asc
custom:

• _about
• _feed
• _team
• _partners

• _contact
  form:
  action: /01.home/_contact
  name: my-nice-form
  fields:

  YAMLCopy

      name: name
      label: Name
      placeholder: 'Enter your name'
      autofocus: 'on'
      autocomplete: 'on'
      type: text
      default: test
  

and creating a file user/config/plugins/email.yaml:
enabled: true
from: 'my_email'
from_name: 'my_name'
to:
to_name:
mailer:
engine: mail
smtp:
server: localhost
port: 25
encryption: none
user: 'xxxxx'
password: 'xxxx'
sendmail:
bin: '/usr/sbin/sendmail'
content_type: text/html

But I don't know how to connect my form in contact.html.twig to all of them and make it work.

Thank you in advance

You don't need to put the form HTML code manually.

What you need to do is create a form.md in a modular child page, and that will create the form fields, and take care of the form processing.

To send emails you'll need to add a form.process.email action to the form definition in the modular.md file.

It's all explained in Using forms in modular pages in details.

Here's a live example of a modular page used in the Deliver skeleton: https://github.com/getgrav/grav-skeleton-deliver-site/blob/develop/pages/07.contact/modular_alt.md and http://demo.getgrav.org/deliver-skeleton/contact. You can download the skeleton and try it too.

Thank you for your answer. I did what you said but my question now is how to add CSS classes to my form

نيك نيك