How to Embed a Form on a Pagecloud Website

Add a contact form, service inquiry, or order form to your Pagecloud site in minutes. Paste your embed code directly into Pagecloud’s Embed element and you’re ready to go.

Pagecloud is a design-forward website builder that gives you precise control over how your site looks and feels. Its built-in form tools are basic, but embedding a form you built with Cognito Forms takes just a few minutes. Not only is it fast, but you’ll end up with a fully functional, customizable form that fits right into your design, without compromising the clean look Pagecloud is known for.

With Cognito Forms on your Pagecloud site, you can:

• Turn your contact form into an actual intake process. Cognito Forms lets you build multi-step forms with conditional logic. This means a prospective client answers a few questions, and the form adapts in real time, collects exactly what you need, and automatically routes that information into your workflow. No inbox-checking, no copy-pasting into a spreadsheet.
• Collect payments right inside your forms. Whether you’re taking a deposit, selling a service package, or collecting a registration fee, Cognito Forms has native payment processing built in. Your form that lives on your Pagecloud site can also close your transaction, with Cognito Pay (powered by Stripe), PayPal, or Square.
• Get the paperwork done automatically. When someone submits a form, Cognito Forms can generate a filled-out PDF or Word document on the spot. For law firms, healthcare practices, agencies, and other service businesses, that’s hours of admin work removed from the process entirely.

---

How to Embed a Form on Your Pagecloud Site: Step-by-Step

Follow these three steps to get your form live on any Pagecloud page. You’ll configure your form’s appearance first, copy your embed code, and then paste it into Pagecloud’s Embed app.

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

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

Pagecloud’s editor makes it easy to paste your embed code directly into a single element on your page. Here’s how:

1. Log in to your Pagecloud account and open the editor for your site.
2. Navigate to the page and section where you want to add your form.
3. From the left sidebar, open Apps.
4. Go to the Generic category and select Embed.
5. Drag the Embed element to where you want the form to appear on your page.
6. Paste your embed code in the textbox that appears on your screen.
7. Click the element’s Save & Close button and then Save the site’s overall changes, too.
8. Select the Save button dropdown’s Preview option to see how your form looks on the page.

Quick Tip

After pasting, use Pagecloud’s drag-and-drop handles to fine-tune the form’s position and size on the canvas. This gives you the same precise layout control you’d use for any other element on your Pagecloud site.

---

Customizing Your Form’s CSS

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

On Pagecloud, you can add custom CSS through the built-in code panel in the editor sidebar. This allows you to add styles that apply across your entire page or site without leaving the Pagecloud editor.

To add custom CSS to your embedded form in Pagecloud:

1. Click on your Embed element that is on your page.
2. In the right sidebar’s settings, click the ellipsis (three dots) to access the object’s Advanced settings.
3. Select CSS Selectors and add your custom CSS in the textbox.

Alternatively, you can add a <style> tag directly alongside your embed code in the canvas code element, which applies CSS only to that specific form on that page.

As you adjust your custom CSS, you can view real-time style changes by saving and then previewing your changes.

---

After Embedding: Get More Out of Your Embedded Form

Once your form is live on Pagecloud, Cognito Forms gives you tools to turn submissions into a fully automated business process.

• Automate your follow-up with Workflow.
  Set up multi-step Workflows to assign tasks to the right team member, trigger approval processes, or move submissions through defined steps automatically. This works well for requests or inquiries that require internal review before a response goes out.
• Send confirmation and notification emails automatically.
  Configure email notifications to be sent immediately after a form is submitted, such as confirmation emails to the customer and internal alerts to your team. You can personalize the content with information from the customer’s submission and set up conditional emails that send different messages based on what someone selected. No manual effort on your end, and your customers get immediate reassurance.
• Generate documents from form submissions.
  Use Cognito Forms’ document generation feature to automatically produce PDFs or Word documents from submitted data. This is useful for sending order summaries, quote confirmations, service agreements, or invoices directly from your form without preparing documents manually.
• 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 Pagecloud Site Today

Embedding a form built with Cognito Forms to your Pagecloud site takes just minutes. Paste your embed code into Pagecloud’s Embed element, position it where you want it, and your form is live. From there, layer on workflow automation, email notifications, and payment collection to build a process that runs itself, while your site keeps looking exactly the way you designed it.