Share
I denna handledning kommer vi att titta på ett problemfritt sätt att lägga till dynamiska, flexibla former till dina statiska webbplatser.
Tänk dig att du just har skapat en webbplats med statiska sidor, oavsett om det är med hjälp av Jekyll eller helt enkelt använda vissa HTML-filer, men du vill nu lägga till en kontaktformulär. Du kan länka till en onlinetjänst, installera något förbyggt på din server eller bygga något från början med PHP. Det innebär att du antingen är helt begränsad till designen, eller du lägger mer ansträngning i en enda form än vad du gjorde för hela webbplatsen.
Vad händer om du kan använda en tjänst som ger dig fullständig kontroll över formuläret, men kräver inte att du installerar något på din server? Ange Formspree, en onlinetjänst som ger dig möjlighet att skapa funktionella HTML-formulär utan att använda PHP eller JavaScript.
Låt mig ge dig en kort runda av de steg som krävs för att få din egen form igång.
Det första du behöver är en form, som vi kommer att bygga från början i HTML. Min form kommer att vara ett mycket enkelt sätt för människor att komma i kontakt med mig. Jag kommer att få ett fält för deras namn, e-post och deras meddelande. Här är markeringen för min form:
Du ser att jag har lagt till en lämna inmatade och inslagna alla fält med a element.
Vi kan utforma detta formulär men vi vill. Det finns ingen iframe eller något annat för att begränsa hur det ser ut.
För att Formspree ska kunna hantera din blankett måste du lägga till följande åtgärdsattribut till din element:
Observera att fälten Namn och Meddelande heter lämpligt, men jag har använt den speciella "_svara till"Värde för e-postfältet. Formspree kommer att känna igen detta attributvärde och tillåter mig därför att svara direkt på det e-postmeddelande som anges på formuläret när det skickas in.
Jag kan också lägga till _Nästa till en annan dold ingång för att ange vilken webbadress jag vill att användarna ska skickas till en de har skickat in formuläret.
För att jag ska kunna veta varifrån inlämningen kommer kommer jag att lägga till en ämnesrad. Jag kan göra detta genom att lägga till följande dolda inmatningar:
Det här fältet visas inte när en användare visar formuläret, men värdet kommer att användas för ämnesraden när jag får en inlämning.
Inbyggd i Formspree är en "honeypot" metod för att förebygga spam. Honeypot tekniken är ganska enkel; du gömmer ett fält i din form som användare inte ser, men spambots gör. Spamboten fyller i fältet, medan användarna inte kommer att göra det. Alla inlämningar med det här fältet fylls i anses vara skräppost.
Du kan använda denna teknik genom att lägga till följande i ditt formulär:
Det är viktigt att du använder ett stilattribut för att dölja fältet. Användarens webbläsare kommer att gömma fältet med hjälp av CSS, men spamboten kommer (förmodligen) att ignorera CSS helt och hållet och fylla i fältet. Genom att namnge fältet "_fick dig", Kommer Formspree att känna igen det och ignorera eventuella inlagor gjorda med detta fyllda i.
För extra säkerhet kan du paketera din email i JavaScript. Detta kommer att minska sannolikheten för att spambots kommer att se igenom och välja ut din e-post från HTML. Ta en titt på vad jag har gjort nedan:
Här har jag tagit bort verkan attribut från element, och sedan använde en liten bit av JavaScript för att ställa in det istället. Jag har också brutit ner e-poststrängen i segment för att göra det ännu mer obskyra till spamboterna. Känn dig fri att kopiera det här och ersätta segmenten av e-postmeddelandet med ditt eget.
Det sista steget är att se till att din form fungerar. Besök sidan som innehåller ditt formulär i din webbläsare, fyll i formuläret och skicka in det som en vanlig användare skulle. Du borde få ett mail från Formspree och ber dig att bekräfta ditt mail.
Klicka på länken för bekräftelse och du är klar!
Notera: Du måste gå igenom den här bekräftelseprocessen varje gång du lägger till formuläret på en ny sida.
Formspree API erbjuder ett enkelt och mycket flexibelt sätt att lägga till formulär på en webbsida. Perfekt för statiska platser!
Accentsconagua