Simple form

You may want to collect signups from your website directly into Cocoonmail.

​

Generate the form

Easily generate an HTML or JSX form for collecting new signups for your mailing list from inside Cocoonmail.

Go to the Forms page, customize your form (such as mailing list, layout, button color and success message) and copy the HTML into your website.

​

Add more fields to the form

It’s possible to add other fields to your form if you want to collect more than just email addresses.

When adding new fields, use the “API Name” value found from your API settings page as the name attribute for each field.

For example, this field would collect a First Name:

<input type="text" name="firstName" />

If you want more flexibility when creating signup forms, read about creating custom forms.

​

Custom form

Our form endpoint lets you add new contacts to your audience from an HTML form or using JavaScript.

Find the form endpoint To submit data to Cocoonmail you will need to retreive the form endpoint URL that’s linked to your Cocoonmail account.

1. Go to the Forms page in your Cocoonmail account.
2. Click on the Settings tab.
3. Copy the URL shown in the Form Endpoint field.

​

Create a form

In a form, add input elements for each of the contact properties you want to collect.

You can add fields for any of the default contact properties plus any of your custom properties.

For each form field use the “API Name” value found from your API settings page as the name attribute.

Here’s a simple example form that collects name, email address and assigns a custom user group:

<form

  method="post"

  action="https://app.cocoonmail.com/api/newsletter-form/YOUR_FORM_ENDPOINT"

>

  <input type="text" name="firstName" required>

  <input type="email" name="email" required>

  <input type="hidden" name="userGroup" value="Website signups">

  <button type="submit">Sign up</button>

</form>

​

Submit with JavaScript

If you would rather submit a form using JavaScript, you can make a POST request to your form endpoint.

Make sure to set the Content-Type header to application/x-www-form-urlencoded.

function handleSubmit() {

  const formBody = `firstName=${encodeURIComponent(firstName)}&email=${encodeURIComponent(email)}`;



  // Change this URL to your own endpoint URL

  fetch("https://app.cocoonmail.com/api/newsletter-form/YOUR_FORM_ENDPOINT", {

    method: "POST",

    body: formBody,

    headers: {

      "Content-Type": "application/x-www-form-urlencoded",

    },

  });

}

Responses from this form endpoint will be one of the following:

HTTP 200



{

  success: true

}

HTTP 400 or 500



{

  success: false,

  message: "A descriptive error message."

}

This endpoint is rate limited. If you go over the limit, will see a HTTP 429 error just like with the API. Read more about how to handle 429 responses

​

FAQ