How to add form code to your website

In this article you'll learn how to:

We offer in-line forms, as well as hello bar forms, slide-in forms and pop-up forms.

Your website must support JavaScript for the forms to work.

Get the code of your form

When you've finished creating your form, click on the "</> Add to your website" link in the upper right corner. You will see a pop-up containing the code to add to your website.

Depending on your ability to edit the website code, there are three possible scenarios to add the form to it:

  • If you manage your website's code, you can add it there yourself. Inline forms should go inside the body tag, wherever you want to display the form. Hello bar forms, slide-in forms and pop-up forms should go just before the closing body tag.
  • If your website has a dedicated webmaster, you can forward the code to them, and they can publish the form for you.
  • If you created your website using a builder tool, you could contact the support of your website builder to ask for instructions specific to their tool.

Follow the guidelines below to see how to add your form to specific sites:

Wix (Classic editor)

As you can only add HMTL code to your Wix website, our subscription forms won’t be compatible with it, as they’re in the form of JavaScript code. However, there is a workaround that will let you gather your subscribers from your Wix website directly to your EmailOctopus list.

It’s possible by creating a landing page and embedding its address to your Wix website.

In your Wix website editor, click on the “Add Elements” button, choose “Embed Code” from the menu and click on the “Embed a website” button.

This will open the window in which you can paste your landing page’s address. You can see our guide on how to find your landing page’s URL here.

Click “Apply”, and your landing page will embed behind the window for you to adjust.

Wix (ADI editor)

Click "Add" in the top banner, then select "Section to Page". Scroll down to "HTML Embed" and pick your preferred section design. Drag it onto your page.

Click "Settings" in the "HTML Embed" section on the left-hand side.

Pick "HTML Code" and paste your EmailOctopus form's HTML code. The form will appear on your page wherever you've placed the HTML Embed element.

To integrate a hello bar form, a slide-in form or a pop-up form to your Wix website, you need a connected domain, which means that this feature is only available to Wix premium users. You can find Wix’s support article here if you require additional information. 

Blogger

Copy the code of your sign-up form. In Blogger, choose "Layout", then "Add a Gadget".

Pick the "HTML/Javascript" gadget.

Paste the code into the Contents field. Enter a title, if you want the gadget to have one and press "Save".

Drag and drop the new gadget to where you want it to appear. Then save the layout.

If you also have a mobile theme set up for your blog, and you want this gadget to show up on it, then you need to enable the gadget specifically for it.

Squarespace

To embed any code, you need to be on Squarespace Business or Commerce plan.

Edit your page and add a new code block.

Get your EmailOctopus form code – you can access it by clicking the “</> Add to your website” link and copying the code.

Paste the code into the code block on Squarespace.

GoDaddy

Go to the GoDaddy website builder and click “Add Selection” where you want your sign-up form to be embedded.

Look for “HTML” and click “Add”.

Get your EmailOctopus form’s code – click on “</> Add to your website” and copy the code from the pop-up.

Paste it in the “Custom Code” box within the right-hand editor in your GoDaddy website builder. You can add a title, set up a custom height and align your form to the centre.

You might need to exclude the reCAPTCHA from your form, as it can cause errors. Instead, we recommend setting up double opt-in on your list to protect it from bot entries.

WordPress

In WordPress, you can either use the JavaScript code of a form you created in your EmailOctopus account and embed it in the code of your page or you can add a form using our WordPress plugin. Below you'll find guidelines on how to embed an EmailOctopus form:

You'll need a Business or eCommerce WordPress plan to use JavaScript forms and plugins.

Go to the page you’d like your form to be embedded on, click on the plus icon to add a new element and pick “Custom HTML”.

Paste your form’s JavaScript code and click “Update” in the top right corner.

That’s it, your form is displayed on your page!

Google Sites

As Google Site’s iFrames might block some of our forms’ code, we highly recommend using specifically our slide-in forms for your Google website, as this one seems to work best.

Open your Google Site’s editor and click the “Embed” button you’ll see on the right-hand side.

Choose the “Embed code” option and paste your form’s code into the field.

Click “Next”, and you’ll see a preview of what your form will look like. It might take a couple of seconds to load.

Click “Insert”, adjust the form field’s size if you wish so, and you’re ready to Publish your page.

Shopify

We highly recommend using our hello bar, pop-up or slide-in forms on your Shopify page for the best results.

Open the “Online Store” tab visible on the left side of your admin page, then click on the three dots button next to your theme’s name and choose the “Edit code” option.

Add your form’s code to the HTML and click “Save” in the upper right corner.

Niceboard

We highly recommend using our hello bar, pop-up or slide-in forms on your Niceboard.co page.

Click on the “Set appearance” button visible in your dashboard.

Find the “Other” tab on the left side of the editor and choose the “Custom code” option. Paste your form’s code into the <body> tag and click on the “Save custom code” button below.

Weebly

While in your "Overview" dashboard, click on the “Edit site” button visible on the right-hand side.

Search for the “Embed code” block in the “Individual elements” section and drag the block onto your website’s layout. Next, click on the added block and choose your form’s position (Inline forms only), then click the “Edit Custom HTML” button.

Paste in your form’s code and exit the window. You might see a preview of your form. Note that your form may look a bit wonky in the editor, and the preview’s colours might be different from the original colours of your form - it’s only the preview.

Close the preview window and click on the “Publish” button visible on the right-hand side. 

You can go ahead and follow the link to your Weebly website to review your added form.

Still need help? Contact Us Contact Us