[Tutorial] Letterbird | Contact Form

This tutorial is intended for WriteFreely users; I imagine it also works for Write.as Pro. If you need to add a contact form to your blog, you can use Letterbird, which is a freemium service without trackers that allows embedding forms in websites. Although WriteFreely does not support custom JS by default, thanks to the trick published by Inferno, we can experiment with adding some scripts. It is worth mentioning that although this script does not present any issues, the code can be optimized since it was designed by an AI :dizzy_face:.

First, you must add this to the end of the CSS code in the customization editor. Edit with your own domain and letterbird username.

/* custom CSS */
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.location.href === 'https://YOUR.DOMAIN/EXAMPLE-PAGE') {
      var script = document.createElement('script');
      script.src = 'https://letterbird.co/embed/v1.js';
      script.defer = true;
      script.setAttribute('data-letterbirduser', 'YOUR-USERNAME');
      script.setAttribute('data-targetelement', '#letterbird-container'); 
      document.head.appendChild(script);
    }
  });
</script>

<style type="text/css">

Finally, copy the div into the page:

<div id="letterbird-container"></div>

Here is a screenshot and you can see a demo in: Acerca de — Cri

1 Like

@dejalavidavolar … thanks for this. It works well.

To save others making the same error I did … the match between the page and hardcoded URL in the script is important, and means that the script will need to be edited when moved from drafts to published (or - as I discovered - won’t work as a draft, but does work once published :wink:).

As an aside, but related. Elsewhere on this forum fabform.io examples are provided. I’ve been unable to create an account with fabform today - no confirm your email address received (repeatedly).

I’ve used Letterbird as a Pro user for over a year and it has consistently worked well.