Adding a Form to Yola Sitebuilder+

October 27, 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.

Getting the Embed Code

Follow these steps to copy the embed code for your Yola website:

  1. In Form Builder, click on Publish.
  2. Next, click on Platforms.
Platforms tab of Form Builder Publish tab in Jotform
  1. Then, select Yola. You can use the search bar to find it easily.
Yola publish option in Platforms tab of Form Builder in Jotform
  1. In the next screen, click on Copy Code.
Yola Copy Code button in Platforms tab of Form Builder in Jotform

Embedding the Form

Once you are logged in to your Yola account, open your website in the Sitebuilder. To do so, simply click on the Edit site button on your Dashboard. Then, follow these steps to embed your form on your website:

  1. In Yola Sitebuilder, click on the blue Plus icon to open the Blocks library menu.
Add block button on the Yola Sitebuilder
  1. In the menu, click on Custom block to add it to your canvas.
Custom block under the Block library menu on the Yola Sitebuilder
  1. Then, click on the Add Widget button of the Custom block in your canvas to open the Widget library window.
Add widget button of a block in Yola Sitebuilder canvas
  1. Under the Media section, click on the Embed widget to add it to your canvas.
Embed widget in the Widget library window on the Yola Sitebuilder
  1. Next, click on the Embed Code widget in your canvas and then the Iframe Settings button in the menu that appears.
Iframe settings button of the Embed Code widget in Yola Sitebuilder canvas
  1. In the Iframe Settings window, go to the Embed Code tab and remove the default YouTube embed code.
Default embed code in the embed code tab of the Iframe settings window on the Yola Sitebuilder
  1. After that, paste your form embed code and click on the Submit button at the bottom.
Form embed code in the embed code tab of the Iframe settings window on the Yola Sitebuilder
  1. Click on the Save button at the top of the Yola Sitebuilder to apply the changes.
Save button on the Yola Sitebuilder

Adjusting the Embedded Form’s Height

The Yola Sitebuilder automatically strips out the script part of your form embed code, which is responsible for auto-adjusting the embedded form’s height. If you are embedding a long form or a form with multiple pages, with some pages longer than others, to your Yola website without the script part, your form would appear cut off at the bottom.

Adjusting the value of the Height property to 100% and the Scrolling attribute to Yes in your embed code would be the solution for this. You can make these adjustments in the Iframe settings of the Embed Code widget in Yola Sitebuilder. Be sure to click on the Submit button at the bottom of the Iframe settings window after making these changes.

Updating form embed code in the iframe settings of the Embed widget on the Yola Sitebuilder

Next, resize the Embed Code widget by clicking on it and dragging the resize control handle at the bottom downward until your form is fully shown. Don’t forget to click the Save button in Yola Sitebuilder to apply these changes.

Push Notifications for Jotform Apps
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