Skip to content
SeasonlyHelp centerOpen Seasonly

Put a form on your website

Share a form's link, or paste one line of code so the same form shows inside a page of your own website.

Open Publish

Steps

  1. Step 1. Open Form and choose Publish.

    Step 1: Open Form and choose Publish. The part to press is outlined in green.

  2. Step 2. Make sure Take requests is on. The form only shows on your website while it is live.

    Step 2: Make sure Take requests is on. The form only shows on your website while it is live. The part to press is outlined in green.

  3. Step 3. Under Add it to your website, turn on Allow the form on other websites and press Save changes.

    Step 3: Under Add it to your website, turn on Allow the form on other websites and press Save changes. The part to press is outlined in green.

  4. Step 4. Press Copy beside the one line of code that appears.

    Step 4: Press Copy beside the one line of code that appears. The part to press is outlined in green.

  5. Step 5. In your website builder, add an HTML or code block where the form should go and paste the line in. Then publish that page.

  6. Step 6. Open the page on your website and check the form shows and fits, on a phone too.

    A sample lawn-care website with the booking form embedded by one line.
    A sample lawn-care website with the booking form embedded by one line.

Share a link instead

No website needed. The link opens the same form.

  1. Step 1. On Publish, press Copy under Your form's address. Or press Share at the top of any form page.

    Step 7: On Publish, press Copy under Your form's address. Or press Share at the top of any form page. The part to press is outlined in green.

  2. Step 2. Paste it into your Google profile, your Facebook page or your own emails.

Step by step for your website builder

Open Width, website builders and help, then Put it on your website, step by step. In short:

  1. Step 1. Open Width, website builders and help under the line of code.

    Step 9: Open Width, website builders and help under the line of code. The part to press is outlined in green.

  2. Step 2. Open Put it on your website, step by step and find your builder.

    Step 10: Open Put it on your website, step by step and find your builder. The part to press is outlined in green.

  3. Step 3. WordPress: edit the page, press the plus, choose the Custom HTML block, paste the line and press Update. WordPress.com strips scripts below a Business plan.

  4. Step 4. Squarespace: edit the page, add a Code block, paste the line, untick Display Source and press Save. Code blocks need a Business plan.

  5. Step 5. Wix: press Add, then Embed Code, then Embed HTML. Paste into the Code box, set the box about 900 tall, and press Publish.

  6. Step 6. GoDaddy Website Builder, Webflow and Shopify: the same section lists their clicks. Each is an HTML, Embed or Custom Liquid block, then Publish or Save.

Another form's link and code

With more than one form, each has its own link and its own line of code.

  1. Step 1. Open Forms and press Share on the form's card.

    Step 15: Open Forms and press Share on the form's card. The part to press is outlined in green.

  2. Step 2. Press Copy link to share it, or Copy code for the line to paste on your website. The line names the form, so each form can go on its own page.

    Step 16: Press Copy link to share it, or Copy code for the line to paste on your website. The line names the form, so each form can go on its own page. The part to press is outlined in green.

  3. Step 3. A form only shows once it is on. A new form starts as a Draft.

Someone else looks after your website

  1. Step 1. Open Width, website builders and help, then Hiring someone to do it? Send them this.

    Step 18: Open Width, website builders and help, then Hiring someone to do it? Send them this. The part to press is outlined in green.

  2. Step 2. Press Copy message and send it to them. It holds the line and a longer version for sites that block scripts.

    Step 19: Press Copy message and send it to them. It holds the line and a longer version for sites that block scripts. The part to press is outlined in green.

Change the width, or use the longer code

  1. Step 1. In Width, website builders and help, set Form width to A maximum width and type the Maximum width in pixels (320 to 1600).

    Step 20: In Width, website builders and help, set Form width to A maximum width and type the Maximum width in pixels (320 to 1600). The part to press is outlined in green.

  2. Step 2. Copy the line again. It now carries that width.

  3. Step 3. If your website strips script tags, copy the longer code at the bottom of the same section instead.

    Step 22: If your website strips script tags, copy the longer code at the bottom of the same section instead. The part to press is outlined in green.

Show the full form or the Hero card

The last step of a form (Put it on your website) and the Publish page both give you two codes. Paste one, the other, or both. Each code shows its own version.

  1. Step 1. Copy the Full form code to show the whole form. It has data-layout="page" in it.

  2. Step 2. Copy the Hero card code to show the compact card. It has data-layout="hero" in it.

  3. Step 3. Add data-position="left", "middle" or "right" to the Hero card code to place the card in the space it is given. Without it, the place you chose under Name and look is used.

  4. Step 4. Add data-ground="#1f1f1f" (the colour behind the form, as six letters or numbers after a hash) when the form sits over a video or a photo. The form then picks light or dark text to suit it. Without it, Seasonly looks at your page's background colour.

  5. Step 5. The overlay needs the one-line code. If your website uses the longer iframe code, the form opens in place instead of over the page.

If this, then that

If the form does not show on your website
Check Take requests and Allow the form on other websites are both on, and that you published the page in your website builder.
If your website builder removes the line or shows it as text
It blocks scripts. Copy the longer code at the bottom of Width, website builders and help instead, or use a code block on a plan that allows it.
If the form is cut off on Wix
Wix does not let the form grow. Drag the embed box to about 900 tall.
If the form is too wide for the page
Set Form width to A maximum width, type a number of pixels, and copy the line again.
If you changed your web address or added your own domain
Copy the line again from Publish and replace the old one on your website.

What it looks like

What homeowners see: the booking form's first page.
What homeowners see: the booking form's first page.

Good to know

  • The one line is a script tag ending in embed.js from your form's address. It sizes itself on most builders. On Wix, set the box height by hand.
  • Requests sent from your website arrive in Seasonly like any other request.
  • Width, corners, colours and see-through glass come from the form's own settings, under Name and look. Colours follow your company colours unless that form has its own. Change them there and your website follows within about five minutes, with nothing to paste again.
  • The widget does not show your logo unless you turn on Show the logo in the website widget in Settings, Branding, or in the form's Name and look step if you have several forms. The form's own link shows it either way.
  • If you move your web address, copy the new line. The old one stops working.
  • Only the owner can switch the form or the embed on or off.

Look for something else

Still stuck? In Seasonly, press Get help. A person reads every message.