Standalone forms are one of Beacon's best features. They make it easy to allow your supporters to do the data entry for you, and take zero development time to set up as they all run on a separate website hosted by Beacon:
However, whilst it's possible to add a logo and edit the colour scheme, you'll be hard pressed to make forms look like they truly belong in your website.
Luckily, we've got a solution: Embedded forms.
How embedded forms work
Embedded forms work almost exactly like normal forms, except that they run in your website. This means you can customise all of the content that shows around the form, which can be useful if you'd like to do things like:
Make donors feel like they've never left your website
Give donors info about where their money goes
Show the Fundraising Regulator logo to build trust
The design is stripped back, focusing on just the form itself. The logo, title, and header bar don't show in embedded forms.
Want to see an example? Check out these real forms from the Beacon family:
Arnos Vale - Donation form
Friends of Bude Sea Pool - Membership form
How to embed a form in your website
On any of your forms, click the Embed button in the top right of the page.
You'll then get the following popup with code unique to your form.
Ask your web developer to paste the first code snippet to your site, ideally right after the opening
bodytag.
Add the second code snippet where you'd like the form to appear. Some CMS (Content Management System) let you paste HTML into the content - you can use that. If your CMS doesn't allow this, you'll need to ask your website developer. Here's an example:
Frequently asked questions
Do embedded forms work for donation forms as well as other form types?
Yes, you can embed any kind of Beacon form in your website.
Do I need to update the form code whenever I change something on my form?
Not at all! The form will immediately show any changes that you make in Beacon, and you can leave the code as it is.
Should I serve the Beacon form via Google Tag Manager?
No, we recommend that you embed the form directly on your webpage instead of loading the javascript via Google Tag Manager. GTM is often blocked by ad and privacy extensions which then mean your form regularly won't appear.
Should I require cookie consent on my website to load the Beacon form?
No, we recommend that your Beacon forms fall under the 'necessary' category, as it's essential to the functioning of your page. Requiring consent will prevent the form from loading for anyone who doesn't allow all cookies.
The form isn't showing. Help!
Make sure that you've added both code snippets - the Beacon JavaScript SDK as well as the form code - to your site.
Additionally, you should ensure that you're not loading the form via Google Tag Manager, or after cookie consent.
If you've checked these things and your form still isn't loading, do reach out to our support team!
Is it possible to add custom CSS to embedded forms?
Unfortunately not, however you can add custom CSS that affects your website, and how the form shows within it.
What width should our embedded forms be?
Beacon's forms will automatically adjust their styling and the way they display to best suit the width that they're in (e.g. when viewed from mobile, or in thin website sections).
Here are the minimum widths for the standard form stylings on desktop:
Membership: 976px
Event registration: 976px
Donation: 616px
Signup: 616px
There's no problem to have them in thinner sections, and you'll see the form's arrangement adjust to suit!
Can I embed a form in a Wix website?
Yes, Beacon forms are fully compatible with Wix!
Follow step 1 of How to embed a form in your website
Add the first code snippet to the Custom Code section of your site's settings. Choose 'Body - start' as the place for the code.
Add the second code snippet to your desired page as an HTML iFrame widget, via Custom embeds > Embed a Widget
Sometimes the form won't show or load correctly when in your editor. Publish your site and view the live page to see your form.
Tip: If your form still isn't working, you can place both pieces of code together in the widget instead (in order though: top code snippet first, bottom code snippet second).
Can I embed a form in a Squarespace website?
Yes, Beacon forms are fully compatible with Squarespace! You will need a Business or Commerce plan to add the code to your site.
Follow step 1 of How to embed a form in your website
Add the first code snippet to the 'Header' section via Code Injection, in Settings > Advanced > Code Injection
Add the second code snippet to your desired page as a Code block
Tip: If your form still isn't working, you can place both pieces of code together in the code block instead (in order though: top code snippet first, bottom code snippet second).
Can I embed a form in a Wordpress website?
Yes, Beacon forms are fully compatible with Wordpress! Every Wordpress site is a little different, but the same principles apply:
Follow step 1 of How to embed a form in your website
Add the first code snippet to a 'Custom codes' or similar section of your settings. Choose 'header' or 'body start' as the place for the code.
Add the second code snippet to your desired page as a code or HTML block/widget.
Tip: If your form still isn't working, you can place both pieces of code together in the code block instead (in order though: top code snippet first, bottom code snippet second).
These are generic descriptions for Wordpress - please refer to the documentation of your particular website theme/builder for more information.
My website is a bit slow, how do I speed up the Beacon form?
Beacon's forms load a lot of things behind the scenes to ensure their full functionality and security. They'll naturally take a little longer to load than other content on your page, and under normal circumstances there isn't a lot you can do to make them or your page faster.
Having said that, here's a couple of tips that may help depending on your setup:
Add the top embed code (the Javascript) as high in your header as possible so that it starts loading earlier
If you're displaying multiple forms on a page (such as a currency picker, or multiple event registration forms on a page), be sure to add the top code to your header only once, and add the multiple bottom codes where you want the forms to appear. This will ensure you're not reloading the Javascript for every form.