Beacon

Embedding forms in your website

Updated 4 months ago

Hosted 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.

All forms run on a separate website hosted by Beacon:

Screen Shot 2018-10-01 at 16.36.34

While 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? Scroll to the end of this article.


How to embed a form in your website

1) On any of your forms, click the Embed button in the top right of the screen.

Screen Shot 2018-10-01 at 16.54.57

2) Ask your web developer to paste the top code snippet to your site, ideally right after the opening body tag.

<script type="text/javascript">
  (function (d, id) {
    if (d.getElementById(id)) {
      return;
    }
    var js = d.createElement('script');
    js.id = id;
    js.src = 'https://static.beaconproducts.co.uk/js-sdk/production/beacon.min.js';
    d.getElementsByTagName('head')[0].appendChild(js);
  }(document, 'beacon-js-sdk'));
</script>

3) Add the second code snippet where you'd like the form to appear. Some CMS' 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.

<div class="beacon-form" data-account="beacondemo" data-form="1a98d504"></div>

Frequently asked questions

Do embedded forms work for donation forms as well as other form types?

Yes, you can embed any kind of form in your website.

The form isn't showing. Help!

Make sure that you've added the Beacon JavaScript SDK to your site as well as the form code. Still having issues? Talk 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.


Example embedded form

Below is a live embedded donation form that links directly to one of our demo accounts:

close

Contact Us

It'd be great to hear from you! To reach out, fill in your details below and we'll get back to you.

close

Register for webinar

To join this webinar, please enter your details below and we'll send you details on how to join.



close