Adding a Form to Yola Sitebuilder+

January 29, 2024

Yola is a user-friendly website builder that empowers individuals and small businesses to create their websites effortlessly. It simplifies the website development process by offering a drag-and-drop interface, allowing users to customize layouts, add content, and integrate features in a simplified manner.

If you have a Jotform form, you can add it to Yola using their free embed method.

Getting Your Embed Code for Yola

Prepare your form’s embed code for Yola first. Here’s how:

  1. In the Form Builder, go to the Publish tab.
  2. Click Platforms on the left panel.
  3. Search for and click Yola from the list.
Platforms section of the Jotform Form Builder showing Yola as 3rd party publish options
  1. Now, copy the embed codes by clicking the Copy Code button. Proceed to the next part after this.
Copy Code button in Yola embed option

Adding a Form to Yola

This method uses the custom block and embed widget. First, choose whether to add a new or edit an existing page. To add the form:

  1. In Yola’s Sitebuilder, click the Add a Block icon.
  2. Choose Custom Block from the list as shown below:
Yola Add a Block option
  1. Click the Add Widget icon on the Custom Block canvas.
Yola Add Widget icon
  1. Scroll down to the Media section and choose the Embed option.
Yola Embed Widget
  1. You’ll see a default content. You must edit it by clicking the Iframe Settings icon, as shown below:
Yola Iframe Settings in Embed Widget
  1. Paste your form’s embed codes in the Embed Code box.
  2. Click the Submit button to save your changes.
Embed Code box in Iframe Settings of Embed Widget

Adjusting Your Form’s Height in Yola Embed Widget

The form is displayed on the page after you click the Submit button in the Iframe Settings. However, you’ll notice that Yola removed the script part of the iframe. That script controls the form’s height. If you have a long form or your form has page breaks, it will appear significantly cut at the bottom. To fix this, you must adjust the following values from the iframe embed codes through the Iframe Settings of the Embed Widget:

  • Height — Double the value. For example, from 539px to 1078px
  • Scrolling — Set it to Yes.
Height Value in form's iframe embed code

Lastly, you must also adjust the height of the Embed Widget by clicking the Embed Widget and using the resizer tool at the bottom. Here’s a short GIF of that step:

GIF of adjusting height of the Embed Widget
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • FitnessPro - Profile picture
  • cvonnieda - Profile picture
  • amirhafezi - Profile picture
  • javiervg - Profile picture
  • tupperwareconsultant - Profile picture
  • LorraineEsposito - Profile picture
  • aytekin - Profile picture
  • aytekin - Profile picture
  • smartmove - Profile picture
  • RobeD4love - Profile picture
  • immwebmaster - Profile picture
  • potpot213 - Profile picture
  • skoorey - Profile picture
  • michaellasalle - Profile picture
  • coffea - Profile picture
  • aytekin - Profile picture
  • c3rb - Profile picture
  • aytekin - Profile picture
  • leecassingham - Profile picture
  • shinichi09 - Profile picture
  • RayLee - Profile picture
  • help566 - Profile picture
  • oktocom - Profile picture
  • Ricks62346 - Profile picture
  • onderunal - Profile picture