# Ninja Form

<p class="callout info">Cette marche a suivre a pour but d'expliquer comment utiliser les formulaires Ninja Form. </p>

### Accéder à l'interface 

1. Se connecter à la console d'administration du site
2. Cliquer sur "Ninja Form" dans le menu de gauche  
    
  [![image-1637232862179.48.32.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637232862179-48-32.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637232862179-48-32.png)
3. Choisir le formulaire à modifier et cliquer sur le nom, cela ouvre l'éditeur  
  ### [![image-1637232908929.48.48.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637232908929-48-48.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637232908929-48-48.png)

### Modifier un champ existant

1. Cliquer sur le champ à modifier, la fenêtre d'édition s'ouvre sur la droite  
    
    
  [![image-1637233000700.49.06.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233000700-49-06.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233000700-49-06.png)
2. Pour modifier le nom d'affichage, modifier le "placeholder"  
    
    
  [![image-1637233082717.49.51.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233082717-49-51.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233082717-49-51.png)
3. Une fois la modification effectuée, cliquer sur "Done"  
    
    
  [![image-1637233115708.49.51.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233115708-49-51.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233115708-49-51.png)
  
    
  ### Modifier l'adresse mail de réception
  
  
  1. Pour modifier l'adresse mail de réception du formulaire, cliquer sur "Emails &amp; Actions"  
      
      
    [![image-1637233221715.50.19.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233221715-50-19.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233221715-50-19.png)
  2. Cliquer ensuite sur la roue dentée à côté de "Email"  
      
      
    [![image-1637233253401.50.19.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233253401-50-19.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233253401-50-19.png)
  3. Modifier ensuite l'adresse dans le champ "To"  
      
      
    [![image-1637233287383.50.19.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233287383-50-19.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233287383-50-19.png)
  4. Une fois la modification effectuée, cliquer sur "Done"  
      
      
    [![image-1637233309843.50.19.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233309843-50-19.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233309843-50-19.png)
    
    ### Ajouter un nouveau champ
    
    
    1. Dans "Form Fields", cliquer sur le "+" en bas à droite  
        
        
      [![image-1637233383455.51.09.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233383455-51-09.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233383455-51-09.png)
    2. Choisir le type de champ à ajouter  
        
      [![image-1637233412477.51.19.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233412477-51-19.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233412477-51-19.png)
    3. Le champs s'ajoute à la fin du formulaire. Pour le placer ailleurs, utiliser la souris pour le glisser-déposer.
    4. Vous pouvez ensuite modifier le champ.

### Sauvegarde des modifications 

1. Une fois toutes les modifications effectuées, cliquer sur "Publish" en haut à droite  
    
    
  [![image-1637233568235.50.39.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233568235-50-39.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233568235-50-39.png)
2. Pour quitter l'interface d'édition du formulaire, cliquer sur la croix "X" en haut à droite  
    
  [![image-1637233617084.50.56.png](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/scaled-1680-/image-1637233617084-50-56.png)](https://docs.trisinformatique.com/uploads/images/gallery/2021-11/image-1637233617084-50-56.png)

<p class="callout success">Félicitation !  
Le formulaire modifié est maintenant visible sur le site.</p>

<p class="callout warning">Si quelque chose ne se passe pas comme expliqué ci-dessus ou que vous avez besoin d'une quelconque assistance, n'hésitez pas à prendre contact avec l'équipe de Tris Informatique qui se fera un plaisir d'intervenir :  
https://www.trisinformatique.com/contact/</p>