How to Embed a Form on Your Yola Website

Embed a fully customizable form onto your Yola site in just minutes. Cognito Forms gives you several field types, robust conditional logic, workflow automation, and more.

Yola makes it easy to get a professional website up and running quickly, but its built-in form tools are limited to basic contact fields. Embedding a form you built with Cognito Forms gives you access to conditional logic, payment collection, automated workflows, and much more, without adding complexity to your Yola site.

With Cognito Forms on your Yola website, you can:

• Build the form you actually need to operate efficiently. Instead of a bare “name, email, message” box, Cognito Forms gives you conditional logic, file uploads, e-signatures, and multi-step intake. This means your client onboarding or service request form actually collects what you need, not just a basic inquiry.
• Stop losing submissions to guesswork. Cognito Forms stores every entry in a secure, searchable dashboard alongside reliable email notifications. Important intake forms or service requests never just disappear.
• Process transactions, not just inquiries. Add native payment processing with Cognito Pay (powered by Stripe), PayPal, or Square right in the form. This turns your Yola site’s contact page into a real front door for your business.

---

How to Embed a Form on Your Yola Website: Step-by-Step

Follow these three steps to get your form live on any Yola page. You’ll configure your form’s appearance first, choose your embed code, and then paste it into a Yola HTML widget.

Step 1: Configure how your form appears on your site

Before finding your form’s embed code, take a second to configure how your embedded form looks. To access these settings, hover over the form name in the Cognito Forms sidebar and select Publish Form.

From the Form Styles tab on the Publish page, you have a few options to get your form looking how you want it to before you add it to your site:

• Customize your form’s style: Change button colors, choose a new font style, add your logo, and more.
• Field styles: This option controls the visual style of your form’s fields. You have several different options that tend to work well for most people, but you can also select Chameleon to automatically match your site’s fonts and colors. See below for more information on Chameleon mode.
• Hide form header when embedded: Check this box to hide the logo, title, and description when your form is embedded. These elements will still appear when someone visits the form via a direct URL.
• Adjust embedded form margins: Set the margin around your embedded form anywhere between 0 and 80 pixels to control spacing within your page layout.

Chameleon field styles

For the most seamless visual integration, enable Chameleon mode. It automatically adopts the surrounding page’s fonts, colors, and styles, with no CSS knowledge required.

To enable Chameleon mode:

1. From the form’s Publish page, select the Form Styles tab.
2. Expand the Field Style dropdown and select Chameleon.
3. Click Save and your form is now ready to inherit your site’s styling automatically.

Note: Chameleon field styles work only with Seamless embedding. If you plan to use an Iframe embed, see the Custom CSS section below.

---

Step 2: Copy your form’s embed code

Once your form is styled and ready, grab the code you’ll paste into Yola. Here’s how:

1. From the form’s Publish page, click the Publish Code tab.
2. Under Embed in your site, select the type of embed code you want to use.
3. Click inside the code’s text box to copy it to your clipboard.

Seamless vs. Iframe embedding: Which should you use?

The main difference between the two is how the form interacts with your site’s existing styles. In short, we recommend starting with the Seamless embed for most Yola sites. If you run into styling conflicts or slow load times, switch to the Iframe embed.

	Seamless Embedding	Iframe Embedding
Setup	Integrates the form directly into the page, making it look and feel like a natural part of your site	Loads your form inside a contained frame, keeping it visually separate from the surrounding page
When to use this	Recommended as the best option for most sites	Try this as a second option when Seamless embed causes styling conflicts or display issues
Styling	Inherits your site’s styles naturally (especially with Chameleon Mode)	Isolated from page styles; requires CSS to match your site’s styles

---

Step 3: Add the embed code to your Yola page

In Yola, embed codes are added through the HTML widget in the site editor:

1. Log in to your Yola account, open your site editor, and navigate to the page where you want to add your form.
2. From the Widgets menu, add a new HTML widget and place it where you want the form to appear on the page.
3. Open the HTML widget and paste your Seamless or Iframe embed code into the widget’s code area.
4. Save your changes, then click Preview to view the form on your site.

Quick Tip

Yola’s editor may not preview the embedded form inside the widget while editing. Save your changes, then Preview the full site to confirm the form is displaying correctly before publishing.

---

Customizing Your Form’s CSS

If the Chameleon field style doesn’t fully close the gap between your form and your site’s visual design, Custom CSS lets you fine-tune it.

Custom CSS gives you precise control of specific elements like button colors, input borders, error messages, and fonts using CSS variables or traditional selectors. On Yola, you add custom CSS to your entire site’s design, or apply it to a single HTML widget.

Add custom CSS to all embedded forms

You can add custom CSS by creating or editing a CSS theme in your site admin:

1. Go to Design and scroll down to the Themes and in-depth customization section.
2. Click Create Theme (or Edit Theme if you already have one).
3. On the opened page, click Add new CSS theme and paste your CSS code to the field. Click Activate to apply the styles to your site.
4. Save your changes.

Add custom CSS to a single form

You can add CSS to a single form by adding your variables directly in the embed code’s HTML element:

1. Open the HTML widget that you pasted your embed code in.
2. Add a <style> tag above your embed code.
3. Add your CSS variables to the text box, and close it out with a closing </style> tag.
4. Don’t forget to Save all your changes.

As you adjust your custom CSS, you can view real-time style changes by saving your changes and using the Preview option to view the form’s updated styles.

---

After Embedding: Get More Out of Your Embedded Form

Once your form is embedded onto your Yola site, take advantage of features offered by Cognito Forms that turn submissions into a fully automated business process:

• Automate your follow-up with Workflow. Set up multi-step Workflows with task assignments to the right team member, automated approvals, and defined steps for submissions to flow through. This works well for requests or inquiries that require internal review before responding.
• Send confirmation and notification emails immediately after submission. You can automate confirmation emails to the customer or internal alerts to your team, personalized with information from the customer’s submission.
• Automatically generate documents from form submissions. Cognito Forms’ Document Generation creates PDFs or Word documents from submission data, no manual document preparation. This is useful for sending order summaries, quotes, service agreements, or invoices.
• Collect e-signatures directly in your form. Add a Signature field to collect legally binding electronic signatures for contracts, service agreements, or client onboarding documents, without sending files back and forth.

Add a Form to Your Yola Website Today

Embedding a form you built with Cognito Forms onto your Yola website takes just minutes. Add an HTML widget, paste your embed code, and your form is live as soon as you publish. Now you can finally customize the form to your needs and take advantage of its built-in Workflow, payments, document generation, and more!