Custom form

Integrate with Loops via a form endpoint, which will work with any type of custom form solution you have set up.

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.

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.

Make sure that any mailing list you add to a form is [Public](/contacts/mailing-lists#list-visibility). You cannot subscribe contacts to private mailing lists from the form endpoint.

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

If you need a hand integrating with your custom form, just shoot [adam@loops.so](mailto:adam@loops.so) an email and we'll help you integrate with anything your specific setup ✌️

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

We rate limit requests from the same IP to once per minute and also do not allow duplicates of the same email address. It's likely the error is related to one of these cases.