Landing Pages

Pour ajouter une étape, cliquez sur le bouton +, puis renseignez :

• Le nom de l'étape : ce titre apparaît dans le stepper et en haut du formulaire.
• Le type d'étape : Étape standard pour construire le formulaire avec des questions, ou Étape finale pour la page de confirmation (une seule étape finale possible par Landing Page).

Chaque étape est composée de plusieurs blocs, qui servent à créer le contenu (questions, textes, etc.) — voir 4.3 Construire le formulaire.

Ajouter une étape

▲Une seule étape finale peut être ajoutée dans la Landing Page.

L'onglet Titre permet ensuite d'affiner la configuration de l'étape : nom, ajout d'un sous-titre, affichage dans l'indicateur d'étapes, et choix du symbole affiché (numéro ou icône).

Onglet Titre de l'étape

▲L'icône ou le numéro choisi ici est celui affiché dans l'indicateur d'étapes du formulaire.

Par défaut, Hub3E sauvegarde automatiquement les réponses en base à chaque étape. Vous pouvez aussi configurer une fonction personnalisée (via une URL) pour traiter ces données vous-même.

Automatisation

▲Si la sauvegarde automatique est désactivée, Hub3E transmet les données à votre fonction et passe à l'étape suivante ; si elle est activée, Hub3E attend la réponse de votre fonction avant de continuer.

Le générateur propose plusieurs types de blocs pour construire et structurer le formulaire. Créer un formulaire Hub3E revient à assembler des blocs les uns sous les autres, comme un jeu de construction.

Bloc Standard : regroupe plusieurs champs liés à une ressource (candidat, contact, entreprise…). Sa configuration se fait en deux temps : le paramétrage du bloc, puis son rendu dans le formulaire.

• Identifiant du bloc : nom technique utilisé pour le retrouver (ex. « informations »).
• Type de bloc et Type de ressource : ici Bloc standard pour la ressource Candidat.
• Champs de bloc disponibles / actuels : ajoutez des champs via le bouton +, réorganisez-les avec l'icône ≡, réglez individuellement Obligatoire et Pleine largeur, ou supprimez-les avec la corbeille.

Modifier le bloc

▲Exemple : un bloc « informations » pour la ressource Candidat, avec les champs Civilité, Nom, Prénom, Téléphone et Email.

Une fois configuré, le bloc s'affiche dans le formulaire avec ses champs, ainsi que trois actions sur sa droite : configurer (roue crantée), supprimer (corbeille) et automatiser (robot).

Bloc Standard dans le formulaire

▲Le bloc B1 « Ressource Candidat / informations » reprend les mêmes champs, dans le même ordre, que ceux définis dans la modale.

Il est possible d'automatiser un bloc pour qu'il n'apparaisse que sous certaines conditions.

Bloc automatisé — règle d'apparition

▲Ici, le bloc B3 « Ressource Candidat / responsable_legal » est marqué « B3 APPARAÎT » : une règle JavaScript conditionne son affichage (par exemple, si le candidat est mineur).

Bloc Formation : affiche votre catalogue de formations sous forme d'accordéon, avec plusieurs options de filtre et de mise en forme.

• Utiliser une source de formations dynamique : au lieu d'une sélection figée, tire le catalogue proposé d'une source qui se met à jour automatiquement.
• Formations sélectionnables : la liste des formations proposées au candidat (ex. 10 formations sélectionnées).
• Nombre minimal / maximal de formation(s) sélectionnable(s) : borne le nombre de choix du candidat.
• Regrouper les formations et Champs de regroupement des formations : organise les formations par catégorie (ex. par Niveau).
• Utiliser un intitulé personnalisé : remplace le nom par défaut de chaque formation par un intitulé de votre choix.
• Gestion d'une candidature prioritaire et Champs de priorisation des candidatures : permet au candidat d'indiquer sa formation prioritaire parmi ses choix.

Bloc Formation — accordéon

▲Le bloc B1 « Ressource Candidature - Bloc accordéon » regroupe ici toutes ces options de sélection et de priorisation des formations.

Bloc HTML : insérez du texte ou un contenu HTML libre via l'éditeur TinyMCE pour guider l'utilisateur (message d'accueil, message de confirmation, consignes…). L'option Autoriser l'utilisation de JavaScript permet d'aller plus loin pour des besoins avancés.

Bloc HTML

▲Ici, le bloc « messageFinal » affiche un message de confirmation à la fin de la candidature.

Peu importe le nombre de blocs ou l'ordre dans lequel les champs sont remplis par l'utilisateur, le générateur envoie toujours les données vers Hub3E selon un ordre précis : une ressource doit exister avant qu'une autre puisse s'y rattacher.

Pour enregistrer une offre : Entreprise > Contact > Offre

Le générateur crée d'abord l'entreprise, puis le contact associé, puis l'offre qui leur est liée.

Pour capter un candidat : Candidat > Candidature

Le générateur crée d'abord le candidat, puis ses candidatures, à l'aide d'un token unique du candidat. Un bloc Formation est nécessaire pour créer une candidature.

Le réglage Placer le logo dans le formulaire propose trois options — Oui, Non ou Pas de logo — qui déterminent si votre logo s'affiche à l'intérieur ou à l'extérieur du formulaire (voir les deux exemples ci-dessous), ou n'apparaît pas du tout. Vous pouvez aussi ajouter une image de fond pour mettre en valeur votre établissement.

Gestion des images

▲ Le logo et l'image de fond s'activent indépendamment l'un de l'autre.

Logo à l'intérieur du formulaire

▲Le logo apparaît directement dans la carte du formulaire, au-dessus du titre de l'étape.

Logo à l'extérieur du formulaire

▲Le logo apparaît au-dessus du stepper, hors de la carte du formulaire.

Quand votre formulaire comporte plusieurs étapes, un stepper aide à guider l'utilisateur, le rassurer et réduire les abandons.

Trois modes sont disponibles pour le Mode de steppeur : Classique, Chevron ou Pas de steppeur. Le réglage Steppeur dans formulaire détermine s'il apparaît dans la carte du formulaire ou à l'extérieur, et le bouton Configuration du style ouvre les réglages de couleurs et d'ombre.

Gestion du stepper

▲Le mode de stepper et sa position dans le formulaire se choisissent ici.

Depuis Configuration du style, Hub3E permet d'ajuster les couleurs du stepper à votre charte graphique (couleur de fond, pastille active, pastille inactive), ainsi que son ombre :

• Position X : positif → ombre à droite, négatif → à gauche
• Position Y : positif → ombre en bas, négatif → en haut
• Flou : valeur positive = ombre plus douce et étalée, négative = pas d'ombre
• Opacité : règle la transparence de l'ombre

Choisir le style du stepper

▲Couleurs et ombre se règlent depuis la même modale, avec un aperçu en direct.

Vous pouvez modifier la police de tous les textes de la Landing Page (titres, sous-titres, labels, stepper…) en insérant un lien HTML vers la police souhaitée.

Police & Style

▲Chaque zone de texte (titre, sous-titre, label, stepper…) dispose de son propre réglage.

Pour aller plus loin dans la personnalisation, vous pouvez ajouter ou remplacer du CSS directement dans le générateur, en ciblant précisément les classes utilisées par la Landing Page.

Injection de CSS

▲Exemple : surcharger la couleur et la taille de police des labels du formulaire.

Il faut créer une configuration pour chaque type de provenance souhaité. Depuis le bouton + dans la colonne Actions de l'AGGRID des Landing Pages, ouvrez la modale de gestion des provenances.

Créer une configuration URL

▲Le bouton dédié ouvre la modale de gestion des provenances.

Modifier les paramètres URL

▲Exemple : la clé « provenance » avec la valeur « jpo_2025 ».

La clé et la valeur s'ajoutent au lien de base sous la forme ?provenance=jpo_2025 :

https://devecoles-v3.hub3e.com/landing-page/1/candidature?provenance=jpo_2025
https://devecoles-v3.hub3e.com/landing-page/1/candidature?provenance=site_internet
https://devecoles-v3.hub3e.com/landing-page/1/candidature?provenance=partenaire

Lorsqu'une Landing Page crée une ressource, une fonction récupère automatiquement l'URL de la page et en extrait la valeur associée à la clé « provenance ». Cette valeur est enregistrée dans le champ personnalisé provenance du candidat, ce qui permet à Hub3E d'identifier facilement le canal d'origine.

// Fonction appelée à la soumission du formulaire
import axios from 'axios';

axios.defaults.baseURL = 'https://api.hub3e.com';

export async function handler(event, context, callback) {
   const jwt = event.clientContext.internal_school_admin_jwt;
   const currentUserJWT = event.clientContext.current_user_jwt;

   const internalUserHeaders = { 'Authorization': `Bearer ${jwt}`, 'Content-Type': 'application/json' };
   const currentUserHeaders = { 'Authorization': `Bearer ${currentUserJWT}`, 'Content-Type': 'application/json' };

   // Interdire l'accès aux utilisateurs anonymes
   if (currentUserJWT == null) {
      throw new Error('JWT not found');
   }

   const internalUser = (await axios.get('/api/v3/me', { headers: internalUserHeaders })).data;
   const currentUser = (await axios.get('/api/v3/me', { headers: currentUserHeaders })).data;

   const queryParameters = event.payload.queryParams;
   const form = event.payload.form;
   const schoolId = internalUser.school;
   const defaultOrigin = 'Site internet';

   if (form?.CANDIDATE_PROFILE?.id == null) {
      throw new Error('"id" property must be provided in "form.CANDIDATE_PROFILE" property');
   }

   if (currentUser.role !== 'ROLE_CANDIDATE' || form.CANDIDATE_PROFILE.id !== currentUser.profileId) {
      throw new Error('No access with your rights');
   }

   await axios.patch(
      `/api/v3/schools/${schoolId}/candidate-profiles/${form?.CANDIDATE_PROFILE?.id}`,
      { cf: { "provenance": queryParameters.provenance ?? defaultOrigin } },
      { headers: internalUserHeaders }
   );

   return { status: 'OK' };
};