Skip to content

Instantly share code, notes, and snippets.

@inorganik
Last active July 4, 2025 08:33
Show Gist options
  • Select an option

  • Save inorganik/846c52550db97454646054270e4f1270 to your computer and use it in GitHub Desktop.

Select an option

Save inorganik/846c52550db97454646054270e4f1270 to your computer and use it in GitHub Desktop.
MailChimp subscribe form with Angular 5 using jsonp
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { HttpClient, HttpParams } from '@angular/common/http';
interface MailChimpResponse {
result: string;
msg: string;
}
@Component({
selector: 'email-subscribe-form',
templateUrl: './email-subscribe-form.component.html'
})
export class EmailSubscribeForm {
submitted = false;
mailChimpEndpoint = 'https://username.us6.list-manage.com/subscribe/post-json?u=abc123&id=123&';
error = '';
constructor(private http: HttpClient) { }
// reactive form components
emailControl = new FormControl('', [
Validators.required,
Validators.email,
]);
nameControl = new FormControl('', [
Validators.required
]);
submit() {
this.error = '';
if (this.emailControl.status === 'VALID' && this.nameControl.status === 'VALID') {
const params = new HttpParams()
.set('NAME', this.nameControl.value)
.set('EMAIL', this.emailControl.value)
.set('b_123abc123abc123abc123abc123abc123abc', ''); // hidden input name
const mailChimpUrl = this.mailChimpEndpoint + params.toString();
// 'c' refers to the jsonp callback param key. This is specific to Mailchimp
this.http.jsonp<MailChimpResponse>(mailChimpUrl, 'c').subscribe(response => {
if (response.result && response.result !== 'error') {
this.submitted = true;
}
else {
this.error = response.msg;
}
}, error => {
console.error(error);
this.error = 'Sorry, an error occurred.';
});
}
}
}
@Damian96
Copy link

Damian96 commented Jul 4, 2025

Hello, does anyone know if this is still valid in 2025?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment