Available with the following plans:
You only need to place the snippet(s) on your website once. After that, any changes you publish to your form will automatically reflect on your website.
There are two ways you can add the form to your website:
You can use one or both methods to display the form on your website.
As a widget
Copper's form can be delivered via a widget that overlays your website content – this means it will not push other elements around on your website. The widget is available on each page of your website.
You'll like the widget option because:
The form is easy for your visitors to discover and access
The code snippet is easy to place on your website
The form does not overtake any stylings or shift any elements around on your website
Be sure you have selected Widget when copying your code snippet, as shown below.
For most major content management systems, this line of code can be placed in the <head> tag (or header).
Below, we’ve provided instructions for two of the most popular CMSs, Squarespace and WordPress.
Installing the widget on your Squarespace site
First, double-check the billing plan for your Squarespace site. Squarespace provides guidance for adding custom code depending on which billing plan your site is on. This guide provides instructions for installing the Copper Forms widget on a Squarespace Business plan site using code injection.
You want the Copper widget to appear on every page of your website. To achieve this, follow the steps below to paste the Copper widget code into the header of your Squarespace site.
Open the Code injection panel in Squarespace
To navigate there from the Squarespace menu: Website > Utilities > Website Tools > Code Injection
In the HEADER section, paste the code you copied from the Copper Forms builder
If you click Preview (Command ⌘ + Shift ⇧ + P), you will see the Copper Forms widget on your website
Hit Save – you’re all done! 🥳
Installing the widget on your WordPress site
First, double-check the billing plan for your WordPress site. WordPress provides guidance for adding custom code depending on which billing plan your site is on. This guide provides instructions for installing the Copper Forms widget on a WordPress site that is on the Creator or Entrepreneur plan.
You want the Copper Forms widget to appear on every page of your website. To achieve this, follow the steps below to paste the Copper Forms widget code into the header of your WordPress site.
Install and activate the free Insert Headers and Footers plugin by WPCode on your website
This step is required by WordPress, not Copper.
Once you install the plugin, a new menu item will appear on your WordPress dashboard called Code Snippets
Navigate to Code Snippets > Header and Footer
Click the Add New button on the All Snippets page
Select the Add Your Custom Code (New Snippet) option
Add a title for your snippet, such as “Copper widget”
Paste the code into the Code Preview section
Leave the default selections of Auto Insert method and Site Wide Header location
Change the Device Type to Desktop Only
This release of Copper Forms is not yet user-friendly for website visitors on mobile devices
Click Save Snippet
Navigate to the Code Snippets page from the left-hand navigation in WordPress
Find the code snippet you just created for the Copper Forms widget and toggle the Status to on to activate the snippet
Navigate to your website URL, and you will see the Copper Forms widget – you’re all done! 🥳
Embedded on a specific page
You can also choose to display the form on a specific website page, such as a Contact page.
Be sure you have selected Embed when copying your code snippet, as shown below.
Embedding the form on a Squarespace page
First, double-check the billing plan for your Squarespace site. Squarespace provides guidance for adding custom code depending on which billing plan your site is on. The Copper form can be embedded in a code block or an embed block. Consult your web developer to select the best option for your plan, theme, and needs.
From the Squarespace menu, navigate to the desired page: Website > Pages
Click Edit in the upper left of the page preview
Hover over the content area where you want to add the form and click + Add Block. The button looks like this:
From the block options, select either embed or code based on your Squarespace plan
Once the block has been added, you can drag and drop to move the placement on the page
If you are using the embed block, double-click into the block, choose Code Snippet, and click Embed data to paste your snippet into the code box, as shown below
If you are using the code block, double-click into the code block and paste your snippet into the box. Be sure to paste over the
<p>Hello, World!</p>text that is in the box, or it will also appear on your site.
Hit Save – you’re all done! 🥳
Embedding the form on a WordPress page
First, double-check the billing plan for your WordPress site. You will need a plugin-enabled plan to embed iframe code. You'll use the Custom HTML block to embed the Copper form on your WordPress page.
From your WordPress dashboard, select Pages from the left-hand menu
Find the page where you would like to place the form, click the 3-dot menu, and click Edit
In the upper right, click the plus icon to open the block inserter. The button looks like this:
In the block selector, choose Code, as shown below
In the new block, click the < > icon, as shown below
Select Custom HTML in the transform options, as shown below
Paste your snippet in the box where it says
Write HTML..., as shown below
You can click Preview to see your form, as shown below
Hit Save – you’re all done! 🥳
Advanced: adjust the dimensions of the embedded form
If you would like your form to fit within the container on your website in a certain way, your web developer can easily adjust the dimensions of the form itself within the snippet.
<iframe src="[your unique form ID]" title="Embedded Copper Forms" width="500" height="700" frameBorder="0" ></iframe>
Simply change the values for width and/or height. The values shown are in pixels.
Have a question? Contact our Customer Success Team using the in-app chat 💬
Have a suggestion? Check out the Ideas board in our Community 👥