Formulaire d'inscription mailchimp personnalisé dans React
J'ai une application de réaction à laquelle j'aimerais ajouter un formulaire d'inscription à mailchimp. Je construis un formulaire d’inscription personnalisé et demande aux utilisateurs de s’inscrire en entrant leur nom, leur prénom et leur adresse électronique. Je n'ai pas affaire à un truc de campagne. Tout ce que j'essaie de faire, c'est qu'une fois inscrits, ils reçoivent un email pour confirmer leur inscription.
J'ai fait ce qu'il y a dans le guide mailchimp http://kb.mailchimp.com/lists/signup-forms/Host-your-own-signup-forms mais cela me donne toujours l'erreur 500.
Voici le code pour l'événement d'envoi
subscribe(event) {
event.preventDefault();
axios({
url: 'https://xxxxxx.us15.list-manage.com/subscribe/post',
method: 'post',
data: this.state,
dataType: 'json'
})
.then(() => {
console.log('success');
});
}
et voici la forme
<form onSubmit={this.subscribe.bind(this)}>
<input type="hidden" name="u" value="xxxxxxxxxxx" />
<input type="hidden" name="id" value="xxxxxxxxxxx" />
<label>First Name</label>
<input name="FNAME" type="text" onChange={this.handler.bind(this, 'FNAME')} required="true"/>
<label>Last Name</label>
<input name="LNAME" type="text" onChange={this.handler.bind(this, 'LNAME')} required="true"/>
<label>Email</label>
<input name="EMAIL" type="email" onChange={this.handler.bind(this, 'EMAIL')} required="true"/>
<button type="submit" name="submit">Subscribe</button>
</form>
J'ai également essayé la suggestion dans ce lien AJAX Intégration du formulaire d'inscription Mailchimp
en passant en passant le u et id avec l'URL au lieu de l'entrée dans le formulaire. mais cela n'a pas fonctionné non plus.
Quelqu'un a une idée sur la façon de faire ce travail? Merci!!
C'est possible. [1]
Comme vous l'avez mentionné dans votre link , MailChimp vous permet d'afficher les valeurs des éléments de formulaire sur notre client pour inscrire des personnes à votre liste de diffusion. Tout ce qui est plus avancé que cela et vous devez utiliser leur API, ce qui nécessite CORS (c.-à-d. Que l'API ne peut pas être utilisée par le client).
Si vous n'utilisez pas React, vous pouvez simplement copier/coller le générateur de formulaire intégré de MailChimp. Mais si vous êtes dans React, voici ce que vous pouvez faire:
1) Récupère les valeurs u et id
Ceci est décrit dans le lien ci-dessus. Ou, vous pouvez aller dans votre générateur de formulaire et trouver le champ d'action: ce sera quelque chose comme https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&id=8281a64779 où u et id sont dans les arguments de la requête.
2) Ajouter les attributs onChange et value aux éléments de formulaire
Si vous ne disposez que de simples éléments de formulaire, vous remarquerez que la frappe ne fait rien. La frappe ne rend aucun texte à l'intérieur des éléments d'entrée. Lisez https://reactjs.org/docs/forms.html pour comprendre pourquoi. (React a besoin d'une source unique de vérité pour l'état).
La valeur doit être mise à jour. Vous pouvez le faire en mettant à jour l'état d'une fonction liée.
<input
value={this.state.emailValue}
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
/>
3) Bonus: inclure les champs antispam de MailChimp
Si vous lisez le code dans les formulaires incorporés, vous remarquerez des choses comme:
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_eb05e4f830c2a04be30171b01_8281a64779" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
Vous pouvez les inclure dans React en modifiant les champs appropriés pour Babel et JSX. class doit être className. la balise <input> doit être fermée et le style doit être transmis en tant qu'objet.
En résumé: voici un composant entier
import React from 'react'
class SubscribePage extends React.Component {
constructor(props) {
super(props);
this.state = {
emailValue: '',
fNameValue: '',
lNameValue: '',
};
}
render() {
return (
<form action="https://cool.us16.list-manage.com/subscribe/post" method="POST" noValidate>
<input type="hidden" name="u" value="eb05e4f830c2a04be30171b01"/>
<input type="hidden" name="id" value="8281a64779"/>
<label htmlFor='MERGE0'>
Email
<input
type="email"
name="EMAIL"
id="MERGE0"
value={this.state.emailValue}
onChange={ (e)=>{this.setState({emailValue: e.target.value});} }
autoCapitalize="off"
autoCorrect="off"
/>
</label>
<label htmlFor='MERGE1'>
First name
<input
type="text"
name="FNAME"
id="MERGE1"
value={this.state.fNameValue}
onChange={(e)=>{this.setState({fNameValue: e.target.value});}}
/>
</label>
<label htmlFor='MERGE2'>
Last name
<input
type="text"
name="LNAME"
id="MERGE2"
value={this.state.lNameValue}
onChange={(e)=>{this.setState({lNameValue: e.target.value});}}
/>
</label>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>
<div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
<label htmlFor="b_name">Name: </label>
<input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>
<label htmlFor="b_email">Email: </label>
<input type="email" name="b_email" tabIndex="-1" value="" placeholder="[email protected]" id="b_email"/>
<label htmlFor="b_comment">Comment: </label>
<textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
</div>
</form>
)
}
}
export default SubscribePage
[1]: Notez que l'utilisateur sera dirigé vers une page MailChimp et invité à vérifier l'abonnement en cliquant sur un lien dans son courrier électronique. Pour éviter cela, vous devez utiliser l'API
J'ai rencontré beaucoup de problèmes en essayant de faire fonctionner le formulaire dans React sans ouvrir une page de confirmation.
Il existe plusieurs façons de contourner ce problème. La méthode la plus simple consiste à utiliser le paquet react-mailchimp-subscribe . C'est super détroit en avant et le paquet est assez léger. La seule chose dont vous avez besoin pour que ce formulaire fonctionne est l'URL d'action que Mailchimp vous fournit sur la page Incorporer le formulaire de votre liste.
Si vous ne voulez pas utiliser le paquet, vous pouvez vous plonger dans la source et recréer très simplement ce qui se fait. Les quelques éléments à modifier sont l’URL de
http://xxxxx.us#.list.com/subscribe/post?u=xxxxx&id=xxxx
à
http://xxxxx.us#.list.com/subscribe/post-json?u=xxxxx&id=xxxx
En plus d'ajouter le -json, vous devrez ajouter un paramètre c qui est vide (vous pouvez le faire dans la requête jsonp ou l'ajouter à l'URL en ajoutant &c=?).
Avec cette implémentation, vous ne devriez plus être redirigé et tous les messages seront renvoyés au format JSON. Notez également que vous n'avez pas besoin de leur balise script sur votre page pour que cela fonctionne.
Références: