Installer OpnForm avec Docker

zarev 21 janv. 2025 5 min de lecture

Table des matières

Je pense sincèrement que OpnForm peut-être comparé à la Rolls Royce de la création du formulaire open source. Sans déconner ! C'est une vraie merveille niveau formulaire et possibilités ! Il peut convenir à tous vos besoins, sans peine.

Aujourd'hui, nous allons donc parler de OpnForm ! Une application permettant de créer des formulaires variés, de qualité, et vous pouvez lui faire parler n'importe quelle langue, ce qui n'est pas négligeable. Chaque champ est configurable. OpnForm est livré de base avec des noooooombreux templates déjà configurés. Sauf si vous voulez vos formulaires en anglais, langue par défaut des templates, vous ne pourrez pas les utiliser tels quels.

En tant que teckel, je n’approuve pas ce jeu de mots...

Il faudra les modifier dans votre langue.

Question prise en main, c'est rapide, bien pensé et organisé.

⚡ Caractéristiques

🚀 Constructeur sans code avec un nombre illimité de formulaires et de soumissions.
📝 Différents types d'entrées : Texte, Date, URL, Téléchargement de fichiers et bien plus encore.
🌐 "Intégrer n'importe où".
📧 Notifications par email.
💬 Intégrations (Slack, Webhooks, Discord).
🧠 Logique et personnalisation des formulaires.
🛡️ Protection Captcha.
📊 Analyse des formulaires.

💾 L'installation

Faites cette commande à la racine du dossier où vous avez toutes vos applications, cette commande va clonez le dépôt et créer le dossier OpnForm :

git clone https://github.com/JhumanJ/OpnForm.git

Entrez dans le dossier créé :

cd OpnForm

Configurer les fichiers d'environnement :

./scripts/setup-env.sh --docker

Si le port 80 est déjà utilisé dans votre configuration, changez-le :

sudo nano docker-compose.yml

Rendez-vous dans le dossier api :

cd api

On va éditer le fichier .env afin d'y mettre l'URL à laquelle sera reliée OpnFOrm :

sudo nano .env

Changez cette ligne et remplacez https://opnform.mondomaine.com par votre domaine/sous-domaine :

APP_URL=https://opnform.mondomaine.com

Retournez à la racine du dossier :

cd ..

On va déployer l'application:

docker compose up -d

Rendez-vous sur l'ip:port, suivant l'IP de votre serveur local et du port choisi, 80 par défaut :

http://ip:80

ou votre domaine:

https://opnform.mondomaine.com

📬 Configurer le serveur mail

Si vous avez votre propre service mail, vous avez les informations nécessaires à entrer ci-dessous.

Mais vous pouvez également utiliser les serveurs mail de Google, Outlook, Infomaniak,.. Jetez un œil ici pour avoir les paramètres nécessaires:

Le serveur mail sera pratique pour être averti quand une personne répond à votre formulaire ou pour inviter des personnes à utiliser l'instance. Ce n'est pas une obligation, mais c'est très pratique.

Pour configurer le serveur mail, quand vous êtes à la racine du dossier OpnForm, faites cette commande :

sudo nano api/.env

Il vous reste maintenant à éditer cette partie :

MAIL_MAILER=smtp
MAIL_HOST=mail.xxx.com
MAIL_PORT=465
MAIL_USERNAME=monmail@domaine.com
MAIL_PASSWORD=MonMotDePasse
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=monmail@domaine.com
MAIL_FROM_NAME=admin

MAIL_MAILER=smtp => Laissez tel quel.
MAIL_HOST=mail.xxx.com => L'adresse de votre serveur SMTP.
MAIL_PORT=465 => Le port utilisé par votre serveur SMTP.
MAIL_USERNAME=monmail@domaine.com => Le nom d'utilisateur de votre compte SMTP. L'adresse e-mail, en gros.
MAIL_PASSWORD=MonMotDePasse => Le mot de passe de votre compte SMTP. Le mot de passe de votre adresse e-mail.
MAIL_ENCRYPTION=ssl => tls ou ssl.
MAIL_FROM_ADDRESS=monmail@domaine.com => L'adresse e-mail à partir de laquelle les e-mails doivent être envoyés.
MAIL_FROM_NAME=admin => Le nom qui doit apparaître comme expéditeur des e-mails.

Quand vous avez terminé, faites à nouveau cette commande pour que les changements soient pris en compte :

docker compose up -d

👤 Création du compte administrateur

Lorsque vous lancez OpnForm pour la première fois, cliquez sur Login en haut à droite :

Entrez les identifiants par défaut :

Email => admin@opnform.com
Password => password

Terminez en cliquant sur Log in to continue :

Vous serez invité à changer le compte par défaut, ce qu'il faut absolument faire :

Email => Indiquez une adresse e-mail.
Password => Choisissez un mot de passe fort.
Confirm Password => Confirmez ce mot de passe.

Cliquez sur Update Credentials :

Vous serez redirigé vers le tableau de bord :

🗒️ Créer un formulaire

Cliquez sur + Create a new form :

Soit vous commencez par un simple formulaire de contact ou un template :

Je vais partir sur un formulaire simple de contact que je vais faire évoluer :

On va décortiquer légèrement l'interface, qui est très simple à prendre en main :

Build => C'est ici que vous allez construire votre formulaire avec des blocs.
Design => C'est ici que vous allez configurer le design du formulaire.
Settings => Vous avez ici accès à quelques réglages intéressants comme le nom du formulaire, les paramètres de soumission, les paramètres du lien, sécurité et accès, ...
Add Block => Faites votre choix parmi tous les blocs à ajouter à votre formulaire.

Après quelques petites retouches, quand vous êtes satisfait de votre travail, cliquez sur Publish Form :