Si vous vous êtes déjà inscrit pour un abonnement par courrier électronique, vous devez connaître MailChimp. C'est une entreprise qui aide les webmasters et les spécialistes du marketing à diffuser des newsletters et autres campagnes similaires. Ils fournissent des modèles HTML à utiliser pour les formulaires d'inscription et les pages de confirmation, mais ils sont tellement génériques que la plupart des abonnés s'ennuient de cette même interface.
J'aimerais montrer comment personnaliser le formulaire d'inscription à MailChimp en quelque chose de plus unique. Tout est basé sur le code HTML / CSS original de MailChimp et la soumission du formulaire utilisera Ajax. Cela semble compliqué, mais l’ensemble du processus est plus simple que prévu. Jetez un oeil à mon exemple de démo pour avoir une idée du tutoriel complet.
Live Demo - Télécharger le code source
Commencer
Nous devons d’abord accéder au tableau de bord MailChimp pour recueillir leur code HTML. Connectez-vous à votre compte ou créez un nouveau compte gratuit. Cliquez? Listes? dans le menu principal et vous obtiendrez un tableau de toutes vos listes d’abonnements. Vous pouvez utiliser une liste existante ou créer une nouvelle liste pour ce tutoriel. Dans tous les cas, cliquez sur le nom de la liste et nous aurons une autre table organisant tous les abonnés par adresse e-mail.
Toute nouvelle liste sera vide au début, mais peu importe le nombre d'abonnés que vous avez. Sur cette page, cliquez sur? Formulaires d'inscription? et nous serons présentés avec quelques options. Les formulaires généraux sont trop basiques et nous n'avons aucun contrôle sur le code. Sélectionnez? Formes incorporées? et vous aurez une interface élégante pour copier / coller le code HTML.
J'ai choisi Super Slim par rapport à Classic car moins de CSS vous gêne dans la conception, mais il est toujours meilleur que Naked sans style.
Le bloc ci-dessus est mon code par défaut de MailChimp. Il y a beaucoup d'organisation à faire, à savoir supprimer tous les commentaires, sauf si vous en avez vraiment besoin. J'ai aussi créé une nouvelle feuille de style styles.css et je vais tout combiner ensemble. L'inline #mc_embed_signup devrait être fusionné dans un fichier CSS unifié avec le code MailChimp Slim. C’est ma stratégie pour personnaliser le design original et améliorer la mise en page.
Changements en HTML
Il sera plus facile d'expliquer ce processus en affichant le bloc de code mis à jour pour vous permettre de comparer. Toutes les classes, identifiants et noms ont été laissés seuls. Il est plus sage de personnaliser le CSS en utilisant les classes / ID existants pour assurer la compatibilité.
Le changement le plus important est l'attribut d'action de mon formulaire. Tout dans l'URL est identique jusqu'à post-json, qui était à l'origine poster dans le modèle MC. L'action post renvoie une page d'achèvement typique que nous connaissons tous. post-json renverra une réponse JSON en fonction du succès ou de l'échec de l'abonnement par courrier électronique. S'il vous plaît noter que j'ai aussi ajouté & c =? à la fin de cette URL.
Le but serait de déléguer une méthode de rappel qui est synonyme dans les réponses JSON. Je ne l'ai pas trouvé personnellement utile, mais il existe de nombreux messages et discussions sur le sujet des fonctions de rappel. Rappelez-vous qu'il devrait faire partie de l'URL de l'action.
En outre, vous remarquerez peut-être une division supplémentaire tout en bas du conteneur de formulaire. J'utilise l'ID #notification_container dans une syntaxe familière comme les noms d'ID MailChimp. Une fois que JSON a renvoyé une valeur, elle est vérifiée en JavaScript, puis ajoutée à la page située à l'intérieur de cette div.
Mise à jour de CSS
En plus des réinitialisations de page classiques, j'ai également écrit mes propres styles pour les conteneurs de messages d'alerte / de succès. Les propriétés sont assez typiques, je ne vais donc pas entrer dans les détails, mais vous pouvez les trouver dans mon fichier consolidé styles.css.
La meilleure façon de personnaliser les styles de formulaire MC consiste à reconnaître l'apparence souhaitée. La forme est un mélange de pourcentages et de pixels. C'est donc à vous, concepteur, de faire ce que vous voulez. Éléments réactifs ou fixes, en ligne ou de type bloc. etc.
J'ai ajouté de l'espacement supplémentaire à mon code afin qu'il existe des sélecteurs au niveau des blocs et des styles en ligne.
Ceci est juste une petite partie et se concentre sur les entrées et le bouton de soumission. J'utilise une bordure inférieure pour que le bouton apparaisse en 3D, qui s'aplatit lorsque vous cliquez dessus.C'est assez simple et aucun de mes codes CSS ne devrait être déroutant. Je viens de repositionner le conteneur de formulaire à une largeur de 350 pixels afin que tout apparaisse centré sur la page.
Votre positionnement changera si vous en avez besoin dans la barre latérale, dans l'en-tête ou peut-être même dans le pied de page. Dans ces cas, vous pouvez déplacer le conteneur de notifications au-dessus du formulaire ou à tout autre choix. N'hésitez pas à commencer avec mon code, mais les valeurs par défaut de MailChimp sont probablement aussi bonnes.
Si nous utilisions l'URL d'action d'origine, nous pourrions nous arrêter à ce stade et le faire. Le formulaire est en grande partie remanié et lorsqu'un utilisateur clique sur Soumettre, un nouvel onglet s'ouvrira pour lui demander de confirmer l'abonnement par courrier électronique. Mais pour simplifier ce processus, nous allons examiner une alternative jQuery pour gérer la soumission.
MailChimp Inscription et jQuery
Si vous ne possédez pas déjà une copie de jQuery, téléchargez-en une et incluez-la dans l'en-tête de page. Tout mon code est écrit dans les balises de script au bas de la page. En fait, je suis tombé sur cette solution dans Stack Overflow, qui décrit en grande partie le processus.
Dès que le document est chargé, je configure une variable de référence jQuery $ forme. Dès que vous cliquez sur le bouton d'envoi, nous empêchons l'envoi par défaut (ce qui ouvrirait une page de résultats JSON) et appelerons plutôt une fonction définie par l'utilisateur nommée registre(). le $ forme lui-même est passé dans la fonction en tant que paramètre.
Cela peut paraître déroutant, mais cette fonction est vraiment une longue méthode .ajax (). Notez que nous pouvons extraire l'attribut GET / POST du formulaire lui-même, ainsi que l'URL de l'action mise à jour. Toutes les valeurs d'entrée sont sérialisées et transmises comme PHP. C'est la raison principale pour laisser les noms d'entrées de formulaire et conserver le modèle d'origine.
Enfin, il existe deux rappels de réponse Ajax en cas de succès ou d'erreur. En cas d'erreur, MailChimp ne peut pas accepter notre demande et le message d'alerte apparaît. Sinon, ils ont accepté la demande, mais nous ne savons pas si cela a fonctionné.
Si Ajax a réussi, nous obtenons un nouveau paramètre qui est renvoyé dans jQuery. Dans ce cas, il s'appelle Les données qui devrait ressembler à un objet JSON. Si les données de résultat indiquent que cela n'a pas fonctionné, nous savons qu'il existe un problème d'adresse e-mail, non valide ou tout simplement pas de chaîne e-mail. Dans les deux cas, le message d'erreur est affiché dans la page. J'utilise substr () pour supprimer la première partie du code du message d'erreur.
Ou si le message de données réussit, nous devrions recevoir une chaîne de retour indiquant que l'utilisateur doit vérifier sa boîte de réception et confirmer ce nouvel abonnement. Dans les deux cas, le message de retour est sorti dans le conteneur de notification à l'aide de la méthode .html () de jQuery.
S'il vous plaît noter que même si vous vous inscrivez avec un e-mail au hasard, cette ne sera pas apparaissent dans votre liste jusqu'à ce que cela soit confirmé. Pour vérifier si ce script fonctionne réellement, vous devrez utiliser une adresse réelle et cliquer sur l'e-mail de confirmation.
Live Demo - Télécharger le code source
Fermeture
J'ai toujours été légèrement ennuyé par le formulaire d'inscription par défaut de MailChimp. J'espère que ce tutoriel peut offrir une approche légèrement différente aux développeurs Web et aux spécialistes du marketing Internet. Rappelez-vous également que vous pouvez mettre à jour la conception de l'interface pour les pages de confirmation et les courriers électroniques envoyés à chaque abonné. N'hésitez pas à télécharger mon code source et à inclure ce formulaire MailChimp mis à jour dans vos propres projets.