God eftermiddag kära bloggläsare. Vi fortsätter ämnet feedbackformulär på WordPress. Och eftersom vi pratar om dem, föreslår jag idag att prata om plugin-programmet WP Contact Form 7. Därefter kommer jag att berätta steg-för-steg-insticksprogrammet, och även kortfattat beskriva tilläggen för detta plugin.
Sidnavigering:
Beskrivning av WordPress kontaktformulär 7
2) Aktivera kontaktformulär 7 plugin i WordPress admin.
3) Gå till den nyskapade fliken som visas på bilden:
4) Klicka på fliken "Lägg till ny" och ange standardspråk för formuläret, eller välj önskat
5) Ange namnet på kontaktformuläret och klicka på spara.
6) Nu har vi en kortkod som redan kan kopieras och klistras in i ett inlägg eller sidofält för att visa formuläret - contact-form-7 id="1252" title="(!LANG:Formulär nummer 1)" (надо взять в квадратные скобки как на рисунке).!}
7) Så här ser vårt formulär ut:
Naturligtvis är det inte särskilt vackert, men ingen bryr sig om att skapa dina egna stilar eller göra din egen form och infoga insatser där.
Hur man visar kontaktformulär 7 på en godtycklig plats i mallen
I steg 6 av steg-för-steg-inställningen visade jag hur du kan ta kortkoden för CF7-koden och beskrev vidare att denna kod kan visas i en widget eller i en post, sida. Dessutom vill jag säga att du kan visa Kontaktformulär 7 var som helst i mallen. För att göra detta, infoga följande enkla kod:
Det är allt, om du gjorde allt rätt kommer du att få utdata från Kontaktformulär 7 på en godtycklig plats i WordPress-mallen.
Anpassa kontaktformulär 7 inmatningsfält
Tack vare honom kommer du dessutom att ha sådana lådor som:
Konfigurera svar på svar för kontaktformulär 7
I den nya versionen av pluginet CF7 4.4 och högre rekommenderar utvecklaren att skriva in i från-fältet (här finns det på huden nedan)
rätt adress som matchar din domän. Sett från huden, och denna rekommendation skapar ett problem:
Hur gör man ett svar till användaren från mailaren?
Om du bara klickar på svara så svarar vi på vårt eget mail, faktiskt så svarar vi själva. Detta är mycket obekvämt, eftersom vi måste manuellt kopiera användarens adress till utskicket och först därefter svara.
Lösningen på detta problem är, och som alltid, enkel. du behöver i fält Ytterligare rubriker lägg till kod:
Svara till:
Naturligtvis måste din e-post-sh ersättas med din e-postkortkod. Se hud nedan:
Nu när du får ett feedbackbrev från WordPress kan du klicka i mailet för att svara och ditt svar skickas till rätt e-post.
Om du efter dessa steg stöter på ett problem bör du läsa inlägget genom att klicka på länken. De huvudsakliga problemen och orsakerna till problem beskrivs i kontaktformuläret 7-plugin.
Det är allt. Jag hoppas att du förstår hur plugin-programmet och dess layouter är konfigurerade.
Hej allesamman. Hur som helst, jag har för mycket energi och jag bestämde mig idag för att skriva ytterligare en artikel som kommer att ägnas åt ett av WordPress-plugins. Ett ganska intressant och funktionellt plugin, det klarar sina uppgifter till 100 % och jag har inte funnit det bättre än att ge feedback.
Jag vill inte plåga dig på länge, jag tror att du redan har förstått vad som kommer att diskuteras i artikeln. Och så, idag kommer vi att förstå och konfigurera Plugin kontaktformulär 7 för WordPress, nämligen att skapa ett feedbackformulär.
Jag satt länge och funderade på vad som är nackdelarna med plugin och ingenting kom att tänka på, men denna skapelse har många plus.
Fördelar med plugin för kontaktformulär 7.
- Tydlighet och enkel installation. En person som stöter på detta plugin för första gången kommer att kunna lista ut det utan problem.
- Skapande av ett stort antal olika former och deras integration på sajten.
- Formuläret infogas med hjälp av en kortkod på sidan och var som helst på sidan. Det är väldigt bekvämt.
- Stöd för ryska och andra språk.
- Stöd för Ajax-förfrågningar.
- Spamskydd med en textfråga eller captcha. För captcha måste du dessutom installera Really Simple CAPTCHA.
- Anpassa utseendet på formuläret med hjälp av css-stilar.
- Integration med Akismet-tjänsten för att skydda mot spam.
På vår sida kan du se och använda ett sådant formulär om du klickar på menyalternativet "Kontakta oss", ett fönster dyker upp där du kan se ett bra exempel.
Låt oss börja!
Först måste vi ladda ner detta plugin. Du kan från vår server här är länken -\u003e eller från den officiella webbplatsen här är länken -\u003e Ladda ner från den officiella webbplatsen .
Efter nedladdningen måste du installera den på . Jag kommer inte att beskriva hur man installerar, jag tror att du borde känna till den här processen från A till Ö. Vi laddade ner den, installerade den, nu går vi direkt till den själva för att ta reda på det och konfigurera det.
Konfigurera kontaktformuläret 7-plugin och skapa ett feedbackformulär.
Nu när du har laddat ner och installerat allt efter behov, gå till WordPress adminpanel och hitta objektet Kontaktformulär 7, klicka på den så kommer vi till sidan för att lägga till ett nytt formulär.
Formskapande.
För att skapa ett nytt formulär måste du klicka på " Lägg till ny", välj sedan språk (ryska som standard) och klicka på "Lägg till nytt". Efter alla steg som tagits bör du ha den här bilden:
Formuläret har skapats, nu kommer vi att anpassa det efter dina behov och till att börja med ge det ett namn. I mitt fall ringer jag " Testformulär", du namnger det vad du vill och klickar sedan på "Spara". Nu kan du se kortkoden som måste infogas i koden för webbplatsen där detta formulär kommer att visas.
Vi kommer att behöva koden lite senare eftersom vi måste ställa in formuläret först. Gå till formulärmallen och anpassa den.
Rullgardinslista till höger Skapa tagg”, om du öppnar den kan du se många fält som läggs till i formuläret.
Generera taggfält Till vänster kan du se de fält som redan har lagts till i formuläret.
Låt oss till exempel göra ett enkelt formulär där det kommer att finnas ett namn, e-post, telefon, en textfråga för spamskydd, ett meddelande och en skicka-knapp.
Startar.
Skapa ett textfält för namnet. I rullgardinsmenyn "Generera tagg" väljer du " Textfält". Vi markerar det obligatoriska fältet, ger det ett namn i mitt fall "NAME" och tilldelar ett id så att fältet kan formateras med hjälp av css-stilar. Jag fick id=”namn”. Nedan kan du se texten " Kopiera denna kod och klistra in den i formulärmallen till vänster". Vi tar den här koden och kopierar den till formulärmallen, som på bilden:
För post (e-post) gör vi samma sak, för telefonen väljer du "Generera tagg" från listan, fältet " Telefonnummer” och det gör vi också analogt.
För att anpassa meddelandet, välj " Textfält” och vi gör detsamma i analogi med allt som beskrivs ovan.
Lägg nu till fältet Fråga". För att göra detta, välj " Fråga", ge det ett namn. I fältet Fråga|Svar kan du ställa olika frågor och svar, under fältet finns ett exempel på en logisk fråga, du kan ställa in en text, till exempel "3:e månaden på året?| mars” osv. Klistra in koden som tidigare.
fältet "Fråga" Och det sista vi behöver är knappen " skicka", kan du lämna den som finns i mallen eller i listan "Generera tagg", välj "Skicka knapp". Mallen är klar, tryck på knappen " Spara”.
Låt oss kolla vad vi har, kopiera kortkoden och klistra in den på sidan eller i någon del av koden där det behövs. Jag klistrar in på en testsida.
Det är vad jag gjorde:
Du måste ha något liknande.
Anpassa formuläret och meddelandedestinationen
Vi går ner lite under formulärmallen och ser adressinställningarna.
- Destinationsfält. Ange posten från vilken brev kommer att skickas till besökare som fyller i formuläret.
- Avsändarfält. Istället för<>, ersätter vi våra kortkoder (de namn som gavs till fälten). Du kan se dem ovan. I mitt fall kommer det att bli det<>.
- Ämnesfält. Jag skriver alltid ett feedbackformulär och anger webbplatsen.
- Brev mall fält. Här kan du visa vad ditt hjärta vill. För vårt exempel gör jag fältet Från:<>och detaljer Telefon: , Meddelande ..
- Resten av fälten är tomma.
Glöm inte att spara i slutet.
Går du ännu lägre kan du se meddelandeinställningarna. Allt här är på ryska, så du kan redigera för att passa dina behov som du vill. Här tror jag att du kommer att förstå
Formuläret är klart, du kan fortsätta för att testa och se om meddelandet kommer till den post du angett.
Allt fungerar bra för mig, efter att ha klickat på knappen "Skicka" ser jag meddelandet " Meddelandet skickades. Tack. ” Du kan testa och se vilka fel formuläret ger om du inte anger uppgifterna korrekt.
När det gäller css-stilar kan de läggas till i huvudfilen css style.css. Med hjälp av firebag kan du titta på fältens id och klasser och tilldela dem lämpliga stilar.
Plugin kontaktformulär 7 för WordPress mycket funktionell, du kan göra en form av vilken komplexitet som helst, jag är säker på att du är övertygad om detta. På detta avslutar jag, om några punkter inte är helt klara, skriv i kommentarerna så ska jag försöka hjälpa till att lista ut det. Tack.
Ett kontaktformulär är en viktig egenskap hos de flesta webbplatser. Det är därför det finns så många plugins för kontaktformulär i WordPress-katalogen. En av de mest populära är Contact Form 7. Plugin-programmet låter dig skapa formulär av alla slag; mycket flexibel och lätt att installera; har utvecklats i många år och innehåller många utvecklingar.
Skapa och visa kontaktformulär
Skapa formulär i admin
Efter installation av plugin kommer menyalternativet "Kontaktformulär 7" upp, genom vilket du kan skapa och ta bort formulär.
Formuläret i bilden skapades automatiskt när pluginet aktiverades.
Vi använder standardformuläret, för detta skapar vi en "Kontakta mig"-sida och infogar formulärets kortkod där.
Framsidan av sajten
Låt oss nu spara artikeln och se hur vårt formulär ser ut (med Twenty Sixteen-temat):
Bilden visar blanketten efter det skickade brevet (detta framgår av meddelandet längst ner på blanketten).
Formuläranpassning (skapa komplexa formulär)
Exemplet ovan visar hur du infogar ett färdigt och mycket enkelt kontaktformulär. Och låt oss nu titta på hur man skapar en form svårare. För att göra detta återgår vi till adminpanelen, till formulärhanteraren och går till redigering av standardformuläret.
I det övre fältet - namnet på formuläret (det är bara synligt i adminpanelen), ange ett namn som är tydligt för dig, till exempel: "Feedback om webbplatsen", "Jobbansökan", "Feedback blankett" , etc.
Under rubriken finns en kortkod. Vi använder det i register för att visa formuläret.
Och nedan är fyra flikar:
- Formulärmall
- Brev
- Ytterligare inställningar
Låt oss överväga varje flik separat.
Formulärmall
På den här fliken kan du anpassa fälten och utseendet på formuläret. Arbetsytan är WP HTML-redigeraren. Bara istället för de vanliga knapparna ser vi knappar för att infoga olika formulärfält.
Formlayout
För layout kan du använda html-taggar och plugin-kortkoder. Kortkoder lägger till formulärfält och html-taggar låter dig skapa en godtycklig HTML-struktur. Till exempel ser vårt standardformulär ut så här:
Och när den visas i ett inlägg blir den till denna HTML:
Kortkodssyntax
Låt oss klicka på knappen "Text". Ett fönster öppnas där vi kan ange attribut för textfältet. Ange och klicka på "Infoga tagg".
Taggen kommer senare att konverteras till ett textfält med html-kod:
Kortkoder kan enkelt skapas med kortkodskonstruktorn.
Men konstruktorn tillåter inte att du ändrar kortkoden (du kan bara skapa en kortkod där). Det finns två sätt att ändra kortkoden:
- ta bort och skapa en ny med konstruktorn.
- studera syntaxen och fixa fältkortkoden manuellt.
Med designern kommer du att reda ut det själv.
Och här kommer vi att analysera syntaxen för kortkoden.
Överväg till exempel en textfälttagg med ytterligare alternativ:
Text (nödvändig) Fälttyp: text, välj, lösenord, nummer, etc. (i det här fallet ett textfält). Bestämmer vilket formelement vår tagg kommer att konverteras till, vilket betyder vilken typ av data den kommer att acceptera. * En asterisk gör fältet obligatoriskt (formuläret skickas inte in och ett meddelande kommer att visas om att fältet måste fyllas i). Kundnamn (nödvändig) Fältets namn används som namnattribut i inmatningen och används även när mallen för det skickade brevet bildas. id:my-id Id-attributet vid inmatning med värdet my-id. Används för dekoration. class:min-klass Klassattributet vid inmatning med värdet min-klass. Används för dekoration. platshållare "(!LANG:Ange ett namn" Использовать текст "Введите имя" как placeholder. !}
Följ ordningen för taggattributen: först kommer fälttypen, sedan dess namn och först sedan ytterligare alternativ.
Fälttyper
- Textfält: text , e-post , tel , url , textområde
- Numeriska fält: nummer , intervall
- Datumfält: datum
- Kryssrutor, radioapparater, listor: kryssruta , radio , välj
- Filuppladdningsfält: fil
- CAPTCHA: captchac och captchar
- Omröstningar: frågesport
- "Acceptera"-fält: acceptans
- Skicka-knapp: skicka
- Anpassad fälttyp
Brev mall
På den andra fliken kan du finjustera mallen (layouten) och egenskaperna för det skickade brevet. I fälten på denna flik kan du använda speciella formulärfältstaggar - detta gör det möjligt att skicka de uppgifter som anges i formuläret i brevet.
Taggarna består av fältnamn från formulärmallen. Vi har till exempel skapat ett textfält med namnet: . Nu kan du använda taggen i din e-postmall. I brevet, istället för denna tagg, kommer värdet på fältet som användaren har angett (fullständigt namn) att ersättas.
E-postrubriker:
- Ytterligare rubriker - Svara till: skrivs här som standard. Svara-till-huvudet talar om för oss att det här e-postmeddelandet kan besvaras genom att klicka på knappen "Svara" i mailet, och formulärtaggen är namnet på fältet från mallen. Den användarspecificerade e-postadressen kommer att infogas istället för denna tagg. Du får något i stil med Reply-To: [e-postskyddad].
Till - e-postadressen dit e-postmeddelandet kommer att skickas. Du kan ange hur många rutor du vill separerade med kommatecken.
Från - namn och e-post, från vilken brevet kom. Vanligtvis anges serverns e-post här (till exempel [e-postskyddad]).
Du kan ange vilken e-post som helst, men om e-postdomänen skiljer sig från webbplatsdomänen kommer formuläret inte att klara kontrollen och kommer att "svärja" vid denna parameter, även om brev fortfarande kommer att skickas.
Ämne - E-postmeddelandets titel. Det kommer att framgå från vilket formulär uppgifterna skickades. Till exempel är ämnet för brevet "Fel på webbplatsen", "Återuppringningsorder" och så vidare. Välj en titel för att göra det lättare att arbeta med mottagna brev.
Brevkropp
Detta är nästa viktiga del av den här fliken. Här är texten till brevet. I texten använder vi alla samma formulärtaggar (fältnamn från formulärmallen).
Låt oss analysera standardbokstaven:
Från:<>Ämne: Meddelande: -- Skickat från webbplatsen Utforska kontaktformuläret 7-plugin (http://test-wp.ru)
Vi hade 4 fält som användaren fyllde i. Efter att ha skickat e-postmeddelandet kommer taggarna att förvandlas till värden och vi kommer att få ett e-postmeddelande så här:
Från: Dmitry
Valfria fält i e-postmeddelandets brödtext
Om användaren inte fyller i fältet, men det används i brevets brödtext, kommer brevets brödtext att vara ofullständig. På kroppen står det till exempel Man från staden, men användaren fyllde inte i fältet, vilket betyder att vi i brevet kommer att ta emot Man från staden ... En sådan rad i brevet är överflödig. För att ta bort denna rad från e-postmeddelandet, markera rutan "Uteslut utdata från rader med tomma meddelandetaggar". Observera att detta bara fungerar när fälttexten och kortkoden är på samma rad.
Alternativ "Använd HTML-format för brevet". Låter dig använda HTML-taggar i e-postmeddelandets brödtext. I det här fallet kan du använda en begränsad lista med HTML-taggar, eftersom inte alla e-postklienter eller tjänster kan bearbeta komplex HTML-uppmärkning korrekt. Du kan använda: tabeller, punktlistor, fetstil, stycken och så vidare. Sök på webben för mer information.
Kontaktformulär 7 låter dig skicka ett brev till två adresser, och inställningarna för varje brev är olika. Detta kan vara användbart när du behöver skicka ett brev till webbplatsens administratör med fullständig information och en dubblett till chefen, som endast innehåller orderdata.
Aviseringar om formulärinlämning
På den här fliken kan du redigera meddelanden som formuläret visar i en given situation: när du skickar ett brev framgångsrikt eller misslyckat, eller när fel uppstår.
Brevmallstaggar fungerar inte i dessa fält.
Ytterligare inställningar
Den här fliken är avsedd för avancerade användare och gör det möjligt att använda JS-kod för att utöka formulärets möjligheter. Till exempel, häng händelser för analyser.
Jag kommer att prata om användningen av denna funktionalitet i en separat artikel.
Kontaktformulär 7-plugin hjälper till att organisera feedback på din webbplats.
Du kan ladda ner kontaktformuläret 7-plugin på den officiella WordPress-webbplatsen
Du kan ladda ner Really Simple CAPTCHA-plugin på den officiella WordPress-webbplatsen
Vi tog upp hur man installerar och ansluter denna plugin i lektionen "", nu kommer vi att ta itu med de ytterligare funktionerna i plugin-programmet Kontaktformulär 7. Formuläret fungerar korrekt på bildskärmar, surfplattor, telefoner och bärbara datorer. Förresten, om din bärbara dator är trasig, så finns det en tjänst där HP bärbara datorer repareras.
Efter att du har laddat ner och aktiverat plugin, gå till plugin-inställningarna genom att gå till den nya delen av kontrollpanelen "Kontakter".
Håll muspekaren över formulärets namn och välj "Redigera"
Ett fönster för att ändra formulärparametrarna öppnas.
Eftersom webbplatsen inte kan använda ett, utan flera formulär (formulär för att skicka ett meddelande, formulär för att beställa ett samtal, formulär med personuppgifter), så att det inte finns någon förvirring om vilken form som ansvarar för vad, måste du ändra namnet av formuläret. För att göra detta, klicka på namnet på formuläret 1 .
Block nr 2 visar vad som kommer att visas på sidan i formuläret. Först kommer texten, namnet på fältet, efter koden för detta fält. Du kan ändra texten till vad du vill.
För att lägga till nya fält i formuläret, klicka på rullgardinsmenyn nr 3 - "Generera tagg" och välj önskat element från rullgardinslistan.
- Textfält
- E-post
- Telefonnummer
- Nummer (snurrbox)
- Nummer (skjutreglage)
- Textfält
- Rullgardinsmenyn
- Kryssrutor
- radioknappar
- Godkännande
- Fråga
- CAPTCHA
- Skickar en fil
- skickaknapp
Tips och formulärfält är som standard ordnade så här: överst finns en ledtråd, längst ner är ett element. Om du vill placera beskrivningen och elementet på en rad, ta bort taggen efter texten
. Hela blocket med beskrivningar och element måste vara på en rad och vara inuti taggen
Textfält
Från rullgardinsmenyn väljer du elementet "Textfält"
Om någon funktion som du lägger till krävs, markera rutan 1 och glöm inte att skriva den i beskrivningen.
Du kan lägga till ytterligare information i inmatningsfältet för att göra det lättare att fylla i formuläret. Kryssruta 2 "Använd som platshållare?" och ange en ledtråd i fältet bredvid. När du fyller i detta fält i formuläret försvinner verktygstipset. Följ sedan anvisningarna för plugin-programmet. Resultatet är ett fält som detta i färdig form:
Var noga med att infoga koden i brevmallen, annars skickas inte uppgifterna från detta fält till posten! Detta gäller inte bara textfält utan även andra element.
E-post
Används för att skicka avsändarens postlådeadress till formuläret
URL
Låter dig lägga till en webbadress i formuläret.
Telefonnummer
Endast nummer kan anges i detta fält.
Nummer (snurrbox)
Ett fält där du kan ställa in mängden av något, till exempel en produkt. Antalet ställs in med upp/ned-pilarna.
datum
Infogar en kalender i formuläret med möjlighet att välja ett datum. Det används till exempel för att boka rum på ett hotell. Ankomstdatum, avresedatum.
Textfält
Ja, bli inte förvånad 🙂 Ännu ett textfält. Den här gången är det här fältet stort och låter dig skriva mycket text i det. Till exempel recensioner, kommentarer.
Rullgardinsmenyn
När det finns många alternativ för något och du behöver välja något objekt från en stor lista, till exempel en lista över städer, gator, varor.
Listan måste placeras i valfältet, varje post på en ny rad.
Kryssrutor
En kryssruta, eller kryssruta på utvecklarjargong, är ett element som skapar en kryssruta. Det här fältet har två tillstånd - markerat eller inte. Flerval är möjligt. De finns bara i en rad, om du markerar rutan "Gör kryssrutor ömsesidigt uteslutande?" då kan bara ett alternativ väljas.
radioknappar
Omkopplare (slang. radioknappar) används när du behöver välja ett enda alternativ bland flera föreslagna. Genom att markera rutan "Placera etiketten först och sedan kryssrutan?" platsen för etiketten och urvalsfältet ändras, som standard, först urvalet och sedan etiketten.
Godkännande
bekräftelse på något. Anta ett avtal om att acceptera villkoren som beskrivs ovan.
Fråga
Detta är den första försvarslinjen mot spam, den mest elementära. Skriv någon typ av fråga i inställningen, du kan använda siffror, du kan använda bokstäver eller båda och ange rätt svar. Om svaret när du fyller i formuläret är korrekt kommer formuläret att skickas in. Grönt anger vilken del av denna formel som kommer att visas på webbplatsen framför svarsinmatningsfältet, rött anger svaret. Rätt svar i formeln skrivs efter tecknet | (vertikal stapel)
Lägger till spamskydd i formuläret.
En annan plugin krävs för att den här funktionen ska fungera. Ladda ner, installera, aktivera plugin.
Du kan inte ändra inställningarna, kopiera och klistra in 2 rader före skicka-knappen.
Skickar en fil
Du kan bifoga en fil till formuläret för att skicka ett meddelande. I inställningarna kan du ange maximal storlek i byte och tillåtna format för uppladdning, till exempel.jpg .tiff .doc
skickaknapp
Skickar in formuläret. I inställningarna i avsnittet "Genväg" - du kan ange namnet på knappen (Skicka, svara, skicka 🙂)
Anpassa utseendet på kontaktformuläret 7
Eftersom plugins har uppdateringsegenskaper kommer vi att göra ändringar i utseendet på formuläret i webbplatsens temastilfil style.css
Koden är ansvarig för att visa formuläret, dess fält och andra element:
Wpcf7 ( bakgrundsfärg:#ddd; ) /*form bakgrundsfärg */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px; linjehöjd: 20px; kant: 1px fast #C7C7C7; box-shadow: infälld 2px 2px 8px #F9F9F9; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s transitionease; : all 0.2s lätthet; övergång: alla 0.2s lätthet; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input: hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( bakgrund: #FDFDFD; disposition: ingen; )
Vad är här vad.
.wpcf7-ingång, .wpcf7-textområde - stil för inmatningsfält (textfält)
- stoppning- sätter indraget från innehållet till elementets kant. Här - indraget från texten som skrivits in i fältet till fältets kant. Värdet sätts i pixlar till Xpx, där X är antalet pixlar. Exempel: stoppning: 5px 3px 6px 8px;
- Färg- text färg.
- typsnittsfamilj- Teckensnitt för inmatningsfält.
- textstorlek- textstorlek
- radavstånd- radavstånd
- gräns- ram runt inmatningsfältet
- box skugga blockskugga. infälld indikerar att skuggan är intern. Om du vill ha en yttre skugga, utelämna detta värde. Det andra och tredje värdet på 2px 2px indikerar den horisontella respektive vertikala blandningen av skuggan. Det fjärde värdet, 8px, anger oskärpa radien för skuggan. Femte - #F9F9F9 - skuggans färg.
Anpassa kontaktformulär 7-knappen
.buttons_form ( stoppning: 0px; höjd: 30px; bredd: 150px !viktigt; kant: ingen !viktigt; markör: pekare; färg: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; border-radius: .5em; färg: #faddde; border: solid 1px #980c10; bakgrund: #d81b21; bakgrund: -webkit-gradient(linjär, vänster upptill, vänster nere, från(#ed1c24), till(# aa1317)); bakgrund: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )Kontaktformulär 7 meddelandestil
Den ansvarar för att rapportera fel eller lyckade inlämningar.
Wpcf7 .wpcf7-validation-errors( border:ingen; bakgrundsfärg:#246416; färg:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; bakgrundsfärg:# 349622; margin:0; padding:20px; ; -moz-border-radius: 10px; border-radius: 10px; färg: vit; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; bakgrundsfärg :#349622; padding:5px; padding- left: 5px; padding-right: 5px; border-radius:10px; width: 290px; färg: vit; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )
Och nu, för enkelhetens skull, hela koden med kommentarer:
Wpcf7 ( bakgrundsfärg:#ddd; ) /*form bakgrundsfärg */ .wpcf7 input, .wpcf7 textarea( /* Denna del av koden är ansvarig för stilen på inmatningsfälten, textområden */ padding:5px; /* Ställer in utfyllnaden från fields-elementet före dess innehåll, du kan sätta vilket värde som helst, till exempel 10px */ color:#1D1D1D; /* Textfärg i inmatningsfälten */ font-family:Arial, Helvetica, sans-serif; /* Texttypsnitt i inmatningsfält */ teckensnitt -size:16px; /* Textstorlek i inmatningsfält */ line-height: 20px; /* Radhöjd i inmatningsfält */ kantlinje: 1px fast #C7C7C7; /* Border runt fälten. Det första värdet är bredden i pixlar, det andra - boxstil, tredje - dess färg */ box-shadow: insatt 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - shadow blur radie, #F9F9F9 - shadow color */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; ) .wpcf7 .wpcf7-list- item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( kantlinje: ingen; stoppning-vänster: 0; marginal-vänster: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Den här delen är ansvarig för stilen på inmatningsfälten när du håller muspekaren över dem */ bakgrund: #FDFDFD; /* Bakgrunden för inmatningsfältet när du håller muspekaren över den */ kontur : ingen; /* Ytterkant av textinmatningsfältet */ ) o-övergång: 0; övergång: 0; kant: ingen; /* Kant runt knappen */ position: relativ ; färg: #fff; /* Textfärg */ text-transform: versaler; /* Texttransformation (versaler betyder att texten på knappen kommer att visas med versaler) */ /* Avrundning av knappens hörn värden för följande tre egenskaper måste vara desamma, eftersom de är samma, endast för olika webbläsare */ -webkit-border-radius: 6px /* Runda hörn för Chrome */ -moz-border-radius: 6px; /* Runda hörn för Mozilla FireFox */ border-radius: 6px; /* Runda hörn för alla andra webbläsare, inklusive mobil */ font-size: 14px; /* Button text size */ font-weight: bold; /* Textstil (fet betyder fetstil) */ padding-top: 11px; /* Toppstoppning från kanten av elementet till dess innehåll */ padding-bottom: 10px; /* Padding från botten av elementet till dess innehåll */ padding-left: 35px; /* Padding till vänster om elementets kant till dess innehåll */ padding-right: 35px; /* Utfyllnad till höger från kanten av elementet till dess innehåll */ /* Gradient bakgrund - Gradient bakgrunden för knappen */ bakgrundsfärg: #000000; /* Knappens bakgrundsfärg om övertoningen inte stöds av webbläsaren */ /* I följande egenskaper måste färgerna anges på samma sätt, eftersom de är lika, endast för olika webbläsare. Låt oss ta en titt på den första fastigheten. Delen from(#676767), to(#3B3B3B) betyder att vi behöver visa en gradient, där det från färg #676767) sker en övergång till färg #3B3B3B */ bakgrund: -webkit-gradient(linear, left top, vänster nere, från(#676767), till(#3B3B3B)); bakgrund: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Knappens skugga. Skuggfärg specificerad i RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); ) /* Vid svävning - Stil knappen när du håller muspekaren. Allt är nästan detsamma som i föregående block */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top , vänster nere, från(#246416), till(#349622)); bakgrund: -moz-linear-gradient(top, #246416, #349622); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Vid klick - knappstil när man klickar på den nästan samma som i föregående block */ .wpcf7 input.wpcf7-submit:active( top: 1px; färg: #d8c6e2; /* Knappens textfärg vid klickning */ bakgrundsfärg: #000000; bakgrund: -webkit-gradient( linjär, vänster upptill, vänster nere, från(#FF0000), till(#246416)); bakgrund: -moz-linear-gradient(top, #FF0000, #246416); filter: progid:DXImageTransform .Microsoft.gradient(startColorstr ="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: ingen; -moz-box-shadow: ingen; box-skugga: ingen ) /* CF7 Meddelanden - Stil för meddelanden om lyckad sändning, fel, etc. */ .wpcf7 .wpcf7-validation-errors( /* Meddelandestil för valideringsfel */ border:none; /* Message block border */ bakgrundsfärg:#246416; /* Bakgrund */ färg:#fff; /* Textfärg */ marginal:0; /* Yttre stoppning */ stoppning:20px; /* Inre stoppning */ /* Hörnavrundning i flera webbläsare - följande 3 egenskaper */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Framgångsmeddelandestil */ border:none; /* Meddelandeblockkant */ bakgrundsfärg:#7ad33f; / * Bakgrund */ margin:0; /* Yttre stoppning */ stoppning:20px; /* Inre stoppning */ /* Hörnavrundning i flera webbläsare - följande 3 egenskaper */ -webkit-border-radius: 10px; -moz- border-radius: 10px; border-radius: 10px; ).wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radie: 10px; färg: vit; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-color:#349622; padding:5px; stoppning-vänster: 5px stoppning-höger: 5px; border-radius:10px; bredd: 290px färg vit; /* Skugga */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( flytande: vänster; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: båda ;)
Kontaktformulär 7 kan hantera många kontaktformulär där du flexibelt kan anpassa innehållet i formulären och posten med ganska enkel uppmärkning. Formulär har inbyggt stöd för Ajax-inlämning, CAPTCHA, Akismets spamfilter och mer.
Dokumentation och support
Skärmdumpar
Installation
- Ladda upp hela mappen contact-form-7 till katalogen /wp-content/plugins/.
- Aktivera plugin-programmet från Plugins-sidan i din WordPress-instrumentpanel.
I WordPress-instrumentpanelens meny hittar du fliken "Feedback".
För att lära dig hur du använder pluginet korrekt kan du besöka dess hemsida.
Recensioner
Jag ser många människor hatar detta plugin eftersom de använder någon version som inte stöds som är buntad i ett tema, - allt jag kan säga av min egen erfarenhet är att efter att ha använt det i flera år på många webbplatser är ett stort tack till utvecklarna som håller det uppdaterat och gratis för alla. Det är extremt enkelt att konfigurera och anpassa. Skål!
Medlemmar och utvecklare
"Contact Form 7" är ett projekt med öppen källkod. Följande bidragsgivare bidrog till utvecklingen av plugin:
MedlemmarÄndringslogg
Se Releases för mer information.
5.1.6
- CSS: tar bort en stilregel från stilmallen som var onödig och i konflikt med Twenty Twentys regler.
- REST API: hämtar kontaktformulärets ID uttryckligen från ruttparametrarna.
5.1.5
- Config Validator: Nytt testobjekt för felet unavailable_html_elements.
- Config Validator: Nytt testobjekt för felet attachments_overweight.
5.1.4
- reCAPTCHA: Introduktion av konstanterna WPCF7_RECAPTCHA_SITEKEY och WPCF7_RECAPTCHA_SECRET.
- reCAPTCHA: Introduktion av filterkroken wpcf7_recaptcha_sitekey och wpcf7_recaptcha_secret.
- Lägger till parametern $status i filtret wpcf7_form_response_output.
- Genererar en slumpmässig kod när användaren är en registrerad användare.
- Vi introducerar WPCF7_ContactForm::unit_tag(), en offentlig metod som returnerar en enhetstagg.
- reCAPTCHA: Ger ett annat meddelande till skräppostloggen i fall där svarstoken är tom.
- Samtyckesflagga: stöd för alternativet label_first i samtyckesformulärtaggen.
5.1.3
- Fixade en bugg som gjorde det omöjligt att avmarkera ett alternativ på fliken Mail.
5.1.2
- Permanent kontakt: Introducerad kontaktlistaväljare.
- Konstant kontakt: En ytterligare inställning constant_contact har införts.
- reCAPTCHA: Introducerade wpcf7_recaptcha_actions och wpcf7_recaptcha_threshold filterkrokar.
5.1.1
- reCAPTCHA: Ändrar svaret till tomma svarstokens.
5.1
- Integrationsmodulen Permanent Contact har introducerats.
- Uppdaterad reCAPTCHA-modul för att stödja reCAPTCHA v3.
- Lägger till regler för mörkt läge.
5.0.5
- Fixat felmatchningsproblem mellan get_data_option() och get_default_option() i klassen WPCF7_FormTag.
- Tystar PHP-fel som uppstår vid unlink()-anrop.
- Introducerade wpcf7_is_file_path_in_content_dir() för att stödja UPLOADS-konstanten.
5.0.4
- Anger uttryckligen argumentet power_type i anropet register_post_type() för att åtgärda problemet med obehörig privilegieskalering.
- Bifoga en lokal fil - det är förbjudet att ange absoluta sökvägar till filer som finns utanför wp-innehållskatalogen.
- Configuration Validator - Lägger till ett testelement för att upptäcka felaktiga inställningar för bifogade filer.
- Fixade en bugg i JavaScript bakåtkompatibilitetsfunktionen för äldre webbläsare som inte stöder HTML5-platshållarattributet.
- Kryssrutan för samtycke - inaktiverar funktionen för att inte lagra formulärtaggen.
5.0.3
- CSS: Använd markörstilen "inte tillåtet" när du håller muspekaren över skicka-knappar i avaktiverat läge.
- Samtycksflagga: En revidering av tagggeneratorns användargränssnitt för att uppmuntra användningen av bättre integritetsskyddsalternativ.
- Implementering av wpcf7_anonymize_ip_addr()-funktionen.
- Introducerat consent_for:lagringsalternativ för alla typer av formulärtaggar.
5.0.2
- Lade till avsnittet "Sekretessmeddelanden" i filen readme.txt.
- Uppdaterat innehåll i metablocket Information.
- Använd get_user_locale() istället för get_locale() där det är lämpligare.
- Kryssrutan för samtycke: Återställ statusen för inaktiverade sändningsknappar efter framgångsrik ansökan.
5.0.1
- Fixat felaktig användning av _n().
- Konfigurationskontroll: Fixat felaktigt antal varningar på fliken Avancerade alternativ.
- Konfigurationskontroll: Fixade felaktig hantering av den speciella e-posttaggen [_site_admin_email] i rubrikfältet "Från".
- Acceptansflagga: De angivna klass- och id-attributen tillämpades på fel HTML-element.
- Konfigurationskontroll: Om det finns ett valfritt e-posthuvud för postlådor som Cc eller Reply-To, men ett möjligt tomt värde, kommer felet "Ogiltig postlådesyntax" att returneras.
- Ange uttryckligen den fjärde parametern till add_action() för att undvika att skicka oavsiktliga parametervärden.
- Kontrollera om målkatalogen är tom innan du tar bort den.
5.0
- Ytterligare inställningar: on_sent_ok och on_submit har tagits bort.
- Ny ytterligare inställning: skip_mail.
- Flamingo: Titeln på den inkommande kanalen ändras tillsammans med titeln på motsvarande kontaktformulär.
- DOM-händelser. Hela API-svarsobjektet är tillgängligt via egenskapen event.detail.apiResponse.
- HTML Mail: Lägger till språkrelaterade attribut till HTML-huvudet.
- Filuppladdning: Ställer in accept-attributet i uppladdningsfältet.
- Ny WPCF7_MailTag-klass introducerad.
- Låter dig avbryta ett försök att skicka e-post med hjälp av wpcf7_before_send_mail action kroken. Du kan också ställa in anpassad status och meddelande via action interceptor.
- Kryssrutan Acceptans: låter dig ange villkor i innehållsdelen av formulärtaggen.
- Kryssrutan Acceptans: Stöder tillvalsparametern.
- Nya anpassade e-posttaggar: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_smeknamn] och [_user_display_name].
- Nya filterhakar: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) och wpcf7_mail_tag_replaced_($type)
- Nya funktioner för formtaggar: noll-kontroller-behållare och inte-för-e-post
