Vous souhaitez partager/intégrer votre formulaire de génération sur votre site web ? Abyssale propose plusieurs options d'intégration dans le format qui vous convient le mieux. Cet article couvre les modes d'intégration et les options de conception.

Créer un formulaire de génération qui peut être embed/intégré

Allez dans My templates.
Sélectionnez votre Template
Accédez à la section Méthode de génération



Cliquez sur Create new form.
Donnez un nom à votre formulaire
Sélectionnez les calques souhaitées qui peuvent être modifiées dans le formulaire.
Sélectionnez "Embed form" dans la sélection du type de formulaire.

Obtenez le code HTML d'intégration

Une fois que vous avez créé votre formulaire en mode Embed, vous trouverez le formulaire que vous venez de créer dans la liste des formulaires de votre template.

Accédez à la liste des formulaires
Dans la liste des formulaires, cliquez sur le bouton Setup iframe, correspondant au formulaire que vous voulez



Copiez le code HTML, et utilisez-le où vous voulez.

Personnalisez le titre et la description de la page d'accueil de votre formulaire intégré.

Tous vos formulaires créés en mode embed auront une page d'accueil/splashpage pour donner un contexte à l'utilisateur qui devra générer un visuel via ce formulaire.
Nous vous permettons de configurer cette page pour mieux guider vos utilisateurs.



Accédez à la liste des formulaires
Dans la liste des formulaires, cliquez sur le bouton pictogramme crayon près du bouton setup iframe, correspondant au formulaire que vous désirez



Donnez un titre à votre formulaire et une description



Par défaut, nous donnons le nom du template à votre formulaire en guise de titre et une description simple : : Welcome to the Abyssale Image form! Ready to generate some amazing visuals?

Comment rendre mon formulaire embed responsive?

Par défaut, le code HTML de notre formulaire n'est pas réactif. Par conséquent, si vous définissez la valeur "auto" dans les propriétés de hauteur et de largeur, ça ne fonctionnera pas.
Il existe toutefois un moyen de rendre votre formulaire réactif sur votre site Web. Voici comment procéder.

Ajouter du HTML : Utilisez un élément conteneur, comme <div> contenant d'ailleurs la classe "iframe-container" pour appeler le css écrit ci-dessous, et ajoutez l'iframe à l'intérieur. Dans l'iframe, Vous ajouterez l'id "responsive-iframe".

<div class="iframe-container">
<iframe id="responsive-iframe" src="https://forms.abyssale.com/forms/your-form-id" frameborder="0" ></iframe>
</div>

Ajouter du CSS : Ajoutez une valeur en pourcentage pour padding-top afin de maintenir le rapport d'aspect du DIV conteneur.

.iframe-container {
position: relative;
max-width: 100%;
overflow : hidden ;
height : 800px ; /* définit la hauteur de votre iframe */
}

/* Donnez ensuite un style à la iframe pour qu'elle s'insère dans la div du conteneur avec une hauteur et une largeur complètes */
#responsive-iframe {
position : absolute ;
top : 0 ;
left : 0 ;
bas : 0 ;
droite : 0 ;
largeur : 100% ;
hauteur : 100% ;
border : none ;
}

Et voilà 🎊, vous avez maintenant un formulaire responsive !

Mis à jour le : 30/08/2022