NOTE: This guide is provided as a courtesy and may not reflect the most recent version of Squarespace. Some Squarespace themes may interfere with the lead capture form. Dubsado does not offer support related to your Squarespace website beyond this article.
This article will guide you through the steps of embedding your Dubsado lead capture form on your Squarespace website. For the most up to date instruction, check out the help article on embedding custom code from Squarespace:
Before You Start
- You should have already created and saved your lead capture form in Dubsado.
- If you're not familiar with how sharing and embedding your lead capture works, please review this article first.
- A Squarespace Business Plan is required.
Embedding in the Squarespace Editor
Open the page for editing where you'd like to embed your lead capture form in Squarespace and click the Add icon in the upper right corner.
We will be using the Code block, which can be found under the More category. Click on this block to add it to your page.
Paste your lead capture iframe code into the editor that appears and click Apply. The source type in the dropdown should be "HTML." (Not sure where to grab the code? Check this article.)
Save your page so that you can open it in Preview mode. Before previewing, click "Preview in Safe Mode" for best results.
Hover over the top left corner of your page design until you see the arrow icon. Click to expand the page into Preview mode. In preview mode, you want to make sure that you can see the entire form, including the send button at the bottom.
As you can see in the example above, Squarespace is not displaying the entire form. The form fields and Send button are cut off and we see a scroll bar within the page. This is a common issue when embedding in Squarespace and we have two steps to fix it:
Step 1: Turn off Ajax loading
In the Squarespace main menu, navigate to DESIGN >> SITE STYLES.
On the Site Styles settings page, under SITE: LOADING, check to ensure that "Enable Ajax Loading" is turned off.
This may resolve the issue, or your theme may not have had Ajax Loading enabled in the first place. If the entire form is still not appearing, continue to Step 2.
Step 2: Adjust the iframe Height
Squarespace has a default height for its Code block that does not always work for the Dubsado lead capture form. We need to add a minimum height property to the lead capture iframe embed code to force Squarespace to display the entire form.
Look for the following phrase in the lead capture embed code:
Change this directly in the Code block editor (where you originally inserted the code on your page) to read:
style="width:1px; min-width:100%; min-height:1000px;"
This will force the height of the form to be 1000px. Apply and save your changes, then check the page preview again to verify that you can see the entire form, including the SEND button at the bottom.
You may need to further adjust the height depending on the length of your form. Just increase or decrease the min-height value of "1000" until the form displays correctly.
You may also want to add a code block element to the lead capture form in Dubsado to adjust margins and padding. If you change the margins and padding, you will need to re-adjust the min-height value in the embed code.