How to add form code to your website
In this article you'll learn how to:
- Get the code of your form
- Add your form to a Wix site
- Add your form to a Blogger site
- Add your form to a Squarespace site
- Add your form to a GoDaddy site
- Add your form to a WordPress website
- Add your form to a Google Sites site
- Add your form to a Shopify site
- Add your form to a Niceboard site
- Add your form to a Weebly website
We offer in-line forms, as well as hello bar forms, slide-in forms and pop-up forms.
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)
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 "Settings" in the "HTML Embed" section on the left-hand side.
Drag and drop the new gadget to where you want it to appear. Then save the layout.
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.
Go to the GoDaddy website builder and click “Add Selection” where you want your sign-up form to be embedded.
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.
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”.
That’s it, your form is displayed on your page!
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.
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.
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.
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.