How do you gather interest, collect and send email?

[luckow]

@robi I have no idea if Formbricks is a possible piece of the puzzle for your challenge. From what I've learned with Formbricks, it's easy to implement and provides some nice audience interaction tools.
The bigger picture is the use of Mautic. There are dynamic elements, segments, campaigns, newsletters ... It all depends on a more concrete idea of the interaction with your audience and their touchpoints with your offer.

[robi]

@luckow I'm sure it is..

When I stare at a web page and see an empty email text box, I wonder where it goes, how it gets plumbed, where it gets stored and then used for good.

With 3rd party services it's all a black box and they have the info too.

I'm just not as interested in Mautic as a behemoth engine or the long setup and tuning.

Hence why I ask, how do you go from web form to say Listmonk?

Or is this all a better exercise for N8N and webhooks?

[joseph]

@robi said in How do you gather interest, collect and send email?:

Hence why I ask, how do you go from web form to say Listmonk?

Depending on the CMS, you have to build either using API automation or plugins. If you use WP - https://wordpress.org/plugins/integration-for-listmonk-mailing-list-and-newsletter-manager/ and https://github.com/knadh/listmonk/issues/1667

(disclaimer: not a WP dev and have not used that plugin )

[robi]

@joseph again, hence the question, what do you use? If any ...

Assume plain HTML/JS non WP .. enter email and it goes where?

[jdaviescoates]

Presumably you could make a form that adds them to a listmonk list?

Something like this?

Step-by-step guide for creating an HTML landing page with email signup using Listmonk:

Step 1: Design Your Landing Page

Choose and design your landing page using one of these user-friendly tools:

• Stripo
• GrapesJS
• BeeFree

Example using BeeFree:

1. Visit BeeFree.io.
2. Select a template or start from scratch to design your page.
3. Include:
   • An eye-catching headline, such as "Join Our Exclusive Community!"
   • A brief, compelling description of your offer: "Subscribe now to receive weekly updates and special offers."
   • An email input field and a prominent subscribe button labeled "Subscribe Now".
   • Visually appealing imagery or branding consistent with your business.
4. Once satisfied with your design, export the HTML (zip file).

Step 2: Export HTML

After designing your page, export the HTML from your chosen design tool. You will typically receive a zip file containing HTML, CSS, and images.

Step 3: Hosting the Page on Cloudron's Surfer

• Open Cloudron Surfer.
• Create a new site or select an existing one.
• Upload your exported files (HTML, CSS, JS, images) into Surfer.
• Publish and verify the site is accessible online.

Step 4: Setting Up Listmonk for Email Subscription

• Access your Listmonk instance.
• Create a mailing list or identify an existing one to store subscribers.
• Note down your Listmonk API key from settings for integration.

Step 5: Integrating Form with Listmonk API

Edit your HTML file to submit form data directly to Listmonk using JavaScript:

<form id=\"subscribeForm\">
  <input type=\"email\" id=\"email\" placeholder=\"Enter your email\" required>
  <button type=\"submit\">Subscribe</button>
</form>

<script>
document.getElementById('subscribeForm').addEventListener('submit', async function(e) {
  e.preventDefault();

  const email = document.getElementById('email').value;

  const response = await fetch('https://your-listmonk-url/api/subscribers', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_LISTMONK_API_KEY'
    },
    body: JSON.stringify({
      email: email,
      lists: [1], // Replace 1 with your Listmonk list ID
      status: 'enabled'
    })
  });

  if (response.ok) {
    alert('Successfully subscribed!');
  } else {
    alert('Failed to subscribe, please try again.');
  }
});
</script>

Replace placeholders (your-listmonk-url, YOUR_LISTMONK_API_KEY, and the list ID) with your actual values.

Step 6: Test the Signup Process

• Test your landing page form to ensure emails are successfully added to your Listmonk list.

Your HTML landing page is now ready, hosted on Cloudron, and integrated with Listmonk for email subscriptions.

[robi]

@jdaviescoates YES, beautifully simple. Thank you!

Only issue I see is that the API KEY would leak since it's embedded in the page.

That's why we had CGI back in the day.

[jdaviescoates]

@robi said in How do you gather interest, collect and send email?:

Only issue I see is that the API KEY would leak since it's embedded in the page.

Good point!

But that isn't the only issue. I tried having a play around thinking I might be able to quickly get it to work... but I even that aside I couldn't get it to work because of bloody CORS stuff!

[robi]

@jdaviescoates Oh yes, you're right.. there may need to be a CORS allowance setting in Listmonk since it's domain specific.

Thanks for testing this, I've been trying to find listmonk docs on how to get data in and they're all about install, not usage with actual webforms or otherwise.

How does anyone figure out the rest of the plumbing?

[robi]

Using something like N8N as the backend to handle a webhook to then use the Listmonk API might work better.

The other options are GraphQL and WebSockets, both of which seem overkill.

[jdaviescoates]

TBH, I'd probably just set-up a Ghost with a Mailgun newsletter.

[jdaviescoates]

@robi said in How do you gather interest, collect and send email?:

N8N

Could try this https://github.com/LucasSovre/listmonk-n8n

[robi]

@jdaviescoates said in How do you gather interest, collect and send email?:

TBH, I'd probably just set-up a Ghost with a Mailgun newsletter.

Right, that's the easy thing, but doesn't keep data local.

Nice find on the n8n workflow, will take a look.