How to embed external forms on Squarespace Using the Code Block
In this video, I will show you how to embed forms from external tools on your Squarespace site using two examples.
The first is a simple form and the second is a more complicated HTML form with fields that map to a CRM system. You can put almost any kind of form into Squarespace using this method.
Resources Links
All my discounts and resources - https://www.simplywhytedesign.co.nz/resources
My discount code to receive 10% off your first website: PARTNER10
Use the Code HERE: http://bit.ly/get10offsquarespace
Sign up for a free trial HERE: http://bit.ly/freesquarespcetrial
How it all works
If you use any kind of online tool you will know that not everything integrates with everything and that’s only because each different tool is built slightly differently and made for different purposes. However, there are ways to get your online tools and widgets to connect to each other by using a little bit of code and the code block.
For example, on my own website, I use Dubsado which has a code that I’ve put into my website using the code block. You can see it on my contact page.
What is the Squarespace code block?
The Squarespace code block is a block that you can use to place custom code to a page, blog post, sidebar, footer, or another content area. Code Blocks are good options if you want to embed third-party widgets or external tools to your website.
How it works
When you have a third-party widget or external tool most likely they will provide you with a code.
That code is a raw version of the form or widget.
When you place that code into your code block on Squarespace it will render the widget or form as if it was seamlessly a part of your website - but it’s connected to the external tool or widget.
How to embed a simple form
This example shows you how you can insert a simple form into Squarespace using the code block. This will most likely be the main way that you can connect your widget or external tool. To get your code you will need to get it from the external tool or widget.
Step 1 Get the code
Most external tools or widgets will provide you with the code. Grab that code and put it on a Google doc for safekeeping.
Step 2 Place a code block on a page
You want to place the code block on a page where you would like your external tool or widget to show
Step 3 Check it’s working
Wait for the code to render and make sure that you test the form or widget. There is nothing worse than putting in some great code and you haven’t made sure it works properly. You may need to check your website without viewing it in the Squarespace editor. So open a new browser and visit your website.
How to embed an HTML form that maps to a CRM
Sometimes you may need code that is a little more detailed and in this example, I show you how an HTML form connects to an external CRM can be embedded into Squarespace.
How this code works
When you have HTML that maps to a CRM system you can’t expect the website to make the changes because there are no website settings to change the form. A
You are putting external code into the website that is specific to that CRM so if you need to make alterations the code is where it needs to be done or you need to make changes in the external tool itself.
Each piece of code is mapped to a form field that is in the CRM. You can see in this example this code here is for “firstName”
Which maps to the field First Name in the CRM.
Step1 Get the code
Like in the first example your CRM will be able to provide you with the main code that needs to go into the code block. They may also provide you with some CSS which is code you can use to style the look of the form. Make sure to put the code on a Google doc for safekeeping.
Step 2 Place a code block on the page
Just like in the simple example we are going to do the same thing. Place a code block on the page and insert the code.
Step 3 check it’s working
Just like in the simple example make sure that everything is working correctly. You may need to look at your website without the Squarespace editor.⠀⠀⠀⠀⠀⠀⠀⠀
How to add or remove fields
Remember the website can’t make the changes you need to make changes to the code itself.
To add a field you will need to get the code from the CRM.
Open the CRM form>Right Click>Inspect>Copy the Field Name
Head back over to your Google Doc and paste the code at the top.
Then look for code that makes sense.
Copy and paste that code and update it so it matches the new form field.
Now you have your code ready, look for a place in the overall main code that makes sense for it to go. Copy and paste you new code in an area where it fits.
Once you have done that all you need to do is put the new code into the code block on Squarespace and test it.
*Tip Code can be a bit sensitive so make sure to keep backup copies in case you make a mistake. If you have one character out of place most likely the code won’t work.
Let’s work together
Got an amazing business idea you need help bringing to life? Time to refresh your existing brand? Ready to get serious and connect with your customers with a stunning Squarespace site?
PIN ME!
