How to Embed a Form on Your Weebly Site

Add a contact form, order form, or service request to your Weebly site in just a few minutes, no coding required.

Weebly (now part of Square Online) makes it easy to launch a professional website quickly, but its native form tools are limited to basic contact and newsletter fields. Embedding a form with Cognito Forms gives you access to advanced data collection, conditional logic, payment processing, and workflow automation, without ever leaving your Weebly editor.

Here’s what’s different when you use Cognito Forms for your Weebly site’s embedded forms:

• Your form submissions actually reach you. Cognito Forms stores every entry in a secure, searchable dashboard and sends reliable email notifications, so you’re never left wondering if a client inquiry, intake request, or service form slipped through the cracks.
• You can finally build the form your process actually requires. With conditional logic, e-signatures, file uploads, and automatic document generation, your Weebly site can handle real workflows and not just contact forms.
• Your data goes where your business runs. Instead of submissions sitting in a dashboard with nowhere to go, Cognito Forms connects to the tools you already use. A new inquiry can automatically update your CRM, trigger a follow-up, or kick off a multi-step approval process without anyone copying and pasting.

---

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

Follow these three steps to get your form live on any Weebly page. You’ll start by configuring how the form looks, choose your embed code, and then paste it into Weebly’s Embed Code option.

Step 1: Configure how your form appears on your site

Before grabbing your embed code, take a moment to configure how your form looks when embedded. To access these settings, hover over the form name in the Cognito Forms sidebar and select Publish.

From the Form Styles tab on the Publish page, you have a few options to get your form looking right before you go live:

• Customize your form’s style: Change button colors, choose a font style, add your logo, and more.
• Field styles: Controls the visual style of your form’s fields. You have several different options that tend to work well for most people, but 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 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. Your form will now 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 embed code you’ll paste into Weebly. 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. This is what you’ll paste into Weebly.

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 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
Best Used When	Recommended for most sites	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 Weebly page

No matter which embed code you choose, you’ll add it the same way in Weebly:

1. Log in to your Weebly account and open the editor for your site.
2. From the left-hand menu in the site builder, click Add Section.
3. Select Embed Code and then click Add.
4. Paste your Seamless or Iframe embed code into the Code area at the top of the section’s settings.
5. Customize the section’s layout, change or hide the text above your embedded form, and more under the section’s Customize options
6. When you’re finished, click Done to save your work.

Quick Tip

Weebly’s editor may not preview your embedded form in edit mode. Publish your changes and visit the live page to confirm the form is displaying correctly before sharing it with visitors.

---

Customizing Your Form’s CSS

If Chameleon mode doesn’t fully close the gap between your form and your Weebly site’s design, Custom CSS gives you precise control over specific elements—button colors, fonts, input borders, error messages, and more.

On Weebly, you can add custom CSS through your site’s theme editor. The exact location varies depending on whether you’re using the traditional Weebly editor or the modern Square Online editor.

For the traditional Weebly editor:

1. Go to your site dashboard and click Edit Site.
2. Click Theme and then click Edit HTML/CSS at the bottom of the left sidebar.
3. Under the Styles folder, click on main.css.
4. Scroll to the bottom of the file and paste your Custom CSS.
5. Save your work and click Publish when you’re ready to go live.

For the modern Square Online editor:

1. Open your Website settings and select Tracking Tools.
2. Find the Add custom header code and click Add new code.
3. Add your CSS to the Custom code area, wrapped in <style> tags. This code will be added to every page, so be aware of this if you have embedded multiple forms throughout your site.
4. Save your changes.

---

After Embedding: Get More Out of Your Form

Once your form is live on Weebly, Cognito Forms gives you the tools you need to 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 Weebly Site Today

With Cognito Forms, embedding a form on your Weebly site takes only minutes. Whether you’re collecting service inquiries, processing payments, or building out a client intake workflow, your form is live as soon as you paste the embed code. From there, layer on workflow automation, email notifications, and payment collection to build a process that works for your business.