Adding a lead form to a Wix site
Your lead form is a snippet of code you paste into your own website, so it sits on your page, in your design, with your wording. This article covers the Wix side of that: which element to use, how to size it, and the two Wix behaviours worth knowing before you publish.
Build the form first. Capturing leads with a form covers choosing the fields, wording it in your voice and setting where submissions are emailed. Come back here once you have a form you're happy with.
Copy the snippet from 1pm
- Go to Leads > Lead Types and open the form you want to embed.
- Open the Embed code section at the bottom of the page.
- Click Copy snippet.
The snippet is a few lines: an iframe that loads your form, a small script that sizes it to fit, and a "Powered by 1pm" credit line. Copy all of it.
Paste it into an embed element
In the Wix Editor:
- Edit the page you want the form on.
- Click Add Elements (the plus), then Embed Code, then Embed HTML. In Wix Studio the same element is under Add, then Embed, then Embed HTML.
- Drag the element onto the page and click Enter Code.
- Choose Code rather than Website address, paste the 1pm snippet, and click Update.
- Drag the element's edges to the width and height you want, then Publish.
You don't need a developer plan or the custom-code settings for this. The embed element is part of the standard editor.
Size the box yourself
This is the main difference between Wix and other builders. Wix runs your snippet inside a box you draw, and that box keeps whatever height you dragged it to. The form does not push it taller.
So make the box generously tall to start with, publish, look at the live page, then come back and trim it:
- Too short and the form gets its own scrollbar inside the box, which visitors will miss.
- Too tall and there's blank space under the last field.
Around 800 pixels suits a standard form with the default fields. A short form needs less, and a form with several custom fields needs more. Set the width by dragging the box too; the snippet fills whatever width it's given, so there's no need to edit width:100% in the code.
Wix keeps separate sizes for desktop and mobile, so switch to the mobile editor and check the height there as well. A form that fits on desktop is usually taller on a phone, where the fields stack.
The editor shows a placeholder, not your form
While you're editing, Wix draws a grey placeholder box in place of embedded code. That is normal and does not mean anything is broken. Use Preview, or publish and open the live page, to see the real form. A private browser window is the closest thing to how a visitor sees it.
Test the redirect, or skip it
1pm can send a visitor to a thank-you page on your own site after they submit, set under Appearance & behaviour on the lead type. Wix runs embedded code in a sandbox that can stop a page inside it from navigating the whole browser tab, so this is worth testing rather than assuming.
Submit the form on your published site and watch what happens. If your thank-you page fills the browser, you're set. If the form shows its thank-you message with a Continue link instead, the sandbox stopped the redirect. Visitors can still click Continue to reach your page. If you would rather they never see that step, clear the Redirect after submit field and use the built-in confirmation: the Form wording section lets you write your own thank-you heading and message, which shows in place of the fields and needs no navigation at all.
Make it fit your page
The form is transparent on purpose, so it takes the colour of the Wix section behind it. The fields and text are designed for a light background, so put it on a light section rather than a dark or heavily patterned one.
If you'd rather not embed at all
Every lead type has its own web address, and the Open in new tab button next to Copy snippet opens it. Copy that address from your browser and use it on a Wix button or menu link. Leads arrive exactly the same way; the only difference is the visitor leaves your site to fill the form in. This also sidesteps the sizing and redirect points above, so it's a reasonable choice if you just want the form working today.
Test it before you tell anyone
Fill the form in on the published page and send yourself a real lead. Check three things: it arrives in your Leads inbox tagged with the right lead type, the notification email reaches the address you set, and the visitor sees the thank-you message or redirect you expect. Delete the test lead afterwards.
If nothing arrives, check that Form is live is switched on for that lead type. A form that's switched off shows your email address in place of the fields rather than an error.
Related articles
- Capturing leads with a form covers building the form itself: fields, wording, colour and notifications.
- Adding a lead form to a Squarespace site covers the same job on Squarespace.
- Adding a lead form to a WordPress site covers the same job on WordPress.
- Working the leads inbox covers what to do with submissions once they land.
- Auto-reply to new leads covers answering a lead the moment it arrives.