Configuration and customization of the form iframe/embed
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.
Head to My templates
Select your template
Reach the Generation method section
Click on Create new form
Give a name to your form
Select your desired Layers which can be modified in the form
Select Embed form in the form type selection
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.
Reach the Image 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.
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
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?
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".
Add CSS : Add a percentage value for padding-top to maintain the aspect ratio of the container DIV.
And voilà 🎊, you now have a responsive form !
Create a generation form that can be embedded
Head to My templates
Select your template
Reach the Generation method section
Click on Create new form
Give a name to your form
Select your desired Layers which can be modified in the form
Select Embed form in the form type selection
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.
Reach the Image 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
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
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?
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 !
Updated on: 30/08/2022
Thank you!