Want to share your Generation Form on your website? Abyssale includes several options for embedding in whatever format works best for you. This article covers embed modes and design options.
Create a generation form that can be embedded
Go to Automate page then select "Create form"
Select the desired template or create a new one
Name your form and select your desired Layers which can be modified in the form
Select Embed form in the form type selection
Click on "Create form" to activate this form for this template
Get the embed HTML
Once you have created your form in embed mode, you will find the form you have just created in the list of forms in your template or from the automate page.
Reach the form list
In the form list, click on the Setup iframe button, corresponding to the form you want
Copy the HTML, and use it wherever you want.
Customize the title and description of the splash/home page of your embed form
Note : By default, we give the template name to your title form and a simple description:
Welcome to the Abyssale Image form! Ready to generate some amazing visuals?
All your form created in embed mode will have a Home/Splash page to give context to the user who will need to generate a visual via this form.
We allow you to configure this page to better guide your users.
Reach the Image form list
In the form list, click on the pen picto button near the setup iframe button, corresponding to the form you want
Give a title to your form and a description
How to make my embed form responsive ?
By default our html form code is not responsive, so if you set the value "auto" in the height and width property it won't work.
There is however a way to make your form responsive on your website. Here is how to do it.
Add HTML : Use a container element, like <div> containing by the way the class "iframe-container" to call the css written below, and add the iframe inside it. In the iframe, You will add the id "responsive-iframe".
<div class="iframe-container">
<iframe id="responsive-iframe" src="https://forms.abyssale.com/forms/your-form-id" frameborder="0" ></iframe>
</div>Add CSS : Add a percentage value for padding-top to maintain the aspect ratio of the container DIV.
.iframe-container {
position: relative;
max-width: 100%;
overflow: hidden;
height: 800px; /* define the height of your iframe */
}
/* Then style the iframe to fit in the container div with full height and width */
#responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
And voilà 🎊, you now have a responsive form !