Folia
Planner Suite

Add a Form to Your Website

Link to your inquiry form from your website, or show it right on a page, with steps for Squarespace, Wix, Showit, WordPress, and Webflow.

There are two ways to put your inquiry form on your website:

  • Link to it. Add a button, like "Inquire", that opens your form on a page of its own. This works on every website and every plan.
  • Embed it. Show the form right on a page of your site, such as your Contact page, so couples never leave your website. Most website plans allow this.

Neither one changes anything else on your website.

You can set this up while your form is still a draft. The link and the code start working the moment you publish your form.
  1. In Folia, open your form and click Share.
  2. Under Link, click the copy button next to the link.
  3. In your website builder, add a button to the page, then paste the link as the place the button goes.

The same link works in your Instagram bio, your email signature, and anywhere else you can paste one.

Show the form on a page

  1. In Folia, open your form and click Share.
  2. Under Embed on your site, click Copy. This copies a short piece of code. You don't need to read it or change it.
  3. Paste the code into your website, following the steps for your website builder.
  1. In Squarespace, edit the page where the form should go.
  2. Hover over a section and click Add block or +, then click Code.
  3. Click the pencil icon on the new block.
  4. Paste the code into the box. Keep Mode set to HTML, and leave Display Source off.
  5. Click Save.

Squarespace only runs code like this on its Core, Plus, and Advanced plans. On the Basic plan, link a button to your form instead.

While you're signed in to Squarespace, the form may not show on your page. To check it, open the page in a private or incognito window.

  1. In the Wix Editor, go to the page where the form should go.
  2. Click Add Elements on the left, click Embed Code, then click Embed HTML. A box appears on your page.
  3. Click Enter Code on the box, paste the code under Add your code here, and click Apply.
  4. Drag the box into place and stretch it to the width you want. Then drag its bottom edge down until the whole form shows, Send button included.
  5. Switch to the mobile editor and make the box tall enough there too. See Make sure the whole form shows.
  6. Click Publish.
  1. In the Showit Design App, click the canvas where the form should go.
  2. In the toolbar at the bottom, hover over the element icon and click Embed Code. A black box appears on the canvas.
  3. Click the box. In the panel on the right, open the Embed Info tab and click the Custom Code box.
  4. Paste the code and click Save.
  5. Drag the corners of the box until the whole form fits, Send button included. If the box doesn't fit, make the canvas taller.
  6. Switch to the mobile view and resize the box there too. See Make sure the whole form shows.
  7. Publish your site.
  1. Open the page in the WordPress editor.
  2. Click + to add a block, search for Custom HTML, and click it. You can also type /html on an empty line and press Enter.
  3. Click Edit HTML, paste the code, and click Update.
  4. Click Save, Update, or Publish to save the page.

On WordPress.com, code like this needs a paid plan with hosting features turned on. Installing any plugin turns them on. Otherwise, the code disappears when you save the page.

On a WordPress site you host yourself, the code has to be added by an Administrator or an Editor. For anyone else, WordPress removes it when the page is saved.

  1. Open your site in the Webflow Designer and go to the page where the form should go.
  2. Open the Add panel (click +, or press A) and drag a Code Embed element to where the form should go.
  3. Paste the code and click Save & Close.
  4. Publish your site.

While you design, Webflow shows a gray placeholder instead of your form. To see the form, publish your site, or open Preview and turn on Enable custom code at the bottom left.

Code Embed needs a paid Site plan, or a Core, Growth, Agency, or Freelancer Workspace.

Website builders change their menus from time to time, so a button or block may be named a little differently. Look for one called Code, HTML, or Embed. If your plan doesn't include one, link a button to your form instead.

An inquiry form on the Contact page of a planner's website

Make sure the whole form shows

On Squarespace, WordPress, and Webflow, the form fits the width of your page and grows as couples fill it in. There's nothing to size.

Wix and Showit keep the box the size you draw it. A form taller than its box scrolls inside it or gets cut off. Drag the bottom of the box down until the whole form shows, Send button included, then leave a little extra room. The form grows if a couple misses a required question, since a short note appears under it.

Then do the same in the mobile view. Wix and Showit lay out phones separately, and your form is narrower and taller on a phone.

The same form on a phone, narrower and taller than on a computer

Check that it works

  1. Open the page on your published website, not in the editor. A private or incognito window shows it the way couples see it.
  2. Fill out the form with your own details and click Send.
  3. Check that your thank-you message shows, or that you land on your thank-you page.
  4. In Folia, open Contacts. You appear as a new contact. On the form's Submissions tab, Submitted from shows the website your test was sent from.
  5. To remove the test contact, click ⋯ next to it in Contacts, then Delete.

Then try it once on your phone.

If the form doesn't show, is cut off, or says "This form isn't available", see Troubleshooting.