How to Embed a Form on Your SITE123 Website

Add unlimited fields, conditional logic, and workflow automation to your SITE123 site by embedding a fully customizable online form.

SITE123 is a beginner-friendly website builder, making it easy to launch a professional site without any technical experience. Its built-in form tools cover the basics, but embedding a form built with Cognito Forms opens up a much wider range of options, from conditional logic and file uploads to payment collection and automated follow-up.

Here’s what’s different when you use Cognito Forms for your SITE123 website’s embedded forms:

• No more hitting a wall at 5 fields. Cognito Forms doesn’t cap what you can ask, so client intake, patient forms, and service requests can actually collect everything you need, not just a name and a one-line message.
• Build a form that thinks for itself. With conditional logic, calculations, e-signatures, and file uploads, your SITE123 site can run a real intake process.
• Get paid without leaving the form. Accept deposits, service fees, or full payments right at submission with Cognito Pay (powered by Stripe), PayPal, or Square.

---

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

Follow these three steps to get your form live on any SITE123 page. You’ll configure your form’s appearance first, copy your embed code, and then paste it into a Custom Code element in the SITE123 content editor.

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 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, it’s time to grab the code you’ll paste into SITE123. 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 SITE123.

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 SITE123 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 SITE123

In SITE123, embed codes are added through the Custom Code element in the content editor:

1. Log in to SITE123 and navigate to the page where you’d like to embed your form. If you don’t have a suitable page yet, add a new Content page from the text category.
2. Click the + sign that appears when hovering over where on the page you want to add the form.
3. From the menu that appears inside the Content Editor, select the Custom Code option.
4. Find the “Custom Code” Page in the left sidebar, and click Edit.
5. Paste your Seamless or Iframe embed code into the Custom Code textbox that appears.
6. Save your changes to the element, and you can typically preview what your form looks like on the page right inside the editor.

Quick Tip

The Custom Code option is available on Content pages in SITE123. If you don’t see it in the menu bar, check that you’re editing a Content page. Other page types may not support custom code elements.

---

Customizing Your Form’s CSS

If Chameleon mode doesn’t fully close the gap between your form and your SITE123 site’s design, you can add custom CSS to adjust specific elements, like button colors, fonts, input borders, error messages, and more.

On SITE123, the most straightforward way to add CSS to an embedded form is directly within the Custom Code element:

1. Click on the same Custom Code element with your form’s embed code.
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.

This applies CSS specifically to the form on that page without affecting the rest of your site’s styling. As you adjust your CSS, save your changes and refresh the browser to view updates in real time.

---

After Embedding: Get More Out of Your Embedded Form

Once your form is embedded onto your SITE123 website, 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 SITE123 Website Today

Embedding a form you built with Cognito Forms onto your SITE123 website takes just minutes. Open the Custom Code element, paste your embed code, and your form is live as soon as you publish. From there, add automated emails, workflow automation, and payment collection to build a process that does the work for you.