Om du någonsin har anmält dig för ett e-postabonnemang bör du veta om MailChimp. Det är ett företag som hjälper webbansvariga och marknadsförare att leverera nyhetsbrev och andra liknande kampanjer. De ger vissa HTML-mallar att använda för anmälningsblanketter och bekräftelsessidor, men de är så generiska att de flesta abonnenter är uttråkade av samma gränssnitt.
Jag skulle vilja visa hur du anpassar MailChimp-registreringsformuläret till något mer unikt. Allt är baserat på den ursprungliga MailChimp HTML / CSS-koden och formulärinsändningen kommer att använda Ajax. Det låter komplicerat men hela processen är enklare än du kan förvänta dig. Ta en titt på min provdemo för att få en uppfattning om hela handledningen.
Live Demo - Hämta källkod
Komma igång
Först måste vi komma åt Dashboard MailChimp för att samla in deras HTML-kod. Logga in på ditt konto eller skapa ett nytt gratis konto. Klicka? Listor? från huvudmenyn och du får en tabell över alla dina abonnemangslistor. Du kanske vill använda en befintlig lista, eller skapa en ny lista för denna handledning. Hur som helst klicka på listan namn och vi får en annan tabell som organiserar alla abonnenter via e-postadress.
En ny lista börjar tom men det spelar ingen roll hur många abonnenter du har. På denna sida klicka? Registreringsformulär? och vi kommer att presenteras med några alternativ. Allmänna formulär är för grundläggande och vi har inte kontroll över koden. Välj? Inbäddade formulär? och du får ett snyggt gränssnitt för att kopiera / klistra in HTML.
Jag har valt Super Slim över Classic eftersom det är mindre CSS som kommer i vägen för din design, men det är fortfarande bättre än Naked utan några stilar alls.
Blocket ovan är min standardkod från MailChimp. Det finns mycket organiserande att göra, nämligen att ta bort alla kommentarer om du inte behöver dem. Jag har också skapat ett nytt stilark styles.css och jag ska kombinera allt tillsammans. Inline #mc_embed_signup bör slås samman i en enhetlig CSS-fil tillsammans med MailChimp-smalkoden. Detta är min strategi för att anpassa den ursprungliga designen och sprucing upp layouten helt och hållet.
Ändringar i HTML
Det blir enklare att förklara den här processen genom att visa det uppdaterade kvarteret så att du har möjlighet att jämföra. Alla klasser och ID och namn har lämnats ensamma. Det är klokare att anpassa CSS med hjälp av befintliga klasser / ID för att säkerställa kompatibilitet.
Den viktigaste förändringen är min forms handlingsattribut. Allt i webbadressen är identiskt fram till post-json, som var ursprungligen posta i MC-mallen. Postfunktionen returnerar en typisk färdigställningssida som vi alla är bekanta med. post-json kommer att returnera ett JSON-svar baserat på framgång eller misslyckande av e-postabonnemanget. Vänligen notera att jag har bifogat & C =? till slutet av den här webbadressen.
Syftet är att delegera en återkallningsmetod som är synonymt med JSON-svar. Jag har inte använt det för personligt, men det finns många inlägg och diskussioner om ämnet återuppringningsfunktioner. Kom bara ihåg att det borde vara en del av handlingsadressen.
Också du kanske märker en extra div längst ner i formulärbehållaren. Jag använder ID #notification_container i en välbekant syntax som namnet MailChimp ID. När JSON returnerar ett värde kontrollerar vi JavaScript och sedan läggs det till på sidan inuti denna div.
Uppdatering av CSS
Bortsett från de typiska sidaåterställningarna har jag också skrivit mina egna stilar för varnings / framgångsförmedlingsbehållarna. Egenskaperna är ganska typiska så jag kommer inte att gå in i detaljer, men du kan hitta dem i min konsoliderade styles.css-fil.
Det bästa sättet att anpassa MC-formstilar är att känna igen hur du vill att den ska se ut. Formen är en blandad väska med procentandelar och pixlar, så det är verkligen upp till dig som designer att göra vad du vill ha. Responsiva eller fasta, inline eller block-stil element. etc.
Jag har lagt till lite extra avstånd till min kod så det finns blocknivåer och inline-stilar.
Det här är bara en liten del och det fokuserar på ingångarna och knappen Skicka. Jag använder en bottengräns för att få knappen att visas 3D som sedan plattas när den klickas.Det är allt ganska enkelt och ingen av min CSS-kod ska vara förvirrande. Jag repositionerade just formulärbehållaren vid 350px bredd så allt ser ut som centrerat på sidan.
Din positionering kommer att ändras om du behöver den i sidofältet, eller rubriken eller kanske till och med sidfoten. I dessa fall kan du flytta anmälningsbehållaren ovanför formuläret, eller det som är mest meningsfullt. Känn dig fri att börja med min kod, men börjar med MailChimps standardinställningar är nog lika bra.
Om vi använde den ursprungliga åtgärdsadressen kunde vi sluta vid denna tidpunkt och göra det. Formuläret är oftast omdesignat och när en användarklick har skickats in öppnas en ny flik som ber dem att bekräfta prenumerationen via e-post. Men för att förenkla denna process tittar vi på ett jQuery-alternativ för hantering av inlämningen.
MailChimp Signup och jQuery
Om du inte redan har en kopia av jQuery, ladda ner en och ta den med i sidhuvudet. All min kod är skriven i skriptetiketter längst ner på sidan. Jag snubblat faktiskt på denna lösning i Stack Overflow som skisserade mycket av processen.
Rätt när dokumentet laddas in konfigurerar jag en jQuery-referensvariabel $ formulär. När inloggningsknappen är klickad förhindrar vi standardinsändningen (vilken skulle öppna en JSON-resultatsida) och i stället ringa en användardefinierad funktion som heter Registrera(). De $ formulär själv går in i funktionen som en parameter.
Det kan tyckas förvirrande men den här funktionen är verkligen en lång .ajax () metod. Observera att vi kan dra GET / POST-attributet av formuläret själv, tillsammans med den uppdaterade åtgärdsadressen. Alla inmatningsvärden är serialiserade och skickas på samma sätt som PHP. Det här är den främsta anledningen att lämna formulärinmatningsnamn ensam och behåll originalmallen.
Slutligen finns det två Ajax-svar återkopplingar på framgång eller fel. Om vi får ett fel kunde MailChimp inte acceptera vår begäran och varningsmeddelandet visas. Annars accepterade de begäran, men vi vet inte om det fungerade.
Om Ajax var framgångsrik får vi en ny parameter som returneras till jQuery. I det här fallet heter det data vilket ska se ut som ett JSON-objekt. Om resultatdata säger att det inte fungerade så vet vi att det finns ett problem med e-postadressen, antingen inte giltig eller bara inte en e-poststräng. Hur som helst matas felmeddelandet till sidan. Jag använder substr () för att ta bort den första delen av felmeddelandekoden.
Eller om meddelandet är framgångsrikt ska vi få en retursträng som anger att användaren behöver kontrollera sin inkorg och bekräfta den nya prenumerationen. Hur som helst, returneras returmeddelandet i anmälningsbehållaren med hjälp av jQuery's .html () -metod.
Observera att även om du registrerar dig med ett slumpmässigt e-postmeddelande, så här ska inte visas i din lista tills den har bekräftats. För att kontrollera om det här skriptet verkligen fungerar, måste du använda en riktig adress och klicka på bekräftelsemail.
Live Demo - Hämta källkod
Stängning
Jag har alltid varit lite irriterad av MailChimps standardinställningsformulär. Jag hoppas att denna handledning kan erbjuda ett lite annorlunda tillvägagångssätt för webbutvecklare och internetmarknadsförare. Kom också ihåg att du kan uppdatera gränssnittsdesignen för bekräftelsessidor och e-postmeddelanden som skickas ut till varje abonnent. Du kan ladda ner min källkod och inkludera den här uppdaterade MailChimp-formuläret inom något av dina egna projekt.