Formulärnamnsblock. Fördelar med att skapa ett eget kontaktformulär

Nu måste vi ladda ner kodexemplen och kopiera filen style.css till projektkatalogen. Du måste också lägga till ett element , som säger åt webbläsaren att ladda ner CSS-filen.

Du måste skapa två element

Det är viktigt att ladda filen jquery-2.1.0.min.js först eftersom app.js-skriptet kräver jQuery.
Detta är all HTML du behöver. Låt oss nu titta på JavaScript.

Skickar formulärdata med AJAX

Skapa i projektkatalogen ny fil heter app.js . Den kommer att innehålla koden som behövs för att skicka formulärdata med AJAX.
Kopiera följande kod till din app.js-fil.

Vi har skapat två variabler form och formMessages som refererar till motsvarande HTML-element.
Därefter måste vi skapa en lyssnare som lyssnar efter submit-händelsen på formuläret. Detta kan göras med hjälp av jQuery submit-metoden.

// Ställ in lyssnaren för kontaktformuläret. $(form).submit(function(event) ( // Blockera inlämning av formulärdata i webbläsaren. event.preventDefault(); // TODO ));

Vi överför till inlämningsmetoden en funktion som kommer att exekveras när användaren skickar in formulärdata. Vi sa också till webbläsaren att inte skicka in formuläret som vanligt genom att anropa preventDefault-metoden på händelsen.
Nu måste vi serialisera formulärdata. De kommer att konverteras till en nyckel-/värdesträng som ska skickas med en AJAX-förfrågan. Använd metoden jQuery serialize för att serialisera formulärdata och lagra sedan resultatet i formData-variabeln.

// Serialisera formulärdata. var formData = $(form).serialize();

Låt oss nu skriva koden som är ansvarig för att skicka formulärdata till servern och bearbeta svaret. Kopiera följande kod till din app.js-fil.

// Skickar formulärdata med AJAX. $.ajax(( typ: "POST", url: $(form).attr("action"), data: formData ))

Metoden jQuery ajax används för att skapa en ny AJAX-förfrågan. Vi har skickat objektet till ajax-metoden, som inkluderar ett antal egenskaper som används för att anpassa begäran. Egenskapen type anger HTTP-metoden som kommer att användas för att skicka begäran. I vårt fall är detta POST-metoden.
URL-egenskapen är platsen för skriptet som kommer att bearbeta formulärdata. Vi anger värdet för den här egenskapen genom att hämta handlingsattribut från formuläret. Värdet på dataegenskapen ställs in med hjälp av formData-variabeln vi skapade tidigare.
Sedan måste du bearbeta det framgångsrika svaret från servern. Kopiera följande kod direkt efter den avslutande parentesen av ajax-samtalet. Observera att jag medvetet utelämnade semikolon.

Done(function(response) ( // Se till att formMessages div innehåller klassen "success". $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Ställ in texten meddelanden. $(formMessages).text(response); // Rensa formuläret. $("#name").val(""); $("#email").val(""); $("# meddelande ").val(""); ))

Den färdiga metoden kommer att anropas om begäran lyckas. Först kontrollerar vi att formMessage s-elementet innehåller framgångsklassen. Vi ställer sedan in elementets textinnehåll med hjälp av data som returneras av e-postskriptet. Sedan rensar vi värdena för varje formulärfält.
I det sista utdraget JavaScript-kod vi måste skriva vad som ska hända om ett fel uppstår. Kopiera följande kod till din app.js-fil.

Fail(function(data) ( // Se till att formMessages div innehåller klassen "error". $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Ställ in meddelandet text. if (data.responseText !== "") ( $(formMessages).text(data.responseText); ) else ( $(formMessages).text("Hoppsan! Ett fel uppstod och ditt meddelande kunde inte skickas. "); ) ));

Felmetoden anropas om e-postskriptet returnerar ett fel. Låt oss först kontrollera att formMessages-elementet innehåller felklassen. Sedan kontrollerar vi om AJAX-förfrågan returnerar en responseText. Om så är fallet, använd texten för att ställa in innehållet i formMessages-elementet. Använd annars standardmeddelande om ett fel.
Detta är all HTML och JavaScript som krävs för att skapa ett AJAX-kontaktformulär. I nästa avsnitt kommer vi att skapa ett skript som ansvarar för att bearbeta formulärdata och skicka e-postmeddelandet.

Skapa ett PHP Mail Script

Detta enkla skript ansvarar för att validera formulärdata och skicka e-postmeddelandet. Om ett fel uppstår kommer e-postskriptet att svara med lämplig statuskod för att köra JavaScript.
Skapa en ny fil med namnet mailer.php och kopiera in följande kod till den.

"; // Skicka e-postmeddelandet. if (mail($mottagare, $subject, $email_content, $email_headers)) ( // Ställ in svarskoden till 200 (okej). http_response_code(200); echo "Tack! Ditt meddelande hasbeensent." ; ) else ( // Ställ in svarskod 500 (internt serverfel). http_response_code(500); echo "Hoppsan! Något gick fel och vi kunde inte skicka ditt meddelande."; ) ) else ( // Inte en POST-förfrågan, ställ in svarskod 403 (förbjuden ).http_response_code(403); echo "Det uppstod ett problem med din inlämning, försök igen."; ) ?>

Det här skriptet börjar med att verifiera att begäran skickades med POST-metoden. Om det inte är det kommer skriptet att returnera en HTTP 403 (förbjuden) statuskod och ett felmeddelande.
När vi har verifierat att rätt HTTP-metod användes extraherar vi formulärdata till variablerna $name , $email och $message. Vi använder även PHP trimmetoden för att trimma mellanslag.
Sedan kontrollerar vi att ingen av dessa variabler är tom. Om en eller flera variabler är tomma ställer du in svarskoden till 400 (dålig begäran) och returnerar ett felmeddelande till webbläsaren.

Vi förbereder ett brev att skicka. Först skapar vi en variabel med namnet på e-postmottagaren. Därefter skapar vi variabler för e-postmeddelandets ämne, innehåll och rubrik.
Notera. Att ställa in e-posthuvudet är valfritt. Men tack vare henne kommer brevet att se ut som att det skickats av personen som fyllde i formuläret.
Vi försöker skicka ett e-postmeddelande med en PHP-funktion. Om allt gick bra återkommer vi ett framgångsmeddelande. Om så inte är fallet ställer vi in ​​svarskoden 500 (internt serverfel) och returnerar ett felmeddelande.
Notera. Standardpostfunktionen är bra för detta, men det finns mer pålitliga sätt att skicka e-post med PHP.
Det är allt! Var gjort.
Öppna den genererade HTML-filen i en webbläsare och testa formuläret. För att allt ska fungera korrekt måste du använda en PHP-aktiverad webbserver och posten.

En modern webbplats kan inte föreställas utan ett feedbackformulär. Detta är en integrerad del av alla webbplatser, oavsett ämne. Kontaktformulär gör det möjligt för webbmastern att helt och hållet kommunicera med sina besökare, samtidigt som han inte publicerar sina data i det offentliga området, såsom e-post eller telefonnummer.

Detta gör det möjligt att inte bara svara på besökarnas frågor, utan även behandla ansökningar eller beställningar. Men att öppna din e-postadress är fylld med det faktum att den snart kommer att översvämmas av spam. För att göra detta söker skräppostrobotar på World Wide Web dygnet runt på jakt efter nya adresser dit du kan skicka din onödiga information. Som ett resultat av nedskräpning av postadressen kan du helt enkelt inte lägga märke till ett viktigt brev. Men kontaktformulärets plugin för webbplatsen löser detta problem framgångsrikt. Användaren behöver bara fylla i ett speciellt fält för att filtrera bort bots, till exempel ange en captcha, och endast nödvändig korrespondens kommer att skickas till webbplatsägarens brevlåda.

Vilka uppgifter löser kontaktformuläret på sajten?

Webbägarens sinnesfrid är dock inte det enda ett kontaktformulär gör bra. Hon lyckas utföra flera funktioner ganska framgångsrikt. De viktigaste av dem är:

1. Håll kontakten med webbplatsens publik. Det är osannolikt att någon kommer att argumentera med det faktum att ingen bara kommer att fylla i ett feedbackformulär. Troligtvis har personen som går för detta en fråga som han skulle vilja ställa till författaren till webbplatsen personligen. Som ett resultat får webbplatsägaren redan en intresserad användare, och kanske till och med en potentiell kund som delat med sig av sin kontaktinformation. Det vill säga, allt kommer att bero på ägaren av webbplatsen.
2. Uppmaning till handling. Vad en uppmaning till handling är och hur den uppmuntrar användare att vidta olika åtgärder är självförklarande. Men det är det som kan kopplas till kontaktformuläret på sajten. Till exempel, i utbyte mot en användares kontaktuppgifter, kan han erbjudas ett privat nyhetsbrev med användbart material, rabatt på ett köp i en webbutik, deltagande i en prisdragning, etc. Sådana överklaganden kan inte bara hjälpa till att samla en kontaktbas för ytterligare interaktion, utan också attrahera nya potentiella kunder.
3. Animering av sidor med hjälp av interaktiva formulär. Kontaktformulär kan vara mer än bara statiska. Popup-formulär, även om de verkar påträngande för många webbplatsanvändare, kan ganska "återuppliva" sidorna på webbplatsen. Det viktigaste när du skapar sådana formulär är att inte överdriva det.

Hur får man ett kontaktformulär?

Det är inte svårt att förse din webbplats med ett liknande formulär. Ett html-kontaktformulär som bara har ett fåtal fält är en helt löslig uppgift för professionella frilansare som kan göra det för en liten summa. Dessutom kan kontaktformulärets kod hittas oberoende på Internet. Men bara sådana metoder har många nackdelar. Faktum är att en sådan interaktiv form är sidans ansikte, vilket betyder att den måste vara attraktiv. Vad ska man göra om något inte passar henne, särskilt efter en tid? Var kan jag hitta utvecklaren som skrev formulärkoden så att han kan göra nödvändiga ändringar? Och om att skicka ett php-formulär finns i det globala nätverkets vidd, och det inte finns några programmeringskunskaper, verkar det i allmänhet omöjligt att ändra formuläret.

Dessutom, kontaktformuläret ska fungera som en klocka, eftersom alla skickade meddelanden måste nå adressaten och inte gå vilse på vägen. Tänk om en stor kund skickade ett förslag om samarbete via feedbackformuläret, men författaren till webbplatsen eller chefen för onlinebutiken inte fick det? Förmodligen är det inte nödvändigt att förklara att han inte kommer att skicka om sitt förslag, utan går till konkurrenter vars kontaktformulär fungerar som det ska. Allt detta är fyllt med förlust av inte bara pengar och kunder, utan också rykte, som i slutändan kan bli ännu värre.

FormDesigner är den perfekta lösningen för att skapa ett kontaktformulär

Att använda FormDesigners onlineformulärbyggare har aldrig varit enklare att skapa ditt eget interaktiva feedbackformulär. För det första är det snabbt, bara några klick och formuläret är klart att placeras på sajten. För det andra är det otroligt enkelt att arbeta med konstruktören, du behöver inte vara programmerare eller ha speciella färdigheter eller kunskaper för detta. Tack vare konstruktören kommer formuläret för e-postsändning att skapas även av en nybörjare på webbmaster tack vare ett tydligt och enkelt gränssnitt. För det tredje kan du alltid göra ändringar i en redan skapad blankett i enlighet med nya önskemål eller behov. Att redigera ett formulär är lika enkelt som att skapa ett nytt, och tack vare onlinevisningen av ändringar kan du direkt se alla ändringar som görs i formuläret. Dessutom ger webbplatsen andra fördelar för användaren, inklusive:

• Skapande av kontaktformulär med möjlighet att skicka en fil till webbplatsägaren;
• Felmeddelanden när du skapar formulär;
• Förmåga att skapa flerspråkiga formulär;
• Visuell designer av skapade former;
• Detaljerad statistik över alla ansökningar och mycket mer.

Arbetar med tjänsten FormDesigner

För att börja arbeta med en bekväm konstruktör måste du gå igenom ett enkelt registreringsförfarande. Därefter kan du gå direkt till skapandet av det kontaktformulär du behöver. Förresten, du kan registrera dig genom att helt enkelt logga in med ett konto på ett socialt nätverk.

Den första delen av konstruktorn låter dig anpassa hur e-postmeddelanden som skickas via feedbackformuläret kommer att se ut, ställa in skydd mot robotar och välja åtgärden som ska inträffa när e-postmeddelandet skickas.

Det andra avsnittet "Element" är nödvändigt för att kunna lägga till, ta bort eller helt enkelt redigera de fält som ska fyllas i. De kan göras inte bara textuella, utan också digitala och även med bilder. Även i det här avsnittet är det möjligt att ställa in knappar för sociala nätverk.

Efter det återstår det bara att ta emot koden för det personligt förberedda kontaktformuläret och installera det på sin webbplats.

Således låter onlineformulärbyggaren skapa och redigera kontaktformulär för vilken webbplats som helst i enlighet med deras ägares önskemål och behov på bara några minuter. Alla användare kommer snabbt att kunna redigera sina formulär, lägga till nya fält till dem eller ta bort onödiga element, skapa sina egna felmeddelanden när de använder formuläret. Och avancerade användare kommer säkert att vara intresserade av möjligheten att arbeta med designen och ställa in CSS-egenskaperna för den skapade formen efter deras smak, så att den matchar webbsidans design.

Separat är det värt att notera att om du har några frågor när du arbetar med tjänsten, kan du säkert kontakta teknisk support, som kommer att hjälpa till att lösa de problem som har uppstått. Du kan börja använda online-konstruktören helt gratis, samtidigt som du får tillgång till alla de viktigaste funktionerna hos online-konstruktören. Med hjälp av tjänsten FormDesigner blir det otroligt enkelt och snabbt att skapa dina egna webbformulär för webbplatsen.

Videohandledning om hur du skapar ett kontaktformulär på webbplatsen

Kontaktformulär 7 WordPress är det mest populära plugin-programmet för kontaktformulär. Modulen låter dig organisera feedback från webbplatsbesökare. För att arbeta med plugin-programmet behöver du inte kunna html, eftersom formuläret läggs till genom att du kopierar kortkoden till valfri sida på webbplatsen. Modulen låter dig lägga till ett obegränsat antal fält i formuläret, det finns integration med tredjeparts- och standardplugins. Formuläret kan anpassas genom att redigera mallens CSS-kod.

Skapa ett feedbackformulär

Efter installation av plugin-programmet kommer avsnittet "Kontaktformulär 7" att visas i sidomenyn. På sidan "kontaktformulär" finns en lista över alla sparade inställningar. Om du håller muspekaren över formuläret visas länkarna "redigera" och "duplicera". För att radera en post, markera rutan bredvid den, välj lämplig åtgärd och klicka på "apply"-knappen. För att skapa ett formulär, klicka på länken "lägg till ny".

För de som inte vet hur man skapar ett feedbackformulär för sajten finns det en mall med grundläggande fält:

• E-post;
• Ämne;
• Meddelande;
• Skicka-knapp.

Du kan lägga till i denna uppsättning eller skapa ett feedbackformulär från början genom att ta bort standardtexten.

För att lägga till ett fält, flytta markören till en ny rad och välj en fälttyp från listan. Därefter öppnas ett popup-fönster med inställningar:

• Fälttyp - om du vill göra fältet obligatoriskt, markera rutan;
• Namn - lämna som den är;
• Standardvärde - fyller textfält med färdig text;
• id-attributet - du måste ange ett godtyckligt nummer om det finns mer än ett fält av samma typ i formuläret;
• class attribute - ange namnet på CSS-klassen som är ansvarig för att anpassa textfältet. Om det lämnas tomt kommer standardvärdet att användas;
• Parametrar - värden för alternativknappen;
• Frågor och svar - värden för fältet "undersökningar".

Beroende på vilken typ av fält som valts kan vissa alternativ saknas. Du kan lägga till ett obegränsat antal objekt, men den sista bör vara "skicka"-knappen.

På sidan "brev" konfigurerar du mallen, ämnet och mottagaren av brev som kommer att skickas från feedbackformuläret. Blanketten kan lämnas som den är, eftersom alla fält är ifyllda som standard.

Hur man lägger till ett formulär på en sida

När du har lagt till alla obligatoriska fält kopierar du kortkoden. Det står under formulärets namn. Den här koden måste klistras in på alla sidor eller blogginlägg.

För att göra detta, för muspekaren över avsnittet "sidor" och välj länken "lägg till ny" från rullgardinsmenyn. Om du redan har skapat en sida där du vill placera formuläret, klicka på länken "alla sidor", hitta önskad post och klicka på "redigera". Du måste klistra in den kopierade kortkoden i ett textformulär, välj adress, titel och klicka på "publicera"-knappen. Efter det kommer ett formulär upp på sidan.

Utöver kontaktformuläret kan du lägga till vilken text eller bild som helst – precis som i en vanlig artikel. För att se hur ditt formulär kommer att se ut, klicka på "visa ändringar" eller klicka på permalänken om du redan har gjort ett inlägg. En länk till en sida med ett kontaktformulär kan publiceras i sidhuvudet, sidfoten eller sidofältet via en visuell redigerare.

Hur man lägger till ett kontaktformulär till widgets

Det skapade kontaktformuläret för WordPress kan placeras inte bara på sidan eller i inlägget. Om mallen stöder att skapa widgets kan du lägga till ett formulär i sidofältet eller sidfoten på webbplatsen.

Gå till Utseende > Widgets. Till vänster på sidan ser du en lista över tillgängliga widgets. Längst ner hittar du "text"-widgeten med beskrivningen "godtycklig text". Klicka på den och välj den plats där du vill placera formuläret. Beroende på din mall kan detta vara ett sidofält (sidokolumn), sidfot (sidfot), sidhuvud (huvud) etc. Välj önskad plats och klicka på "lägg till widget".

Ett tomt formulär kommer att dyka upp till höger på sidan där du behöver infoga en kortkod och ange en titel. Klicka på "spara" så läggs widgeten till.

Anslutning av ytterligare moduler

På grund av populariteten för kontaktformulär 7 bygger vissa tredjepartsutvecklare av plugin-program in kontaktformulärintegration i sina produkter. En sådan modul finns i en ren version av WordPress, Akismets skräppostfilter.

För att ansluta Akismet till ett kontaktformulär måste du skriva parametern "akismet:author" i raden av följande fält: din_e-post, ditt-namn och din-url. Eller ersätt bara standardfälten med följande rader:

Glöm inte taggen och tillhörande text som visas ovanför fältet. Du bör få samma som i skärmdumpen. Om du bara använder ett eller två fält i formuläret (be till exempel inte om en URL), använd lämpligt antal parametrar. Mer detaljerad information på den officiella webbplatsen

Hälsningar, vänner. Dagens handledning hjälper din wordpress-sajt att få ett snyggt och funktionellt kontaktformulär. Vi kommer att göra det med plugin-programmet Contact Form 7. Vid ett tillfälle ägnade jag mycket tid åt att leta efter ett normalt kontaktformulär och hittade inte något värdigt alternativ till detta plugin.

Plugin-funktioner

Låt mig återigen påminna dig om att vi kommer att arbeta med ett plugin, så om du behöver feedback utan ett plugin så är det bättre att du besöker artikeln om, installationen är lite mer komplicerad där, men å andra sidan, alternativet är mer universell (lämplig för alla webbplatser) och laddar servern mindre.

Den största fördelen med kontaktformuläret på Contact Form 7 är dess lätthet att anpassa, nästan obegränsad funktionalitet och automatisk designjustering till alla WordPress-mallar. Med dess hjälp kan du inte bara skapa ett formulär för att skicka meddelanden från webbplatsen. Insticksprogrammet kan användas för att skapa en beställningsknapp, en återuppringning eller ett komplext frågeformulär med kryssrutor och rullgardinslistor. Det är också möjligt att bifoga filer för överföring.

Med ett ord, plugin är megafunktionell.

Om du fortfarande är orolig över frågan "att göra eller inte göra ett kontaktformulär?" (du klarar dig med en enkel placering av kontaktinformation på rätt sidor), då säger jag otvetydigt - det är värt att göra.

För det första är det bekvämare att skicka ett meddelande direkt från webbplatsen än att öppna ett e-postprogram och fylla i allt manuellt där. Att spara tid har aldrig skadat någon.

För det andra kan kontaktformuläret anpassas och detta gör att du kan ta emot brev av ett standardformulär - det blir lättare att navigera i dem. Du kan till exempel ställa in en standardtitel för meddelandet "Beställ" och alla bokstäver från beställningssidan kommer med denna titel.

För det tredje, genom att använda ett kontaktformulär kan du dölja din e-postadress och därigenom bli av med eventuell skräppost som oundvikligen dyker upp när din e-postlåda får fri tillgång.

För det fjärde är det bara stilrent och modernt.

Installera och konfigurera kontaktformuläret 7 plugin

Insticksprogrammet finns i den allmänna wordpress-databasen, så det finns ingen anledning att leta efter dess filer någonstans, ladda ner dem till dig själv och sedan ladda upp dem till webbhotellet. Allt görs enklare - genom wordpress adminpanel, gå in i plugins-sektionen, skriv i sökfältet "Kontaktformulär 7" och installera det. Om du aldrig har installerat plugins, sedan detaljerade instruktioner om hur du installerar plugin.

Konfigurera kontaktformulär 7-plugin

Plugin-installationen består av två steg.

Den första är att anpassa ett specifikt formulär. Det kan finnas många olika former, var och en av dem kan innehålla sin egen uppsättning fält. Med ett ord, för varje uppgift och varje sida på webbplatsen, kan du separat skapa ett feedbackformulär, wordpress tillåter detta - deras lista kommer att lagras i plugin-databasen.

Det andra steget är att infoga formuläret på webbplatsens sidor. Varje formulär vi skapar inuti pluginet kommer att ha sin egen unika kortkod. För att infoga på sidan räcker det att bara infoga den.

Låt oss gå.

Först, i den vänstra menyn på adminpanelen, hittar vi fliken Kontaktformulär 7. En meny med två objekt dyker upp under den - "Formulär" och "Lägg till nytt".

Vi har inga färdiga formulär än, så låt oss gå till avsnittet "Lägg till nytt". En sida öppnas som ber dig välja ett språk, och standardspråket anges också där. Klicka bara på den blå "Lägg till ny"-knappen.

Formulärinställningen är uppdelad i separata block. Jag kommer att överväga dem i ordning.

Formulärnamnsblock

Det första blocket är ansvarigt för namnet på ditt formulär - placera markören på inskriptionen "Untitled" och ange det namn du behöver. Det här namnet kommer bara att visas för dig i listan över kontaktformulär för plugin, så gör det tydligt för dig så att du inte blir förvirrad i all sort i framtiden.

Form mall block

Från början innehåller detta block en standardkonfiguration av fält. Den innehåller namnet på avsändaren av brevet, hans e-postadress, brevets ämne, brevets innehåll och skicka-knappen.

Asterisker markerar obligatoriska fält. Om detta fält lämnas tomt kommer meddelandet inte att skickas.

Layouten på fälten kan anpassas med hjälp av den vanliga html-uppmärkningen.

När det gäller att anpassa själva fälten kan du ta bort de du inte behöver och lägga till de du behöver. Om du inte vill att ämnet för brevet ska matas in manuellt, radera helt enkelt motsvarande block.

Det är också väldigt enkelt att lägga till fält. På höger sida finns en knapp för att generera en tagg, genom att klicka på den kommer du att se en lista över alla möjliga fält som detta plugin stöder.

Välj önskat element och konfigurera dess inställningar. Insticksprogrammet är på ryska, så alla inställningar är intuitiva.

Den första kryssrutan anger om fältet är obligatoriskt eller valfritt (det lägger till en asterisk).

Efter att ha ställt in fältet kommer du att ha 2 kortkoder:

• "Kopiera den här koden och klistra in den i formulärmallen till vänster" - denna kod infogas i formulärkoden på samma sätt som alla andra;
• "Och klistra in följande kod i brevmallen nedan" - vi kommer att behöva den här koden för att designa bokstaven i nästa block.

Således kan du lägga till valfritt antal fält, kryssrutor, rullgardinslistor, element för att bifoga filer etc. till formuläret.

Blockera brev"

Nu är vår uppgift att sätta upp brevet som vi ska få. Brevet påverkar inte återkopplingsformulärets prestanda på något sätt, det tjänar endast till att förmedla informationen som angavs i formuläret.

Vår uppgift är att ta med all information i brevet.

I första stycket anger vi den e-postadress som meddelandet ska skickas till (det kan vara vad som helst).

Den andra posten anger från vilken e-postadress brevet kommer att skickas till dig. Jag skulle inte ändra någonting här, som standard anges postlådan för din blogg och en tagg med namnet på personen som skickar meddelandet läggs till i den.

Därefter anger vi ämnet för brevet. Som standard tas ämnet från fältet som fylls i formuläret. Men du kan ta bort detta element från formuläret och ange ett specifikt ämne i fältet, som ställs in automatiskt i varje bokstav. Jag gjorde detta för feedbackformulären från tjänste- och reklamsidorna. Meddelanden därifrån kommer alltid med samma ämne "Beställningstjänster" eller "Beställa reklam" - enkelt och tydligt.

Det extra rubrikfältet innehåller reply-To:-taggen så att när du svarar på ett brev som du fått från din blogg skickar du ett meddelande inte till bloggen utan till adressen som avsändaren av brevet angav i formulärfältet. Du behöver inte ändra detta fält.

Fältet "Meddelandemall" ansvarar för det interna innehållet i meddelandet du fått. Som standard innehåller den information om avsändaren, ämnet och texten i meddelandet som anges i fältet.

I slutet anges platsen från vilken brevet skickades.

Om du har lagt till några ytterligare fält i formuläret som inte är inställda som standard, glöm inte att lägga till motsvarande tagg i brevmallen. Den fick du i blocket "Formulärmall", där du skapade motsvarande tagg (fältet "Och klistra in följande kod i e-postmallen nedan").

All textinformation i detta block (förutom taggar) kan ändras efter eget tycke. Du kan också lägga till beskrivningar och byta taggar, placera dem i den ordning som passar dig.

Blockera "Brev 2"

Om du vill att någon annan ska ta emot meddelandet som skickas till dig kan du markera den här rutan.

Detta block är konfigurerat på liknande sätt som det föregående. Som standard är alla fält i den ifyllda så att brevet går till den som fyllt i formuläret (tydligen så att han inte glömmer).

Du kan ställa in att skicka en kopia, till exempel till din chef eller revisor.

Blockera "Meddelanden när du skickar ett formulär"

I det här blocket kan du konfigurera meddelanden som användaren ser efter att ha klickat på knappen Skicka meddelande. Om du vill ändra något - snälla, jag lämnade allt som det är.

Formuläraktivering

När du har fyllt i alla fält, gå tillbaka till början till "Form Name"-blocket och klicka på "spara"-knappen som finns till höger.

Insticksprogrammet kommer att placera formuläret du skapade i listan över giltiga och tilldela det en speciell kod så här:

Genom att klistra in den här koden var som helst på din webbplats har du ett färdigt formulär för att kommunicera med dina potentiella kunder.

Anti-spam - Akismet och Captcha

Spammare orsakar mycket problem för webbplatsägare, och varje ny form som låter dig skriva något ökar bara antalet skräppostrobotar.

Om du lämnar kontaktformulärplugin som standard kommer du att bombarderas med en massa tomma och meningslösa meddelanden efter ett tag.

Det finns två sätt att bli av med spammare:

1. Sätt en obligatorisk captcha (detta kan göras med en extra plugin - Really Simple CAPTCHA).
2. Använd anti-spam plugin för wordpress - Akismet.

Det första alternativet är obekvämt eftersom det tvingar besökare att manuellt ange ytterligare tecken. Det är inte så svårt, men vissa människor gillar det inte.

Att använda Akismet-pluginet är bekvämare eftersom det oberoende analyserar indata (namn, e-postadresser, länkar) och, baserat på den ackumulerade databasen, drar slutsatser om spam eller icke-spam-meddelanden.

Dessutom är akismet installerat på de flesta wordpress-sajter för att skydda mot spam i kommentarer till artiklar. Detta innebär att när du använder det behöver du inte installera ytterligare plugins och skapa en extra belastning på webbplatsen.

Spamskydd med Akismet

1. Installera Akismet-plugin på din webbplats och aktivera den - .

2. Lägg till ytterligare data till kontaktformulärtaggarna:

• i fältet med författarens namn, lägg till akismet:författare
• i avsändarens e-postfält akismet:author_email
• i fältet för webbplatsens adress akismet:author_url

Det borde se ut så här:

När det har sparats bör kontaktformuläret blockera alla meddelanden som skickas av spammare. Du kan kontrollera filterfunktionen med det speciella testnamnet "viagra-test-123? - när du anger den ska ett felmeddelande visas.

För att göra verifieringen mindre hård kan du bara markera några av fälten, såsom namn och e-post, och lämna webbplatsadressen omarkerad. I det här fallet ökar sannolikheten för att skicka spammeddelanden, men det är mindre sannolikt att du förlorar de meddelanden du behöver.

Spamskydd med Really Simple CAPTCHA

Om du upptäcker att Akismet inte passar dig (den hoppar över mycket skräppost eller blockerar nödvändiga meddelanden), så kan du aktivera captcha. För att göra detta, installera Really Simple CAPTCHA-plugin.

Öppna det nödvändiga kontaktformuläret för redigering

Välj Captcha från listan med taggar. I tagginställningarna kan du välja storlek på bilden med symboler, annars bör du inte ändra något. 2 taggar kommer att visas längst ner i inställningsfönstret, en är ansvarig för att visa bilden, den andra visar fältet för inmatning av data från denna bild.

För att captcha ska börja fungera måste du kopiera och klistra in båda dessa taggar i det vänstra fönstret i formulärmallen och sedan spara ändringarna.

Placera ett feedbackformulär i ett popup-fönster

Kontaktformuläret behöver inte alltid finnas i en specifik del av webbplatsen, ibland måste klienten kunna komma åt det från varje sida i resursen.

I sådana fall är det inte alltid bekvämt att placera en fullfjädrad form. Det är mycket lättare att placera en knapp på en iögonfallande plats som väcker uppmärksamhet. Att trycka på den här knappen bör redan leda till att formuläret öppnas.

Således kommer en person att kunna skicka meddelanden från webbplatsen utan att lämna sidan han behöver.

Detta görs med ett annat plugin - Easy FancyBox.

1. Installation av plugin

Först och främst installerar vi själva pluginet, det finns i den allmänna plugindatabasen, därför räcker det att ange dess namn i adminpanelen på din blogg i sökningen efter plugins. Efter installation av plugin-programmet, i avsnittet "inställningar", kommer fliken "mediafiler" att visas.

På den här fliken måste du hitta en lista över innehållstyper som ska visas i ett popup-fönster. Standard är endast bilder, du måste lägga till inlineinnehåll.

Detta slutför plugin-installationen, låt oss gå vidare till att ställa in feedback-knappen.

2. Klistra in koden på webbplatsen

I princip kan du använda en vanlig textlänk, men en bildknapp ser bättre ut.

På din webbplats, varhelst du vill visa en kontaktformulärknapp (i sidhuvudet, sidfoten eller sidofältet), klistra in följande kod:

I koden måste du ange adressen till bilden som du använder som feedbackknapp och redigera kortkoden för själva formuläret - ange ditt id och titel.

3. Ta bort begränsningen för kortkoder i sidofältet

Det här objektet krävs om du vill ställa in en knapp i sidofältet. Inte alltid sidofältet i WordPress låter dig köra kortkoder.

För att aktivera den här funktionen måste du öppna filen function.php för redigering (direkt från wordpress adminpanel) och infoga följande kod före den avslutande parentesen "?>":

add_filter("widget_text", "do_shortcode");

Det kommer att göra det möjligt att köra alla kortkoder i sidofältet.

Jag fick detta fina popup-formulär:

Flera olika popup-formulär på en sida

Ibland blir det nödvändigt att placera flera formulär på sajten med olika inställningar och fält.

Till exempel leder en knapp till ett formulär med ett namn och ett telefonnummer och tjänar till att beställa en återuppringning från webbplatsen, och den andra ska öppna ett annat formulär där en detaljerad beställningsförfrågan går (med en adress, ett beskrivningsfält, möjligheten för att bifoga en fil, etc.). I själva plugin-programmet Contact Form 7 kan du skapa ett oändligt antal formuläralternativ, men hur stoppar du in dem i olika knappar på samma sida?

För att göra detta måste du korrigera knappkoden från föregående stycke. Den första knappen använder varianten som visas ovan. I den andra ändras två värden:

1. Länken ändras, ställ in href-parametern till #contact_form_pop_2
2. Ändra id:t till samma värde #contact_form_pop_2