Hei alle sammen. De ble bombardert med spørsmål om hvordan man implementerer et skjema som vises i et modalt vindu etter å ha klikket på en knapp, og etter innsending vil en melding om suksess eller fiasko vises.
Jeg tror det allerede er mye av dette på Internett, men siden folk spør, bestemte jeg meg for å gjøre det. Dessuten bør slik funksjonalitet være til stede på nesten hver destinasjonsside for å implementere en tilbakeringingsknapp. Nå vises faktisk flere og flere AB-testresultater, som sier at åpne skjemaer fungerer dårligere enn de som er skjult i et modalt vindu og åpnes etter å ha klikket på knappen.
Noen hevder at dette skyldes det faktum at folk sakte "utvikler immunitet" og den åpne formen er et aggressivt salg. Nå er det visstnok tiden kommet da brukeren, når han ser et åpent skjema, tror at de prøver å "selge" noe til ham. Jeg er ikke helt enig i denne teorien, men et korn av sannhet er til stede. Dette kan være sant i noen typer virksomhet. For nå, la oss komme inn på implementeringen av skjemaet.
Merk! Jeg vil ikke beskrive hver handling i detalj, men jeg tilbyr deg en ferdig versjon i kilden. Hvis du har spørsmål, skriv i kommentarfeltet. Vi finner ut av det :)
I dag starter vi ikke med jQuery, men med utformingen av knappen og skjemaet. Alle skript er inkludert på slutten av siden.
Knappen ved å klikke som modalvinduet vil åpne:
Send inn søknaden din
Du kan angi hvilken som helst klasse, men i href skriv #modal - dette vil være ID-en til beholderen med skyggeleggingen og kontaktskjemaet.
Nå vil jeg gi koden til skjemaet og blokken som skjemaet skal ligge på:
Etter å ha lagt til stiler, ser det slik ut:
For å lage et modalt vindu ble Remodal-biblioteket brukt. Dette er et sett med css- og js-filer, kun for å lage animerte modale vinduer. Du kan laste den ned fra lenken eller allerede med mine redigeringer på slutten av artikkelen.
Ta med stiler mellom head-taggene:
Og før den avsluttende body-taggen – legg til skript:
Script.js er et skript for å behandle et skjema. Den samme Ajax som lar oss utføre hele prosedyren uten å laste inn siden på nytt:
$ (dokument) .ready (function () ($ ("form"). submit (function () (// Hent skjema-ID var formID = $ (this) .attr ("id"); // Legg til hash til navnet ID var formNm = $ ("#" + formID); $ .ajax ((type: "POST", url: "mail.php", data: formNm.serialize (), suksess: funksjon (data) (/ / Output tekst av senderesultatet $ (formNm) .html (data);), error: function (jqXHR, tekst, feil) (// Output of the send error text $ (formNm) .html (error);)) ); return usann;) );));
Jeg vil ikke sitere kildekoden til css og js fra filene som er ansvarlige for det modale vinduet og formen, siden de er ganske store. Hvis noe, se på kilden. Men php-behandleren er stort sett standard (hvis jeg kan si det):
Senderens navn:$ navn Telefon:$ telefon "; $ send = post ($ til, $ emne, $ melding, $ overskrifter); if ($ send ==" sant ") (ekko"
Vær så snill, ikke glem å endre e-postadressene til dine egne.
Her er en ajax-form. Beklager at jeg ikke prøver å forklare i detalj hvordan hvert element ble laget. Jeg ville bare gi et ferdig resultat, men det er ingen vits i å beskrive alle animasjonene, opptredenene. Last ned kilden og bygg den inn på nettstedet ditt. Og det var alt for i dag. Lykke til alle sammen!
Gutter, jeg oppfordrer dere til å teste skjemaet på en ekte eller virtuell server (hosting). Sørg for at serveren din støtter php, at du har en betalt plan og ikke en prøveperiode. Ellers vil ikke skjemaet fungere i 90 % av tilfellene.
Ikke vent på et brev i postkassen hvis du nettopp har åpnet indeksfilen i nettleseren og klikket på "Send"-knappen. Php er et server-side språk!
Hvis du er for lat til å finne ut og lage skjemaet selv, så anbefaler jeg å ta hensyn til.
En oppdatert versjon av artikkelen finnes
(Sist oppdatert: 08.07.2016)
Hei alle sammen! Det er meg igjen, med et nyttig innlegg - popup for WordPress- for nybegynnere og ikke bare WordPress-brukere. Hvis du er interessert i WordPress popup-plugin, det kalles også en modal vindu-plugin, da treffer dere, venner, akkurat rett sted.
Du kan bruke plugin-en som jeg presenterer nedenfor for å: Kontaktskjema 7 i et modalt vindu; ethvert kontaktskjema (tilbakemelding) i et modalt (pop-up) vindu; video i et modalt vindu; bilder i et popup-vindu; plassering av nyttig informasjon med lenker; post abonnementsskjema for nye artikler i et modalt vindu og så videre, og så videre, alt, og du kan ikke liste det opp. Plugin-en er veldig enkel, uten kompliserte innstillinger og skaper nesten ikke ekstra belastning på/side.
Easy Modal Plugin - Popup / Modal Window for WordPress
Modal Window Plugin for WordPress - Enkel Modal Du kan installere dette pluginet på standard måte, gjennom adminpanelet - Plugins - Legg til en ny og i Søk etter plugins-feltet skriv inn navnet Easy Modal, trykk Enter. Den bør være den første på listen. Installer og aktiver den som vanlig. Og så kan du fortsette med å lage et nytt modalt vindu.
For å gjøre dette, klikk på den nye delen Easy Modal som vises og velg Modals-elementet:
Easy Modal - oppretter et nytt modalt vindu Etter det, helt øverst på siden, klikker du på Legg til ny-knappen:
Legg til et nytt vindu Og her er alt enkelt:
Lag et popup-videovindu I de generelle innstillingene (fanen Generelt) gi navnet på det nye vinduet (det vil ikke bli vist, dette er for deg, hvis du for eksempel oppretter flere modale vinduer); lastetype Load Sitewide (for hele nettstedet); tittelen på vinduet og lim til slutt inn koden du trenger i redigeringsprogrammet (tekstmodus). Jeg har en YouTube-videokode satt inn i eksemplet mitt.
Modalt vindusoppsett I parametrene kan du velge størrelsen på vinduet; om du skal bruke bakgrunn eller ikke; animasjonstype for modal / popup; plasseringen av vinduet, og du kan også fikse vinduet (merk av i boksen og spesifiser innrykk fra toppen av skjermen).
På Eksempler-fanen finner du eksempler på kode for å vise en popup i WordPress:
Modal utgangskode i WordPress Her kan du velge en enkel tekstlenke, knapp eller ikon. Merk at hvert nyopprettet vindu er tildelt eModal-klassen -. Det første vinduet som opprettes vil ha klassen eModal - 1, det andre eModal - 2, og så videre. Du trenger bare å erstatte nummeret selv etter tegnet -. Denne koden kan limes inn på eller hvor som helst i artikkelen din. Naturligvis kan du skrive hvilken som helst tekst i koden. Jeg glemte nesten at etter å ha opprettet det modale vinduet på høyre side av siden, ikke glem å klikke på Publiser-knappen.
Jeg satte inn koden til det modale vinduet med videoen i sidefeltet som en knapp:
Bloggsidefeltknapp Den besøkende klikker på den og et vindu åpnes med en video:
Modalt vindu med video Jeg håper, venner og kamerater, det generelle prinsippet for å jobbe med Easy Modal-plugin er klart for dere. Jeg vil bare legge til at du da eller umiddelbart kan designe utseendet for det modale vinduet ved å klikke på temaelementet. Dessverre har gratisversjonen av plugin bare ett tema for design, men du kan designe det som du vil, det er nok innstillinger. Når du tilpasser utseendet til det modale vinduet, kan du se en forhåndsvisning av utseendet til høyre:
Redigeringstema - styling modal / popup Etter alle innstillingene for utseendet til vinduet, klikk på Lagre-knappen til høyre. Og til slutt, mine damer og herrer, skal jeg vise dere et eksempel på visning av et kontaktskjema 7 i et modalt vindu.
Opprett en ny modal som vist ovenfor, og lim inn kortkoden for kontaktskjema 7 i et tekstredigeringsprogram (hvis du har denne plugin installert, hvis ikke):
Opprett kontaktskjema 7 i popup-vindu 
Knapp skriv til forfatter etter melding Hvis leseren ønsker å kontakte deg, klikker han på en knapp og kontaktskjemaet åpnes i et modalt vindu:
Skjema for kontakt med forfatteren i et modalt vindu Noe sånt. Alle dine opprettede popup-vinduer vil også vises på siden (element Modals), hvor forresten klassene for hvert modale vindu er angitt:
Laget modaler i WordPress Nylig, for et nettsted, ble jeg bedt om å lage et WordPress-tilbakemeldingsskjema i et modalt vindu. Det vil si at når du klikker på "skriv til oss"-lenken, i stedet for å gå til den tilsvarende siden, bør brukeren åpne et nytt popup-vindu, hvor meldingssendingsfunksjonen vil være plassert. Dette er en mer interaktiv løsning, selv om ikke alle liker den. Jeg personlig foretrekker den klassiske implementeringen med en kontaktside, men skjemaene på sidene er forskjellige - så det vil være nyttig å vurdere løsningen på dette problemet. I arbeidet mitt brukte jeg 2 plugins: kjent for mange Kontaktskjema 7 og Easy Modal-modulen for å lage et modalt vindu i WordPress.
Oppdatering 18.05.2017: Ut fra de siste anmeldelsene i depotet, kan det i noen tilfeller være problemer med arbeidet. Hvis dette også påvirker deg, prøv en ny løsning fra utviklerne kalt Popup Maker. Et annet alternativ kan vurderes.
Jeg vil ikke dvele på installasjonen og konfigurasjonen av kontaktskjema 7 i detalj, all informasjon om det. Bloggen hadde også en artikkel om hva som kan komme godt med.
La oss gå rett til Easy Modal... Finn ham. Utviklerne hevder at dette er den beste løsningen for å lage modaler på siden med ulike interessante muligheter for å presentere innhold.
Mer enn 10 tusen nedlastinger, anslag 4,6. Gyldige versjoner er 3.4 - 4.0.8, selv om jeg har kjørt den på WP 4.3.1. Til tross for at plugin-en nå har forvandlet seg til en ny Popup Maker-løsning, kan du fortsatt finne den vanlige Easy Modal-versjonen 2.0.17 på wordpress.org og når du søker etter plugins inne i admin-området. Ved å bruke eksempelet hans vil jeg fortelle deg om å lage et modalt tilbakemeldingsvindu i WordPress.
Etter installasjonen vil en del med samme navn vises, hvor det er flere elementer. Vi trenger den aller første - Modaler... Klikk på Legg til ny-knappen der.
Dette vil opprette en ny modal for WordPress-siden din. Det vil være 4 faner i elementinnstillingene:
- Generelt - generelle parametere.
- Visningsalternativer - Visningsalternativer.
- Lukk alternativer - innstillinger for lukking av vinduet (ved hjelp av et klikk eller Esc-knappen).
- Eksempler - kodeeksempler som skal brukes.
Generelle innstillinger inneholder navnet på vinduet (ikke vist på nettstedet), dets tittel, innhold og type nedlasting. I innholdsblokken, etter å ha byttet til HTML-modus, legg til kortkoden til tilbakemeldingsskjemaet i det modale vinduet.
Lasttype har 2 alternativer:
- Last inn hele nettstedet (for hele nettstedet).
- Per side / innlegg (for spesifikke innlegg og sider).
Et veldig interessant alternativ. Hvis du trenger et popup-vindu som vil vises på alle sidene på nettstedet (lenken er for eksempel plassert i sidefeltet), så slå ut det første alternativet. I det andre tilfellet vil den tilsvarende innstillingsblokken vises på sidene / innleggene på nettstedet når du redigerer:
Du kan aktivere og velge popup-vinduet for en bestemt side. Hvis du ikke merker av i boksen, vil ikke elementet lastes inn på nettstedet.
Den andre kategorien av modulparametrene - Visningsalternativer.
Her angir du:
- vindusstørrelse - automatisk, medium, adaptiv, liten, stor, etc .;
- bakgrunn - du kan bruke bakgrunnen for skjemaet eller vise den uten;
- animasjon av visning av et popup-vindu;
- posisjon (plassering) - øverst i midten, nederst til høyre, etc .; fast eller ikke;
- innrykk øverst på skjermen.
Eksempler på visning av utdata fra et modalt vindu i WordPress ved å bruke Easy Modal-pluginen finner du i den siste fanen.
Du må lime inn denne koden gjennom en widget i sidefeltet eller i et tekstredigeringsprogram. Det er ikke annerledes med enhver annen HTML-kode, det eneste er at den spesifiserer klassen til et spesifikt modalt vindu (eModal-1). For det andre elementet du opprettet, ville klassen være eModal-2, og så videre. For ikke å gjøre en feil når du limer inn koden, er den enkleste måten å kopiere den fra denne siden.
Redigering av huden til et modalt vindu
I Easy Modal plugin kan du i tillegg til innstillinger for et spesifikt element definere temaer for popup-vinduer (Theme). Det er bare én mal i den grunnleggende gratisversjonen av modulen, men dette er mer enn nok.
Dette verktøyet har 6 faner:
- Generelt - spesifiser navnet på emnet;
- Overlegg - bakgrunn (her kan du velge farge og gjennomsiktighet på formens bakgrunn);
- Container - forskjellige innstillinger for selve modalen (polstring, ramme, skygge);
- Tittel - parametere for tittelen på popup-vinduet (font, skygge);
- Innhold - font og farge på tekster i blokken;
- Lukk - et element for å lukke skjemaet (tekst og design).
Som du kan se, kan utseendet tilpasses som du vil i henhold til dine behov. Jeg fikk dette enkle WordPress-skjemaet i et modalt vindu:
Etter å ha angitt alle innstillingene, husk å lagre dem (klikk på Lagre-knappen).
Video av å legge til Contact Form 7 i Easy Modal popup-vindu
Forresten, jeg fant en video om å jobbe med Easy Modal-plugin, som demonstrerer prosessen med å lage et tilbakemeldingsmodalt vindu i WordPress. Der er modulgrensesnittet litt utdatert (noen innstillinger ser annerledes ut), men den generelle essensen fanges opp. Kanskje vil det være lettere for noen å forstå dette problemet ved hjelp av en video.
Totalt om modale vinduer for wordpress
Som nevnt ovenfor, er nå Easy Modal-plugin (bedømt etter den offisielle siden) blitt konvertert til Popup Maker. Jeg klarte å finne en modul med samme navn i depotet, men jeg har ikke testet den. Jeg forteller deg om dette slik at du vet hva du skal se etter, hvis plutselig Easy Modal i WordPress av påfølgende versjoner slutter å fungere.
Begge løsningene er gratis, selv om de har betalte tillegg. De lar deg tilpasse målretting, legge til flere temaer, inneholde analyser og noen andre funksjoner. Hvis du trenger en mer avansert modal vindusmekanisme, kan du se nærmere på disse utvidelsene.
Når det gjelder oppgaven med å åpne tilbakemeldingsskjemaet Kontaktskjema 7 i et popup-vindu, er det nok grunnleggende Easy Modal-funksjoner. Dessuten kan denne løsningen også brukes til å vise andre modale vinduer i WordPress - nyttige tips, tilleggsinformasjon, etc. Gitt tilstedeværelsen av en editor for å sette inn HTML-kode, kan du vise videoer, skjemaer osv. i popup-vinduet. Alt i alt en nyttig plugin. Hvis du har spørsmål om det, skriv i kommentarfeltet.
Hilsen, venner. Dagens veiledning vil hjelpe din wordpress-side med å få et fint og funksjonelt tilbakemeldingsskjema. Vi vil gjøre det ved å bruke plugin-modulen Contact Form 7. På et tidspunkt brukte jeg mye tid på å lete etter et vanlig kontaktskjema og fant ikke et verdig alternativ til denne plugin-en.
Plugin-funksjoner
La meg minne deg nok en gang om at vi kommer til å jobbe med en plugin, så hvis du trenger tilbakemelding uten en plugin, bør du besøke artikkelen om, innstillingen der er litt mer komplisert, men på den annen side er alternativet mer universell (egnet for alle nettsteder) og mindre belastning på serveren.
Den største fordelen med kontaktskjemaet på Kontaktskjema 7 er dets enkelhet med tilpasning, nesten ubegrenset funksjonalitet og automatisk designjustering for alle WordPress-maler. Med dens hjelp kan du ikke bare lage et skjema for å sende meldinger fra nettstedet. Plugin-modulen kan brukes til å lage en bestillingsknapp, tilbakeringing eller komplekst spørreskjema med avmerkingsbokser og nedtrekkslister. Det er også mulig å legge ved filer for overføring.
Kort sagt, plugin er megafunksjonell.
Hvis du fortsatt er bekymret for spørsmålet "å lage eller ikke lage et kontaktskjema?" (du kan klare deg med enkel plassering av kontaktinformasjon på de nødvendige sidene), da vil jeg si utvetydig - det er verdt å gjøre.
For det første er det mer praktisk å sende en melding direkte fra siden enn å åpne e-postprogrammet og fylle ut alt manuelt der. Å spare tid vil ikke skade noen.
For det andre kan kontaktskjemaet tilpasses, og dette vil tillate deg å motta brev med et standardskjema - det vil være lettere å navigere i dem. For eksempel kan du sette en standard overskrift for "Bestilling"-meldingen og alle e-poster fra ordresiden vil komme med denne overskriften.
For det tredje lar bruken av et kontaktskjema deg skjule e-postadressen din og dermed bli kvitt mulig spam som uunngåelig dukker opp når e-postkontoen din er fritt tilgjengelig.
For det fjerde er det bare stilig og moderne.
Installere og konfigurere kontaktskjema 7-plugin
Plugin-en er i den vanlige wordpress-databasen, så det er ikke nødvendig å lete etter filene et sted, laste dem ned selv og deretter laste dem opp til hostingen. Alt er gjort enklere - gjennom WordPress-administrasjonspanelet, gå inn i plugins-delen, skriv inn "Kontaktskjema 7" i søkefeltet og installer det. Hvis du aldri har installert plugins, så detaljerte instruksjoner om hvordan du installerer en plugin.
Konfigurering av kontaktskjema 7-plugin
Plugin-konfigurasjonen består av to trinn.
Den første er å tilpasse et bestemt skjema. Det kan være mange forskjellige former, hver av dem kan inneholde sitt eget sett med felt. Med et ord, for hver oppgave og hver side på nettstedet, kan du separat lage et tilbakemeldingsskjema, wordpress tillater dette - listen deres vil bli lagret i plugin-databasen.
Den andre fasen er å sette inn skjemaet på sidene på nettstedet. Hvert skjema vi lager inne i pluginet vil ha sin egen unike kortkode. For å sette den inn på siden, vil det være nok å sette inn bare den.
Så la oss gå.
Til å begynne med finner vi i administrasjonspanelets venstremeny fanen Kontaktskjema 7. Under den vil en meny med to elementer - "Skjemaer" og "Legg til nytt" dukke opp.
Vi har ikke ferdige skjemaer ennå, gå derfor til delen "Legg til ny". En side åpnes der, og tilbyr å velge et språk, og standardspråket er også angitt der. Bare klikk på den blå Legg til ny-knappen.
Skjematilpasning er delt inn i separate blokker. Jeg vil vurdere dem i rekkefølge.
Skjemanavnblokk
Den første blokken er ansvarlig for navnet på skjemaet ditt - sett markøren på inskripsjonen "Uten tittel" og skriv inn navnet du trenger. Dette navnet vil bare vises for deg i listen over plugin-kontaktskjemaer, så gjør det forståelig for deg for ikke å bli forvirret i all variasjonen i fremtiden.
Skjemamalblokk
I utgangspunktet inneholder denne blokken en standard konfigurasjon av felt. Den inneholder navnet på avsenderen av brevet, hans e-postadresse, emnet for brevet, innholdet i brevet og send-knappen.
Obligatoriske felt er merket med asterisker. Hvis dette feltet er tomt, sendes ikke meldingen.
Oppsettet av feltene kan tilpasses ved hjelp av vanlig html-oppmerking.
Når det gjelder å sette opp selve feltene, kan du slette unødvendige og legge til de du trenger. Hvis du ikke ønsker at emnet for brevet skal legges inn manuelt, sletter du bare den tilsvarende blokken.
Å legge til felt er også veldig enkelt. På høyre side er det en knapp for å generere en tag, ved å klikke på den vil du se en liste over alle mulige felt som denne plugin støtter.
Velg ønsket element og konfigurer parameterne. Programtillegget er på russisk, så alle innstillinger er intuitive.
Den første avmerkingsboksen indikerer et obligatorisk eller valgfritt felt (det legger til en stjerne).
Etter å ha satt opp feltet, vil du ha 2 kortkoder:
- "Kopier denne koden og lim den inn i skjemamalen til venstre" - denne koden settes inn i skjemakoden på samme måte som alle andre;
- "Og lim inn følgende kode i brevmalen nedenfor" - vi trenger denne koden for å designe bokstaven i neste blokk.
Dermed kan du legge til et hvilket som helst antall felt, avmerkingsbokser, nedtrekkslister, elementer for å legge ved filer osv. i skjemaet.
Blokkbokstaver"
Nå er vår oppgave å tilpasse brevet som vi vil motta. Brevet påvirker ikke på noen måte ytelsen til tilbakemeldingsskjemaet, det tjener kun til å overføre informasjonen som ble lagt inn i skjemaet.
Vår oppgave er å inkludere all informasjon i brevet.
Som det første elementet angir vi e-postadressen som meldingen skal sendes til (det kan være hva som helst).
Det andre elementet angir e-posten som brevet vil bli sendt til deg fra. Jeg ville ikke endret noe her, som standard er bloggens postkasse spesifisert og det legges til en tag med navnet på personen som sender meldingen.
Deretter angir vi emnet for brevet. Vanligvis er emnet hentet fra feltet som fylles ut i skjemaet. Men du kan fjerne dette elementet fra skjemaet, og angi et spesifikt emne i feltet, som settes automatisk i hver bokstav. Jeg gjorde dette for tilbakemeldingsskjemaer fra sider om tjenester og annonsering. Meldinger derfra kommer alltid med samme tema «Bestillingstjenester» eller «Bestilling av annonsering» – enkelt og tydelig.
Feltet med ekstra overskrifter inneholder "Svar til:"-taggen slik at når du svarer på et brev mottatt fra bloggen din, sender du en melding til bloggen og til adressen angitt av avsenderen av brevet i skjemafeltet. Det er ikke verdt å endre dette feltet.
Feltet «Brevmal» er ansvarlig for det interne innholdet i meldingen du mottok. Som standard inneholder den informasjon om avsenderen, emnet og meldingsteksten som er skrevet inn i feltet.
På slutten angis stedet som brevet ble sendt fra.
Hvis du skrev inn flere felt i skjemaet som ikke var angitt som standard, så ikke glem å legge til den tilsvarende taggen i brevmalen. Den ble gitt til deg i "Skjemamal"-blokken, der du genererte den tilsvarende taggen (feltet "Og lim inn følgende kode i brevmalen nedenfor").
All tekstinformasjon i denne blokken (bortsett fra tagger) kan endres etter eget ønske. Du kan også legge til eventuelle beskrivelser og endre tagger på steder, plassere dem i den rekkefølgen som passer deg.
Blokker "Brev 2"
Hvis du ønsker at noen andre skal motta meldingen sendt til deg, så kan du sette et kryss i denne blokken.
Denne blokken er konfigurert på samme måte som den forrige. Som standard er alle feltene i den fylt ut slik at brevet går til personen som fylte ut skjemaet (tilsynelatende, slik at han ikke glemmer).
Du kan sette opp å sende en kopi, for eksempel til din leder eller regnskapsfører.
Blokker "Varsler ved innsending av skjema"
I denne blokken kan du tilpasse meldingene som brukeren ser etter at han har klikket på send melding-knappen. Hvis du vil endre noe - vær så snill, jeg lot alt være som det er.
Skjemaaktivering
Etter at du har fylt ut alle feltene går du tilbake til begynnelsen til "Skjemanavn"-blokken og klikker på "lagre"-knappen til høyre.
Programtillegget vil plassere skjemaet du opprettet i listen over gyldige og tildele det en spesiell kode som dette:
[kontakt - skjema - 7 id = "5464" title = "(! LANG: Sjekk" ] !} |
Ved å lime inn denne koden hvor som helst på nettstedet ditt, vil du motta et ferdig skjema for å kommunisere med potensielle kunder.
Anti-spam - Akismet og Captcha
Spammere forårsaker mye trøbbel for nettstedeierne, og hvert nytt skjema som lar deg skrive noe, øker bare antallet spambotter.
Hvis du lar kontaktskjemapluginen være i sin grunnleggende form, vil du etter en stund bli angrepet av mange tomme og meningsløse meldinger.
Det er to måter å bli kvitt spammere på:
- Sett inn en obligatorisk captcha (dette kan gjøres med en ekstra plugin - Really Simple CAPTCHA).
- Bruk wordpress antispam-plugin - Akismet.
Det første alternativet er upraktisk ved at det tvinger besøkende til å legge inn flere tegn manuelt. Det er ikke så vanskelig, men noen liker det ikke.
Å bruke Akismet-plugin-modulen er mer praktisk ved at den uavhengig analyserer de angitte dataene (navn, e-postadresser, lenker) og, basert på den utviklede databasen, trekker konklusjoner om spam- eller ikke-spam-meldingen.
I tillegg finnes akismet på de fleste wordpress-sider for å forhindre spam-kommentarer på artikler. Dette betyr at når du bruker det, trenger du ikke å installere flere plugins og skape unødvendig belastning på nettstedet.
Spambeskyttelse med Akismet
1. Installer Akismet-pluginen på nettstedet ditt og aktiver det -.
2. Legg til tilleggsdata til taggene i kontaktskjemaet:
- i feltet med forfatterens navn, legg til akismet: forfatter
- i feltet med e-posten til avsenderen av brevet akismet: forfatter_e-post
- i adressefeltet til nettstedet akismet: author_url
Det skal se slik ut:
Når det er lagret, skal kontaktskjemaet blokkere alle meldinger sendt av spammere. Du kan sjekke filteroperasjonen ved å bruke det spesielle testnavnet "viagra-test-123? - når du skriver inn det, skal det vises en feilmelding.
For å gjøre kontrollen mindre streng, kan du sjekke bare deler av feltene, for eksempel navn og e-post, og la nettstedsadressen være umerket. I dette tilfellet øker sannsynligheten for å sende spam-meldinger, men det er mindre sannsynlig at du mister meldingene du ønsker.
Spambeskyttelse med Really Simple CAPTCHA
Hvis du finner ut at Akismet ikke passer deg (det slipper inn mye spam eller blokkerer nødvendige meldinger), så kan du koble til en captcha. For å gjøre dette, installer Really Simple CAPTCHA-plugin.
Åpne det nødvendige kontaktskjemaet for redigering
I listen over tagger velger du Captcha. I tag-innstillingene kan du velge størrelsen på bildet med symbolene, ellers trenger ingenting å endres. Nederst i innstillingsvinduet vil 2 tagger vises, den ene er ansvarlig for å vise et bilde, den andre viser et felt for å legge inn data fra dette bildet.
For at captchaen skal begynne å fungere, må du kopiere og lime inn begge disse kodene i det venstre vinduet i skjemamalen, og deretter lagre endringene.
Plassere et tilbakemeldingsskjema i et popup-vindu
Kontaktskjemaet trenger ikke alltid å være plassert i en bestemt del av nettstedet; noen ganger må klienten ha tilgang til det fra hver side av ressursen.
I slike tilfeller er det ikke alltid hensiktsmessig å legge ut et fullstendig skjema. Det er mye lettere å plassere en oppmerksomhetsknapp på et fremtredende sted. Å trykke på denne knappen bør allerede føre til åpning av skjemaet.
Dermed vil en person kunne sende meldinger fra siden uten å forlate siden han trenger.
Dette gjøres ved hjelp av en annen plugin - Easy FancyBox.
1. Installere plugin
Først av alt, installerer vi selve plugin-modulen, den er i den generelle plugin-databasen, derfor er det nok å skrive inn navnet i plugin-søket i administrasjonspanelet til bloggen din. Etter at du har installert plugin-modulen, vil fanen "Mediefiler" vises i delen "innstillinger".
I denne fanen må du finne en liste over innholdstyper som skal vises i popup-vinduet. Som standard er det bare bilder, du må legge til innebygd innhold.
Dette fullfører plugin-oppsettet, fortsett til å sette opp tilbakemeldingsknappen.
2. Sett inn koden på nettstedet
I prinsippet kan du bruke en vanlig tekstlenke, men bildeknappen vil se bedre ut.
På nettstedet ditt, der du vil vise knappen for kontaktskjemaet (i topptekst, bunntekst eller sidefelt), setter du inn følgende kode:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "Kontakt skjema" alt = " Kontakt skjema " src = "http: // lenke til bildet"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [kontakt - skjema - 7 id = "id for skjemaet ditt" tittel = "navnet på skjemaet ditt"] < / div > < / div > |
I koden må du spesifisere adressen til bildet du bruker som tilbakemeldingsknapp, og redigere kortkoden til selve skjemaet - skriv ID og tittel.
3. Fjern begrensningen på kortkoder i sidefeltet
Dette elementet er nødvendig hvis du vil installere en knapp i sidefeltet. Ikke alltid sidefeltet i WordPress lar deg kjøre kortkoder.
For å aktivere denne funksjonen må du åpne function.php-filen for redigering (direkte fra WordPress-adminpanelet) og sette inn følgende kode før den avsluttende klammeparentesen "?>":
add_filter ("widget_text", "do_shortcode");
add_filter ("widget_text", "do_shortcode"); |
Det vil gjøre deg i stand til å utføre alle kortkoder i sidefeltet.
Jeg endte opp med et fint popup-skjema som dette:
Flere forskjellige popup-skjemaer på én side
Noen ganger blir det nødvendig å plassere flere skjemaer med forskjellige innstillinger og felt på siden.
For eksempel, en knapp du har fører til et skjema med navn og telefonnummer og tjener til å bestille tilbakeringing fra nettstedet, og den andre skal åpne et annet skjema der det er en detaljert bestillingsforespørsel (med en adresse, et beskrivelsesfelt , muligheten til å legge ved en fil osv.) ). I selve kontaktskjemaet 7-plugin kan du lage et uendelig antall skjemaalternativer, men hvordan passer du dem inn i forskjellige knapper på samme side?
For å gjøre dette må du korrigere knappekoden fra forrige avsnitt. Den første knappen bruker alternativet ovenfor. I den andre endres to verdier:
- Linken endres, href-parameteren tildeles verdien # contact_form_pop_2
- Endre ID-en til samme verdi # contact_form_pop_2
Hei min kjære leser! I denne delen vil jeg lede deg gjennom hvordan jeg implementerte et popup-tilbakeringingsskjema på et WordPress-nettsted.
Faktum er at tilbakeringingsskjemaet brukes veldig ofte av de fleste webmastere nettopp for brukernes bekvemmelighet, slik at de tar den målrettede handlingen så snart som mulig - det vil si å legge igjen en forespørsel på nettstedet.
Du kan ofte se dem på mange kommersielle nettsteder som tilbyr tjenester eller tilbyr å kjøpe et hvilket som helst produkt. Faktisk er nettbutikker ikke en full syklus, det vil si når det ikke er noen kurv, men det er noe som en forhåndsbestilling gjennom dette skjemaet. Slik kan de se ut:
Eller i form av en knapp også i overskriften på nettstedet:
Noen kan bruke dem i bunnteksten på siden, dette er også tillatt. Det ser slik ut:
Så venner. Alt dette var eksempler, nå implementerer vi det samme tilbakeringingsskjemaet for en WordPress-side i praksis. Jeg vil gjøre det på nettstedet, som er engasjert i forbedring av territoriet til Kaliningrad.
Først av alt, må vi gå inn og gå til plugins-delen, hvor vi vil legge til en ny plugin kalt Contact Form 7. Dette er den mest populære løsningen for å lage enkle og komplekse blogger.
Ikke huhra muhra - 24 millioner nedlastinger snakker allerede mye. Klikk på installeringsknappen og den vises på venstre side av administrasjonspanelet.
Russisk er allerede valgt som standard, så ikke bekymre deg. Vi fortsetter prosessen.
Nå må vi legge til feltene som skal delta. De er allerede installert som standard, i prinsippet kan du la dem stå, ikke slett dem. Det eneste jeg vil legge til er et obligatorisk felt med et telefonnummer.
For å gjøre dette, må vi klikke på "generer tag"-knappen på høyre side av skjermen og velge riktig element. På denne måten:
Klikk på elementet "Telefonnummer", sett av i ønsket felt i avkrysningsboksen og kopier deretter den resulterende taggen inn i skjemaet til venstre sammen med andre navn og inn i malen for brevet.
På venstre side vil du ha en oppføring som dette:
Plasser telefonnummerfeltet nedenfor.
På venstre side av malen for innkommende brev vil vi ha følgende oppføring:
Ikke glem å merke av for "Bruk HTML-e-postformat" også
Nederst trenger du en linje som denne "Vennligst fyll ut det obligatoriske feltet" for å oversette til russisk, noe sånt som dette: "Vennligst fyll ut det obligatoriske feltet"
I adressatfeltet legger du til en e-post hvor søknader fra siden vil bli sendt.
Fint! Tilbakeringingsskjemaet for nettstedet er nesten klart. Nå må vi få den til å dukke opp når den klikkes.
Lag et popup-skjema
Vår oppgave er å ha et pop-up tilbakeringingsskjema når vi klikker på lenkeknappen. For å lage den trenger vi en spesiell plugin basert på Jquery-språket, den heter Easy FancyBox. Den er også tilgjengelig for installasjon direkte fra administrasjonsområdet. La oss legge det til nå.
Bare klikk på "Installer" og det vil begynne å fungere for deg. Den har innstillinger for mediefiler. Vi kan gå gjennom dem kort.
Bildestørrelser - angi dine egne verdier for miniatyrbilder, mellomstore og store bilder.
FancyBox-effekt for følgende mediekategorier:
- Bilder
- Pdf-dokumenter
- Innebygd innhold
- SWF-diagrammer
- Youtube
- Vimeo
- Dailymotion
- IFrames
Angi hva du ønsker å bruke i fremtiden. Jeg lar det bare være for bilder.
Du kan også stille inn opasitet og farge. Jeg spurte ikke om noe, jeg la alt som det er som standard.
Vindu
- Vis ikon for lukking av vinduet
- Topptekstfarge og kantfarge
- Dimensjoner (standard 560x340x10)
- Atferd (forsinkelse i sekunder når tilbakeringingsskjemaet vises på siden og lukkehastigheten).
Kompatibel med andre nettlesere og enheter
- Inkluder regler for nettleseren IE 6 og 7 versjoner (stiler er ment)
- Aktiver stilregel for IE 8-nettleseren
Jeg spesifiserte ikke noe i dem, selv om du kan eksperimentere med skjemaets kompatibilitet på tvers av nettlesere.
Bilder
- Autodeteksjon for bildeutvidelser - jpeg, png, jpg. Du kan legge til utvidelsene dine
- Bruk på alle bildelenker
- Videre endret jeg rett og slett ikke innstillingene, forlot alt som det er. Gjør det samme.
Flott! Nå vil vi lagre alt dette vell av alternativer.
Nå lytter vi veldig nøye, ser og gjentar etter meg. Det er best å plassere tilbakeringingsskjemaet på det mest iøynefallende stedet, det vil si helt øverst i sideoverskriften, under telefonene og kontaktene. Det vil vi gjøre. Gå til malen Overskrift. php og lim inn denne koden:
Tilbakeringning
