Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

You can embed a Referral Form in another website, such as SquarespaceMakerble Signup Page in your website.

...

Steps

Table of Contents
minLevel12
maxLevel7

Watch the walkthrough

Using Squarespace

https://makerble.slack.com/files/U044FAH0LBT/F04CELLV231/screenshare_-_2022-11-29_1_27_56_pm.webm

...

Part 1: Get the Embed Code for the form

...

  1. Select My Apps in top menu

  2. Select Contacts

  3. You arrive in the Contacts App

  4. Select More Options

  5. In the dropdown options select Public Referral Forms

    Image Removed

  6. You arrive on the Manage Public Forms page

    Image Removed
  7. Image Added

    Press Click the Embed this formcode button next to below the form Public Form you want to embed on another website

    Image Removed
  8. The embed code will be copied to your clipboard

  9. You can now embed the code in another website’s webpage

Part 2: Paste the Embed Code into a webpage on your website

  1. This copies the Embed Code to the clipboard

Part 2: Paste the Embed Code into a webpage on your website

WordPress

Info

Wordpress restricts the use of embedded features to

  1. Follow the Part 1 instruction to get the Embed Code for your Public Form

  2. Press the + button in WordPress to add a new block to a page

    Image Added
  3. Select Shortcode

  4. The Shortcode block appears on the page

    Image Added
  5. Paste the Embed Code from Makerble into this field

    Image Added
  6. Press the Update button in the top right corner of the page to save the page

    Image Added
  7. Your Makerble Public Form is now displayed on your web page with its own vertical scrollbar

    Image Added
  8. If you want the full length of the Public Form to be displayed, adjust the height and width on Makerble from the Public Forms page and then generate a new Embed Code and follow these steps again

    Image Added

Squarespace 7.1

Watch the walkthrough: https://makerble.slack.com/files/U044FAH0LBT/F04CELLV231/screenshare_-_2022-11-29_1_27_56_pm.webm

Squarespace 7.0

Info

Limitations with Squarespace 7 may restrict the loading of the form

...

  1. Follow the Part 1 instructions to get the Embed Code for your Public Form

  2. Click the Add Block button

    Image Added
  3. In the popup that appears, select Add Block

    Image Added
  4. Select Embed

  5. This adds an empty block to your page

    Image Added
  6. Click the pencil icon to edit the block

  7. Select Code Snippet in the popup

    Image Added
  8. Click the Embed data button

  9. A text area appears

    Image Added
  10. Paste your form’s Makerble Embed Code into this section

    Image Added
  11. Click elsewhere on the page to close the popup

  12. A preview of your form appears

    Image Added
  13. Use the arrows at the edge to drag and resize the form

    Image Added
  14. Resize the form to the size you want it displayed

    Image Added
  15. You can also resize it vertically

    Image Added
  16. Press Done in the top left corner to save the page

  17. You will see your form displayed

    Image Added
  18. You might need to follow Squarespace’s instructions to disable scripts in preview

Squarespace 7.0

...

  • However, even though the form is previewed as appearing larger than the blue outline of the form, the form will still display properly on the finished web page

...

Websites powered by Drupal, Episerver, Joomla, Sitecore, Umbraco, Wagtail, WildApricot, Wix, Weebly and other CMSs (Content Management Systems) that support embedding

In Part 1: Get the Embed Code for the form

...

In Part 2: Paste the Embed Code into a webpage on your website

  • Use the Embed block option that’s available to you

  • If it looks like the form is taking up too little or too much space on the page (as shown in the example below)…

    Image Added
  • … You need to resize the form. You can resize the form on the Manage Public Forms page

    Image Added
  • Change the Height and Width

  • Then press Embed this form again. This will generate new code and copy it to your clipboard. Embed this new code in your website