Importation de notre nouvelle classe « ContactType » dans les « use » tout en haut du fichier.

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use App\Form\ContactType;

class BaseController extends AbstractController

Dans la fonction « contact », demandez au contrôleur (en passant par sa méthode « createForm ») de créer le formulaire en lui donnant la nouvelle classe créée. Le formulaire sera stocké dans la variable « $form ».

 $form = $this->createForm(ContactType::class);

Donnez le formulaire à la vue lorsque vous appelez le fichier TWIG. Par la même occasion, vous demandez au formulaire de générer le code HTML avec la méthode « createView ».

 'form' => $form->createView()

Voici le code complet de la fonction « contact »:

#[Route('/contact', name: 'contact')]
    public function contact(): Response
    {
        $form = $this->createForm(ContactType::class);
        return $this->render('base/contact.html.twig', [
            'form' => $form->createView()
        ]);
    }

Intégration du formulaire dans la vue 

Dans le fichier « templates/base/contact.html.twig », appelez le formulaire avec la fonction « form » de TWIG. Le formulaire se trouve dans la variable « form ». Voici le code complet de ce fichier :

{% extends 'base.html.twig' %}

{% block title %}{{parent()}}Contact{% endblock %}

{% block body %}
    <h1 class="text-center text-primary mt-4 pt-4 display-1 fw-bold"> CONTACT</h1>
    {{form(form)}}
{% endblock %}

Voici le rendu de la page « contact » :

Nous voyons notre formulaire s’afficher. Il nous reste à le modifier pour répondre à nos besoins.

Personnalisation du formulaire

Notre formulaire de contact contiendra 4 composants :

Une fois que nous avons analysé le type de composant nécessaire pour chaque élément du formulaire, nous allons chercher leur nom dans la documentation de Symfony.

Voici l’adresse :

https://symfony.com/doc/current/reference/forms/types.html

Conseil : Lorsque vous consultez la documentation, vérifiez que vous êtes dans la bonne version de Symfony en regardant la liste déroulante située en haut à droite de l’écran.

Voici la correspondance :

Pour chaque type de composants, vous devez importer la classe qui correspond. Vous la trouverez dans la documentation on en tapant la commande suivante :

php bin/console debug:form TextType

Commentaire : remplacez TextType par le nom d’un autre composant.

Exemple de ligne à copier pour déclarer une classe :

Symfony\Component\Form\Extension\Core\Type\TextType

Puis complétez/modifiez le fichier src/Form/ContactType.php :

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;

class ContactType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('nom', TextType::class)
            ->add('sujet', TextType::class)
            ->add('email', EmailType::class)
            ->add('message', TextareaType::class)
        ;
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            // Configure your form options here
        ]);
    }
}

Voici le rendu de la page « contact » :

Il nous faut un bouton de type « Submit » afin de pouvoir soumettre le formulaire. Ajoutez-le dans votre formulaire comme ceci :

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

class ContactType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('nom', TextType::class)
            ->add('sujet', TextType::class)
            ->add('email', EmailType::class)
            ->add('message', TextareaType::class)
            ->add('envoyer', SubmitType::class)
        ;
    }

Interface de la page « Contact » :

Mise en forme de la page « contact » 

Il existe plusieurs méthodes pour mettre en forme une page avec Symfony. Pour « Bootstrap », il existe une ligne pour l’appliquer sur les formulaires. Cependant, je vous propose de travailler un peu plus afin que vous puissiez mettre en forme votre formulaire à partir du créateur de formulaires. Dans « src\Form\ContactType », ajoutez les instructions surlignées.

public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('nom', TextType::class, ['attr' => ['class'=> 'form-control'], 'label_attr' => ['class'=> 'fw-bold']])
            ->add('sujet', TextType::class, ['attr' => ['class'=> 'form-control'], 'label_attr' => ['class'=> 'fw-bold']])
            ->add('email', EmailType::class, ['attr' => ['class'=> 'form-control'], 'label_attr' => ['class'=> 'fw-bold']])
            ->add('message', TextareaType::class, ['attr' => ['class'=> 'form-control', 'rows'=>'7', 'cols' => '7'], 'label_attr' => ['class'=> 'fw-bold']])
            ->add('envoyer', SubmitType::class, ['attr' => ['class'=> 'btn bg-primary text-white m-4' ], 'row_attr' => ['class' => 'text-center'],])
        ;
    }

Commentaires :

• 'attr' => ['class'=> 'form-control'] // permet d’attribuer la class css « form-control » de « Bootstrap » à une zone de saisie.

• 'label_attr' => ['class'=> 'fw-bold'] // permet d’attribuer la classe « fw-bold » au label qui s’affiche au-dessus d’une zone de saisie. Le texte sera en gros.

• 'rows'=>'7', 'cols' => '7'] // permet de préciser le nombre de lignes et le nombre de colonnes dans un « Textarea ».

• 'row_attr' => ['class' => 'text-center'] // permet d’attribuer une classe à la ligne qui contient le composant, ici je l’utilise pour demander à la ligne de me centrer le bouton « envoyer ».

Modification de l’affichage dans « contact.html.twig » 

{% extends 'base.html.twig' %}

{% block title %}
	{{parent()}}Contact
{% endblock %}

{% block body %}
	<div class="container-fluid">
	    <div class="row justify-content-center">
			
                    <div class="col-10 text-primary">
                        <h1 class="text-center text-primary mt-4 pt-4 display-1 fw-bold">CONTACT</h1>
                        {{form(form)}}
                    </div>    
	    </div>
	</div>
{% endblock %}

Commentaires :

• <div class="container-fluid"> // permet au bloc de prendre toute la largeur de la page.

• <div class="row justify-content-center"> // création d’une ligne dont le contenu sera centré sur la page.

• <div class="col-10 text-primary"> // création d’une colonne qui prendra 10 colonnes de la page. Pour « Bootstrap », la largeur d’une page est de 12 colonnes.

Nous avons terminé l’interface de notre page « contact », dans le prochain chapitre, nous allons voir comment récupérer les données afin d’envoyer un email.

Voir le Chapitre 4