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 Loops you will need to retreive the form endpoint URL that’s linked to your Loops account.

1. Go to the Forms page in your Loops 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.loops.so/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>

To add subscribers to mailing lists, include a hidden field called mailingLists. You can use a single mailing list ID or to add subscribers to multiple lists, use a comma-separated list of mailing list IDs.

<form
  method="post"
  action="https://app.loops.so/api/newsletter-form/YOUR_FORM_ENDPOINT"
>
  <input type="email" name="email" required>
  <input type="hidden" name="mailingLists" value="cly2xnjbn002z0mme68uog1wk, cly4xnjbn002x0mme28uog1wk">
  <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)}&mailingLists=${encodeURIComponent(mailingListIds)}`;

  // Change this URL to your own endpoint URL
  fetch("https://app.loops.so/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