NOTE: This guide is provided as a courtesy and may not reflect the most recent version of Zenfolio. Some Zenfolio Site Presets, themes, or configurations may interfere with embedding your lead capture. Dubsado does not offer support related to your Zenfolio website beyond this article.
This article will guide you through the steps of embedding your Dubsado lead capture form on your Zenfolio website. Please note that Zenfolio does not allow you to embed content on Built-In Pages. You will need to create a Custom Page to embed your form.
For the most up-to-date instruction, check out the article from Zenfolio's help center:
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.
- You'll need a Custom Page on your Zenfolio site where you can embed your form.
Embedding on a Zenfolio Custom Page
Open the page where you'd like to embed your lead capture form in Zenfolio to edit. Click Embed in the top toolbar of the Content Field.
In the Embed popup window, paste in your lead capture iframe Code, and click Preview. (Not sure where to find the code for your form? Check this article.)
Adjusting the iframe Code
When you first click Preview, you may notice that the lead capture form does not show up or shows up as a very thin line! We need to make a few adjustments to the embed code so that the lead capture will display correctly on Zenfolio.
Find the following phrase in the embed code:
You can see it highlighted in the screenshot below:
Directly in the Zenfolio Embed popup where you pasted the code, change that phrase to:
You can change the default "width" value of 944px if you would like to make the form wider or narrower.
Once you change the code, click Preview again and you will see the entire form displayed.
Next, click on the Set Layout tab and adjust the alignment of your form if necessary:
When you're finished, click INSERT in the bottom right corner to embed the form into your page.
SAVE & PREVIEW to see the form in action! If there is too much space at the top or sides of your form, you may want to add a code block element to your lead capture form to adjust margins and padding.