Wordpress feedback-knop. Een feedbackformulier voor contact maken in WordPress

Dag iedereen. Ze werden gebombardeerd met vragen over het implementeren van een formulier dat in een modaal venster verschijnt na het klikken op een knop, en na het indienen, zou een succes- of mislukkingsbericht worden weergegeven.

Ik denk dat er al veel van op internet staat, maar omdat mensen ernaar vragen, heb ik besloten het te doen. Bovendien zou dergelijke functionaliteit op bijna elke bestemmingspagina aanwezig moeten zijn om een ​​terugbelknop te implementeren. Inderdaad, er verschijnen nu steeds meer AB-testresultaten, die zeggen dat open formulieren slechter werken dan die welke verborgen zijn in een modaal venster en openen na het klikken op de knop.

Sommigen beweren dat dit te wijten is aan het feit dat mensen langzaam "immuniteit ontwikkelen" en dat de open vorm een ​​agressieve verkoop is. Vermoedelijk is nu de tijd gekomen dat de gebruiker, wanneer hij een open formulier ziet, denkt dat ze hem iets proberen te "verkopen". Ik ben het niet helemaal eens met deze theorie, maar er zit een kern van waarheid in. Dit kan het geval zijn in sommige soorten bedrijven. Laten we nu beginnen met de implementatie van het formulier.

Opmerking! Ik zal niet elke actie in detail beschrijven, maar ik bied u een kant-en-klare versie in de bron aan. Als je vragen hebt, schrijf dan in de comments. We komen er wel uit :)

Vandaag beginnen we niet met jQuery, maar met de lay-out van de knop en het formulier. Alle scripts zijn opgenomen aan het einde van de pagina.

De knop door erop te klikken waarmee het modale venster wordt geopend:

Dien uw aanvraag in

Je kunt elke klasse instellen, maar in de href schrijf #modal - dit is de id van de container met de arcering en het contactformulier.

Nu geef ik de code van het formulier en het blok waarop het formulier zal worden geplaatst:

Na het toevoegen van stijlen ziet het er als volgt uit:

Om een ​​modaal venster te creëren, werd de Remodal-bibliotheek gebruikt. Dit is een set css- en js-bestanden, alleen voor het maken van geanimeerde modale vensters. Je kunt het downloaden via de link of al met mijn bewerkingen aan het einde van het artikel.

Voeg stijlen toe tussen de head-tags:

En vóór de afsluitende body-tag - voeg scripts toe:

Script.js is een script voor het verwerken van een formulier. Hetzelfde Ajax waarmee we de hele procedure kunnen uitvoeren zonder de pagina opnieuw te laden:

$ (document) .ready (function () ($ ("form"). submit (function () (// Haal het formulier-ID op var formID = $ (this) .attr ("id"); // Voeg hash toe aan de naam ID var formNm = $ ("#" + formID); $ .ajax ((type: "POST", url: "mail.php", data: formNm.serialize (), succes: functie (data) (/ / Uitvoertekst van het verzendresultaat $ (formNm) .html (data);), fout: functie (jqXHR, tekst, fout) (// Uitvoer van de verzendfouttekst $ (formNm) .html (fout);)) ); retourneer onwaar;));));

Ik zal de broncode van css en js niet citeren uit de bestanden die verantwoordelijk zijn voor het modale venster en de vorm, aangezien ze vrij groot zijn. Kijk in ieder geval naar de bron. Maar de php-handler is grotendeels standaard (als ik het zo mag zeggen):

Naam afzender:$ naam Telefoon:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Bedankt voor het verzenden van uw bericht!";) anders (echo" Fout. Bericht niet verzonden! ";)) else (http_response_code (403); echo" Opnieuw proberen ";)?>

Alsjeblieft, vergeet dan niet om de e-mailadressen in uw eigen e-mailadressen te veranderen.

Hier is een ajax-formulier. Sorry dat ik niet heb geprobeerd in detail uit te leggen hoe elk element is gemaakt. Ik wilde gewoon een afgewerkt resultaat geven, maar het heeft geen zin om alle animaties, verschijningen te beschrijven. Download de bron en sluit deze in op uw site. En dat was alles voor vandaag. Succes allemaal!

Jongens, ik verzoek u dringend om het formulier te testen op een echte of virtuele server (hosting). Zorg ervoor dat uw server php ondersteunt, dat u een betaald abonnement heeft en geen proefperiode. Anders werkt het formulier in 90% van de gevallen niet.

Wacht niet op een brief in je mailbox als je zojuist het indexbestand in je browser hebt geopend en op de knop "Verzenden" hebt geklikt. Php is een server-side taal!

Als je te lui bent om het formulier zelf uit te zoeken en te maken, raad ik aan om op te letten.

Een bijgewerkte versie van het artikel bevindt zich

(Laatst bijgewerkt: 08.07.2016)

Dag iedereen! Ik ben het weer, met een nuttige post - pop-up voor WordPress- voor beginners en niet alleen voor WordPress-gebruikers. Als je geïnteresseerd bent in WordPress pop-up plug-in, het wordt ook wel een modale venster-plug-in genoemd, dan zijn jullie, vrienden, precies op de juiste plek terechtgekomen.

U kunt de plug-in gebruiken die ik hieronder zal presenteren om: Contactformulier 7 in een modaal venster; elk contactformulier (feedback) in een modaal (pop-up) venster; video in een modaal venster; afbeeldingen in een pop-upvenster; plaatsing van nuttige informatie met links; mail inschrijvingsformulier voor nieuwe artikelen in een modaal venster enzovoort, enzovoort, alles, en je kunt het niet opsommen. De plug-in is heel eenvoudig, zonder ingewikkelde instellingen en creëert bijna geen extra belasting op / site.

Eenvoudige modale plug-in - Pop-up / modaal venster voor WordPress

Modal Window Plugin voor WordPress - Easy Modal

U kunt deze plug-in op de standaard manier installeren, via het admin-paneel - Plugins - Voeg een nieuwe toe en voer in het veld Plug-ins zoeken de naam Easy Modal in, druk op Enter. Het zou de eerste in de lijst moeten zijn. Installeer en activeer het zoals gewoonlijk. En dan kunt u doorgaan met het maken van een nieuw modaal venster.

Klik hiervoor op de nieuwe sectie Easy Modal die verschijnt en selecteer het item Modals:

Easy Modal - een nieuw modaal venster maken

Klik daarna helemaal bovenaan de pagina op de knop Nieuw toevoegen:

Een nieuw venster toevoegen

En hier is alles eenvoudig:

Een pop-upvideovenster maken

Geef in de algemene instellingen (tabblad Algemeen) de naam van het nieuwe venster op (het wordt niet weergegeven, dit is voor jou, als je bijvoorbeeld meerdere modale vensters maakt); laadtype Laad de hele site (voor de hele site); de titel van het venster en plak tenslotte de code die je nodig hebt in de editor (tekstmodus). Ik heb een YouTube-videocode ingevoegd in mijn voorbeeld.

Modale vensteropstelling

In de parameters kunt u de grootte van het venster kiezen; wel of niet een achtergrond gebruiken; animatietype voor modaal / pop-up; de locatie van het venster, en u kunt het venster ook repareren (vink het vakje aan en specificeer de inspringing vanaf de bovenkant van het scherm).

Op het tabblad Voorbeelden vindt u voorbeelden van code voor het weergeven van een pop-up in WordPress:

Modale uitvoercode in WordPress

Hier kunt u een eenvoudige tekstlink, knop of pictogram selecteren. Merk op dat aan elk nieuw aangemaakt venster de klasse eModal - wordt toegewezen. Het eerste aangemaakte venster heeft de klasse eModal - 1, de tweede eModal - 2, enzovoort. U hoeft het nummer alleen zelf te vervangen na het teken -. Deze code kan op of overal in uw artikel worden geplakt. Uiteraard kunt u elke tekst in de code schrijven. Ik was bijna vergeten dat na het maken van het modale venster aan de rechterkant van de pagina, niet vergeten op de knop Publiceren te klikken.

Ik heb de code van het modale venster met de video in de zijbalk als een knop ingevoegd:

Knop blogzijbalk

De bezoeker klikt erop en een venster opent met een video:

Modaal venster met video

Ik hoop, vrienden en kameraden, dat het algemene principe van het werken met de Easy Modal-plug-in duidelijk voor je is. Ik zal er alleen aan toevoegen dat u dan of onmiddellijk het uiterlijk voor het modale venster kunt ontwerpen door op het thema-item te klikken. Helaas heeft de gratis versie van de plug-in maar één thema voor het ontwerp, maar je kunt het ontwerpen zoals je wilt, er zijn genoeg instellingen. Wanneer u het uiterlijk van het modale venster aanpast, ziet u aan de rechterkant een voorbeeld van het uiterlijk:

Thema bewerken - modaal / pop-up stylen

Klik na alle instellingen voor het uiterlijk van het venster op de knop Opslaan aan de rechterkant. En tot slot, dames en heren, zal ik u een voorbeeld laten zien van het weergeven van een contactformulier 7 in een modaal venster.

Maak een nieuwe modaal zoals hierboven getoond en plak in een teksteditor gewoon de Contact Form 7 shortcode (als je deze plug-in hebt geïnstalleerd, zo niet):

Contactformulier 7 maken in pop-upvenster
Knop schrijf naar auteur na bericht

Als de lezer contact met u wil opnemen, klikt hij op een knop en wordt het contactformulier geopend in een modaal venster:

Formulier om contact op te nemen met de auteur in een modaal venster

Zoiets. Ook worden al uw gemaakte pop-upvensters weergegeven op de pagina (item Modals), waar trouwens de klassen voor elk modaal venster worden aangegeven:

Gemaakte modaliteiten in WordPress

Onlangs werd ik voor een site gevraagd om een ​​WordPress-feedbackformulier in een modaal venster te maken. Dat wil zeggen, wanneer de gebruiker op de link "schrijf ons" klikt, in plaats van naar de overeenkomstige pagina te gaan, moet de gebruiker een nieuw pop-upvenster openen, waar de functie voor het verzenden van berichten zich zal bevinden. Dit is een meer interactieve oplossing, hoewel niet iedereen het leuk vindt. Ik geef persoonlijk de voorkeur aan de klassieke implementatie met een contactpagina, maar de formulieren op de sites zijn anders - dus het is handig om de oplossing voor dit probleem te overwegen. In mijn werk heb ik 2 plugins gebruikt: bij velen bekend Contact Form 7 en de Easy Modal module om een ​​modaal venster te maken in WordPress.

Update 18-05-2017: Afgaande op de laatste beoordelingen in de repository, kunnen er in sommige gevallen problemen zijn met het werk. Als dit ook op jou van invloed is, probeer dan een nieuwe oplossing van de ontwikkelaars genaamd Popup Maker. Een ander alternatief kan worden overwogen.

Ik zal niet in detail stilstaan ​​​​bij de installatie en configuratie van Contact Form 7, alle informatie erover. De blog had ook een artikel over wat van pas zou kunnen komen.

Laten we meteen naar de Easy Modal gaan... Vind hem. De ontwikkelaars beweren dat dit de beste oplossing is voor het maken van modals op de site met verschillende interessante mogelijkheden voor het presenteren van inhoud.

Meer dan 10 duizend downloads, schatting 4.6. Geldige versies zijn 3.4 - 4.0.8, hoewel ik het met succes heb uitgevoerd op WP 4.3.1. Ondanks het feit dat de plug-in nu is omgevormd tot een nieuwe Popup Maker-oplossing, kun je nog steeds de gebruikelijke Easy Modal-versie 2.0.17 vinden op wordpress.org en bij het zoeken naar plug-ins in het beheerderspaneel. Aan de hand van zijn voorbeeld zal ik u vertellen over het maken van een modaal feedbackvenster in WordPress.

Na de installatie verschijnt een sectie met dezelfde naam, waar meerdere items zijn. We hebben de allereerste nodig - modaliteiten... Klik daar op de knop Nieuw toevoegen.

Hiermee wordt een nieuwe modaliteit voor uw WordPress-site gemaakt. Er zijn 4 tabbladen in de iteminstellingen:

• Algemeen - algemene parameters.
• Weergaveopties - weergaveopties.
• Sluitopties - instellingen voor het sluiten van het venster (met een klik of de Esc-knop).
• Voorbeelden - codevoorbeelden om te gebruiken.

Algemene instellingen bevatten de naam van het venster (niet weergegeven op de site), de titel, de inhoud en het type download. Voeg in het inhoudsblok, na het overschakelen naar de HTML-modus, de shortcode van uw feedbackformulier toe in het modale venster.

Belastingstype heeft 2 opties:

• Laad de hele site (voor de hele site).
• Per pagina / bericht (voor specifieke berichten en pagina's).

Een zeer interessante optie. Als je een pop-upvenster nodig hebt dat op alle pagina's van de site wordt weergegeven (de link bevindt zich bijvoorbeeld in de zijbalk), schakel dan de eerste optie uit. In het tweede geval verschijnt het bijbehorende instellingenblok op de pagina's / berichten van de site bij het bewerken:

U kunt uw pop-upvenster voor een bepaalde pagina activeren en selecteren. Als u het vakje niet aanvinkt, wordt het element niet op de site geladen.

Het tweede tabblad van de moduleparameters - Weergaveopties.

Hier geeft u aan:

• venstergrootte - automatisch, medium, adaptief, klein, groot, enz.;
• achtergrond - u kunt de achtergrond voor het formulier gebruiken of zonder deze weergeven;
• animatie van het weergeven van een pop-upvenster;
• positie (locatie) - midden boven, rechtsonder, enz.; vast of niet;
• inspringing bovenaan het scherm.

Voorbeelden van het weergeven van de uitvoer van een modaal venster in WordPress met behulp van de Easy Modal-plug-in zijn te vinden op het laatste tabblad.

Je moet deze code plakken via een widget in de zijbalk of in een teksteditor. Het is niet anders met andere HTML-code, het enige is dat het de klasse van een specifiek modaal venster specificeert (eModal-1). Voor het tweede element dat u hebt gemaakt, is de klasse eModal-2, enzovoort. Om geen fouten te maken bij het plakken van de code, is de eenvoudigste manier om deze vanaf deze pagina te kopiëren.

De skin van een modaal venster bewerken

In de Easy Modal-plug-in kunt u, naast instellingen voor een specifiek element, thema's voor pop-upvensters definiëren (Thema). Er is slechts één sjabloon in de gratis basisversie van de module, maar dit is meer dan genoeg.

Deze tool heeft 6 tabbladen:

• Algemeen - specificeer de naam van het onderwerp;
• Overlay - achtergrond (hier kunt u de kleur en transparantie van de achtergrond van de vorm selecteren);
• Container - verschillende instellingen voor de modal zelf (opvulling, frame, schaduw);
• Titel - parameters van de titel van het pop-upvenster (lettertype, schaduw);
• Inhoud - lettertype en kleur van teksten in het blok;
• Sluiten - een element voor het sluiten van het formulier (tekst en ontwerp).

Zoals u kunt zien, kan het uiterlijk worden aangepast aan uw behoeften. Ik kreeg dit eenvoudige WordPress-formulier in een modaal venster:

Vergeet niet om na het instellen van alle instellingen ze op te slaan (klik op de knop Opslaan).

Video van het toevoegen van contactformulier 7 in het pop-upvenster Easy Modal

Trouwens, ik vond een video over het werken met de Easy Modal-plug-in, waarin het proces wordt gedemonstreerd van het maken van een modaal feedbackvenster in WordPress. Daar is de module-interface enigszins verouderd (sommige instellingen zien er anders uit), maar de algemene essentie is vastgelegd. Misschien is het voor iemand gemakkelijker om dit probleem te begrijpen met behulp van een video.

Totaal over modale vensters voor wordpress

Zoals hierboven vermeld, is nu de Easy Modal-plug-in (te oordelen naar de officiële pagina) geconverteerd naar Popup Maker. Ik heb een module met dezelfde naam in de repository kunnen vinden, maar ik heb deze niet getest. Ik vertel je dit zodat je weet waar je op moet letten als Easy Modal in WordPress van volgende versies plotseling niet meer werkt.

Beide oplossingen zijn gratis, hoewel ze betaalde add-ons hebben. Hiermee kunt u targeting aanpassen, meer thema's toevoegen, analyses bevatten en enkele andere functies. Als u een meer geavanceerd modaal venstermechanisme nodig heeft, kunt u deze extensies nader bekijken.

Wat betreft de taak om het feedbackformulier van Contact Form 7 in een pop-upvenster te openen, zijn er voldoende eenvoudige Easy Modal-mogelijkheden. Bovendien kan deze oplossing ook worden gebruikt om andere modale vensters in WordPress weer te geven - handige tips, aanvullende informatie, enz. Gezien de aanwezigheid van een editor voor het invoegen van HTML-code, kunt u video's, formulieren, enz. in het pop-upvenster weergeven. Al met al een handige plug-in. Als je er vragen over hebt, schrijf dan in de comments.

Gegroet, vrienden. De tutorial van vandaag helpt je WordPress-site om een ​​mooi en functioneel feedbackformulier te krijgen. We zullen het doen met behulp van de plug-in Contact Form 7. Ooit heb ik veel tijd besteed aan het zoeken naar een normaal contactformulier en vond ik geen waardig alternatief voor deze plug-in.

Functies van plug-ins

Laat me je er nogmaals aan herinneren dat we met een plug-in zullen werken, dus als je feedback nodig hebt zonder een plug-in, kun je beter het artikel bezoeken over, de instelling daar is iets gecompliceerder, maar aan de andere kant is de optie meer universeel (geschikt voor elke site) en minder belasting van de server.

Het belangrijkste voordeel van het contactformulier op Contact Form 7 is de eenvoud van aanpassing, bijna onbeperkte functionaliteit en automatische ontwerpaanpassing voor alle WordPress-sjablonen. Met zijn hulp kunt u niet alleen een formulier maken voor het verzenden van berichten vanaf de site. De plug-in kan worden gebruikt om een ​​bestelknop, terugbelverzoek of complexe vragenlijst met selectievakjes en vervolgkeuzelijsten te maken. Het is ook mogelijk om bestanden bij te voegen voor overdracht.

Kortom, de plug-in is megafunctioneel.

Mocht je nog twijfelen over de vraag "wel of niet een contactformulier maken?" (u kunt langskomen door eenvoudig contactgegevens op de benodigde pagina's te plaatsen), dan zal ik ondubbelzinnig zeggen - het is de moeite waard om te doen.

Ten eerste is het handiger om direct vanaf de site een bericht te sturen dan om het mailprogramma te openen en daar alles handmatig in te vullen. Tijd besparen doet niemand pijn.

Ten tweede kan het contactformulier worden aangepast en hierdoor kunt u brieven van een standaardformulier ontvangen - het is gemakkelijker om erin te navigeren. U kunt bijvoorbeeld een standaard koptekst voor het bericht "Bestelling" plaatsen en alle e-mails van de bestelpagina zullen met deze kop komen.

Ten derde kunt u door het gebruik van een contactformulier uw e-mailadres verbergen en daarmee eventuele spam verwijderen die onvermijdelijk verschijnt wanneer uw e-mailaccount vrij beschikbaar is.

Ten vierde is het gewoon stijlvol en modern.

De plug-in Contactformulier 7 installeren en configureren

De plug-in bevindt zich in de algemene wordpress-database, dus het is niet nodig om ergens naar zijn bestanden te zoeken, ze voor jezelf te downloaden en ze vervolgens te uploaden naar de hosting. Alles is gemakkelijker gemaakt - ga via het WordPress-beheerpaneel naar het gedeelte met plug-ins, typ "Contactformulier 7" in het zoekveld en installeer het. Als u nog nooit plug-ins hebt geïnstalleerd, vindt u gedetailleerde instructies voor het installeren van een plug-in.

De plug-in Contactformulier 7 configureren

De configuratie van de plug-in bestaat uit twee fasen.

De eerste is het aanpassen van een specifiek formulier. Er kunnen veel verschillende formulieren zijn, elk van hen kan zijn eigen set velden bevatten. Kortom, voor elke taak en elke pagina op de site kunt u afzonderlijk een feedbackformulier maken, WordPress staat dit toe - hun lijst wordt opgeslagen in de plug-indatabase.

De tweede stap is om het formulier op de pagina's van de site in te voegen. Elk formulier dat we binnen de plug-in maken, heeft zijn eigen unieke shortcode. Om het in de pagina in te voegen, volstaat het om alleen het in te voegen.

Dus laten we gaan.

Om te beginnen vinden we in het linkermenu van het admin-paneel het tabblad Contactformulier 7. Daaronder verschijnt een menu met twee items - "Formulieren" en "Nieuw toevoegen".

We hebben nog geen kant-en-klare formulieren, ga daarom naar de sectie "Nieuwe toevoegen". Daar wordt een pagina geopend met het aanbod om een ​​taal te selecteren, en de standaardtaal wordt daar ook aangegeven. Klik gewoon op de blauwe knop Nieuw toevoegen.

Formulieraanpassing is verdeeld in afzonderlijke blokken. Ik zal ze in volgorde bekijken.

Formulier naam blok

Het eerste blok is verantwoordelijk voor de naam van uw formulier - plaats de cursor op het opschrift "Untitled" en voer de naam in die u nodig hebt. Deze naam wordt alleen aan u getoond in de lijst met plug-in-contactformulieren, dus maak het begrijpelijk voor u om in de toekomst niet in de war te raken in alle variëteit.

Formuliersjabloonblok

In eerste instantie bevat dit blok een standaardconfiguratie van velden. Het bevat de naam van de afzender van de brief, zijn e-mailadres, het onderwerp van de brief, de inhoud van de brief en de verzendknop.

Verplichte velden zijn gemarkeerd met sterretjes. Als dit veld leeg wordt gelaten, wordt het bericht niet verzonden.

De lay-out van de velden kan worden aangepast met behulp van reguliere HTML-opmaak.

Wat betreft het instellen van de velden zelf, kunt u onnodige verwijderen en de velden toevoegen die u nodig hebt. Als u niet wilt dat het onderwerp van de brief handmatig wordt ingevoerd, verwijdert u gewoon het bijbehorende blok.

Het toevoegen van velden is ook heel eenvoudig. Aan de rechterkant is er een knop om een ​​tag te genereren, door erop te klikken, ziet u een lijst met alle mogelijke velden die deze plug-in ondersteunt.

Selecteer het gewenste item en configureer de parameters ervan. De plug-in is in het Russisch, dus alle instellingen zijn intuïtief.

Het eerste selectievakje geeft een verplicht of optioneel veld aan (het voegt een asterisk toe).

Na het instellen van het veld heb je 2 shortcodes:

• "Kopieer deze code en plak deze in de formuliersjabloon aan de linkerkant" - deze code wordt op dezelfde manier als alle anderen in de formuliercode ingevoegd;
• "En plak de volgende code in het onderstaande briefsjabloon" - we hebben deze code nodig om de brief in het volgende blok te ontwerpen.

U kunt dus een willekeurig aantal velden, selectievakjes, vervolgkeuzelijsten, elementen voor het bijvoegen van bestanden, enz. aan het formulier toevoegen.

Hoofdletter"

Nu is het onze taak om de brief die we zullen ontvangen aan te passen. De brief heeft op geen enkele manier invloed op de uitvoering van het feedbackformulier, het dient alleen om de informatie te verzenden die in het formulier is ingevuld.

Het is onze taak om alle informatie in de brief op te nemen.

Als eerste item geven we het e-mailadres aan waarnaar het bericht wordt verzonden (het kan van alles zijn).

Het tweede item geeft de e-mail aan van waaruit de brief naar u wordt verzonden. Ik zou hier niets veranderen, standaard is de mailbox van je blog gespecificeerd en wordt er een tag aan toegevoegd met de naam van de persoon die het bericht verzendt.

Vervolgens geven we het onderwerp van de brief aan. Meestal wordt het onderwerp overgenomen uit het veld dat in het formulier is ingevuld. Maar u kunt dit element uit het formulier verwijderen en een specifiek onderwerp in het veld invoeren, dat automatisch in elke letter wordt ingesteld. Ik deed dit voor feedbackformulieren van pagina's over services en advertenties. Berichten van daar komen altijd met hetzelfde onderwerp "Besteldiensten" of "Besteladvertenties" - eenvoudig en duidelijk.

Het veld met extra koppen bevat de tag "Reply-To:", zodat u bij het beantwoorden van een van uw blog ontvangen brief een bericht naar de blog stuurt en naar het adres dat is aangegeven door de afzender van de brief in het formulierveld. Het is niet de moeite waard om dit veld te wijzigen.

Het veld "Briefsjabloon" is verantwoordelijk voor de interne inhoud van het bericht dat u heeft ontvangen. Het bevat standaard informatie over de afzender, het onderwerp en de berichttekst die in het veld is ingevoerd.

Aan het einde wordt aangegeven vanaf welke site de brief is verzonden.

Als u in het formulier extra velden heeft ingevuld die niet standaard zijn ingesteld, vergeet dan niet de bijbehorende tag in het briefsjabloon toe te voegen. Het is aan u gegeven in het blok "Formuliersjabloon", waar u de bijbehorende tag hebt gegenereerd (het veld "En plak de volgende code in het onderstaande briefsjabloon").

Alle tekstinformatie in dit blok (behalve tags) kan naar wens worden gewijzigd. U kunt ook beschrijvingen toevoegen en tags op plaatsen wijzigen, in de volgorde die bij u past.

Blok "Letter 2"

Als je wilt dat iemand anders het naar jou verzonden bericht ontvangt, dan kun je dit blokje aanvinken.

Dit blok is op dezelfde manier geconfigureerd als het vorige. Standaard zijn alle velden erin ingevuld zodat de brief naar de persoon gaat die het formulier heeft ingevuld (blijkbaar, zodat hij het niet vergeet).

U kunt instellen dat u bijvoorbeeld een kopie naar uw manager of accountant stuurt.

Blokkeer "Meldingen bij het indienen van een formulier"

In dit blok kunt u de berichten aanpassen die de gebruiker ziet nadat hij op de knop Bericht verzenden heeft geklikt. Als je iets wilt veranderen, alsjeblieft, ik heb alles gelaten zoals het is.

Formulier activatie

Nadat u alle velden hebt ingevuld, keert u terug naar het begin naar het blok "Formuliernaam" en klikt u op de knop "opslaan" aan de rechterkant.

De plug-in plaatst het formulier dat u hebt gemaakt in de lijst met geldige formulieren en wijst het een speciale code toe zoals deze:

[contact - formulier - 7 id = "5464" title = "(! LANG: Check" ] !}

Door deze code ergens op uw site te plakken, ontvangt u een kant-en-klaar formulier om met uw potentiële klanten te communiceren.

Anti-spam - Akismet en Captcha

Spammers veroorzaken veel problemen voor site-eigenaren, en elk nieuw formulier waarmee u iets kunt schrijven, draagt ​​alleen maar bij aan het aantal spambots.

Als u de plug-in voor contactformulieren in zijn basisvorm laat, wordt u na een tijdje aangevallen door veel lege en nietszeggende berichten.

Er zijn twee manieren om spammers te verwijderen:

1. Zet een verplichte captcha (dit kan met een extra plug-in - Really Simple CAPTCHA).
2. Gebruik de wordpress antispam plugin - Akismet.

De eerste optie is onhandig omdat het bezoekers dwingt om handmatig extra tekens in te voeren. Het is niet zo moeilijk, maar sommige mensen houden er niet van.

Het gebruik van de Akismet-plug-in is handiger omdat het de ingevoerde gegevens (namen, e-mailadressen, links) onafhankelijk analyseert en op basis van de ontwikkelde database conclusies trekt over het spam- of niet-spambericht.

Bovendien wordt akismet op de meeste WordPress-sites gevonden om spamreacties op artikelen te voorkomen. Dit betekent dat u bij gebruik geen extra plug-ins hoeft te installeren en de site onnodig belast.

Spambeveiliging met Akismet

1. Installeer de Akismet-plug-in op uw site en activeer deze -.

2. Voeg extra gegevens toe aan de tags van het contactformulier:

• in het veld met de naam van de auteur, voeg toe akismet: auteur
• in het veld met de e-mail van de afzender van de brief akismet: author_email
• in het adresveld van de site akismet: author_url

Het zou er zo uit moeten zien:

Eenmaal opgeslagen, zou het contactformulier alle berichten van spammers moeten blokkeren. U kunt de filterwerking controleren met behulp van de speciale testnaam "viagra-test-123? - wanneer u het invoert, zou er een foutmelding moeten verschijnen.

Om de controle minder streng te maken, kunt u slechts een deel van de velden aanvinken, bijvoorbeeld naam en e-mail, en het siteadres uitgeschakeld laten. In dit geval wordt de kans groter dat spamberichten worden doorgestuurd, maar is de kans kleiner dat u de gewenste berichten kwijtraakt.

Spambeveiliging met Really Simple CAPTCHA

Als je merkt dat Akismet niet bij je past (het laat veel spam binnen of blokkeert de nodige berichten), dan kun je een captcha aansluiten. Installeer hiervoor de Really Simple CAPTCHA-plug-in.

Open het vereiste contactformulier om te bewerken

Selecteer Captcha in de lijst met tags. In de tag-instellingen kun je de grootte van de afbeelding met de symbolen selecteren, anders hoeft er niets te worden gewijzigd. Onderaan het instellingenvenster verschijnen 2 tags, één is verantwoordelijk voor het weergeven van een afbeelding, de tweede toont een veld voor het invoeren van gegevens van deze afbeelding.

Om de captcha te laten werken, moet u beide tags kopiëren en plakken in het linkervenster van de formuliersjabloon en vervolgens de wijzigingen opslaan.

Een feedbackformulier in een pop-upvenster plaatsen

Het contactformulier hoeft zich niet altijd in een specifiek gedeelte van de site te bevinden; soms moet de klant het vanaf elke pagina van de bron kunnen openen.

In dergelijke gevallen is het niet altijd handig om een ​​volledig formulier te plaatsen. Het is veel makkelijker om een ​​opvallende knop op een prominente plek te plaatsen. Het indrukken van deze knop zou al moeten leiden tot het openen van het formulier.

Zo kan een persoon berichten vanaf de site verzenden zonder de pagina te verlaten die hij nodig heeft.

Dit wordt gedaan met behulp van een andere plug-in - Easy FancyBox.

1. De plug-in installeren

Allereerst installeren we de plug-in zelf, deze bevindt zich in de algemene plug-indatabase, daarom is het voldoende om de naam in te voeren in de plug-in-zoekopdracht in het beheerderspaneel van uw blog. Na het installeren van de plug-in verschijnt in het gedeelte "instellingen" het tabblad "mediabestanden".

Op dit tabblad moet u een lijst met inhoudstypen vinden die in het pop-upvenster moeten worden weergegeven. Standaard zijn er alleen afbeeldingen, u moet inline-inhoud toevoegen.

Hiermee is de installatie van de plug-in voltooid, ga verder met het instellen van de feedbackknop.

2. Voer de code in op de site

In principe kun je een gewone tekstlink gebruiken, maar de afbeeldingsknop ziet er dan beter uit.

Op uw site, waar u de knop voor het contactformulier wilt weergeven (in de kop-, voettekst of zijbalk), voert u de volgende code in:

< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "Contact Formulier" alt = " Contact Formulier " src = "http: // link naar de afbeelding"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [contact - formulier - 7 id = "id van uw formulier" title = "naam van uw formulier"] < / div > < / div >

In de code moet je het adres van de afbeelding specificeren die je als feedbackknop gebruikt, en de shortcode van het formulier zelf bewerken - schrijf je id en titel.

3. Verwijder de beperking op shortcodes in de zijbalk

Dit item is vereist als je een knop in de zijbalk wilt installeren. Niet altijd staat de zijbalk in WordPress je toe om shortcodes uit te voeren.

Om deze functie in te schakelen, moet u het bestand function.php openen om te bewerken (rechtstreeks vanuit het WordPress-beheerderspaneel) en de volgende code invoegen vóór de afsluitende accolade "?>":

add_filter ("widget_text", "do_shortcode");

add_filter ("widget_text", "do_shortcode");

Hiermee kunt u alle shortcodes in de zijbalk uitvoeren.

Ik eindigde met een mooi pop-upformulier zoals dit:

Meerdere verschillende pop-upformulieren op één pagina

Soms is het nodig om meerdere formulieren met verschillende instellingen en velden op de site te plaatsen.

Een knop die je hebt leidt bijvoorbeeld naar een formulier met een naam en telefoonnummer en dient om een ​​terugbelverzoek van de site te bestellen, en de tweede zou een ander formulier moeten openen met een gedetailleerd bestelverzoek (met een adres, een beschrijvingsveld , de mogelijkheid om een ​​bestand bij te voegen, enz.) ). In de Contact Form 7-plug-in zelf kun je een oneindig aantal formulieropties maken, maar hoe pas je ze in verschillende knoppen op dezelfde pagina?

Om dit te doen, moet u de knopcode uit de vorige paragraaf corrigeren. De eerste knop gebruikt de bovenstaande optie. In de tweede veranderen twee waarden:

1. De link verandert, de href parameter krijgt de waarde # contact_form_pop_2
2. Verander de id in dezelfde waarde # contact_form_pop_2

Hallo mijn geliefde lezer! In deze aflevering laat ik u zien hoe ik een pop-up terugbelformulier op een WordPress-site heb geïmplementeerd.

Het is een feit dat het terugbelformulier door de meeste webmasters heel vaak wordt gebruikt, juist voor het gemak van gebruikers, zodat ze zo snel mogelijk de gerichte actie ondernemen - dat wil zeggen, een verzoek achterlaten op de site.

Je kunt ze vaak zien op veel commerciële sites die diensten verlenen of aanbieden om een ​​product te kopen. In feite zijn online winkels geen volledige cyclus, dat wil zeggen, wanneer er geen mandje is, maar er is zoiets als een pre-order via dit formulier. Hier is hoe ze eruit kunnen zien:

Of in de vorm van een knop ook in de kop van de site:

Iemand kan ze gebruiken in de footer van de site, dit mag ook. Het ziet er zo uit:

Vrienden dus. Dit waren allemaal voorbeelden, nu implementeren we hetzelfde terugbelformulier voor een WordPress site in de praktijk. Ik zal het doen op de site, die zich bezighoudt met de verbetering van het grondgebied van Kaliningrad.

Allereerst moeten we naar het gedeelte met plug-ins gaan, waar we een nieuwe plug-in zullen toevoegen met de naam Contact Form 7. Dit is de meest populaire oplossing voor het maken van eenvoudige en complexe blogs.

Niet huhra muhra - 24 miljoen downloads spreken al boekdelen. Klik op de installatieknop en deze verschijnt aan de linkerkant van het beheerderspaneel.

Russisch is al standaard geselecteerd, dus maak je geen zorgen. We gaan door met ons proces.

Nu moeten we de velden toevoegen die zullen deelnemen. Ze zijn standaard al geïnstalleerd, in principe kunt u ze laten staan, niet verwijderen. Het enige dat ik zou toevoegen is een verplicht veld met een telefoonnummer.

Om dit te doen, moeten we op de knop "tag genereren" aan de rechterkant van het scherm klikken en het juiste item selecteren. Op deze manier:

Klik op het item "Telefoonnummer", plaats een vinkje in het vereiste veld in het selectievakje en kopieer vervolgens de resulterende tag in het formulier aan de linkerkant, samen met andere namen en in de sjabloon voor de brief.

Aan de linkerkant heb je een invoer zoals deze:

Plaats het telefoonnummerveld hieronder.

Aan de linkerkant van het sjabloon voor inkomende brieven hebben we het volgende item:

Vergeet niet ook het selectievakje "Gebruik HTML-e-mailformaat" aan te vinken

Onderaan heb je een regel als deze "Vul het vereiste veld in" nodig om in het Russisch te vertalen, zoiets als dit: "Vul het vereiste veld in"

Voeg in het veld geadresseerde een e-mail toe waar aanvragen van de site naartoe worden gestuurd.

Prima! Het terugbelformulier voor de site is bijna klaar. Nu moeten we het laten verschijnen wanneer erop wordt geklikt.

Een pop-upformulier maken

Het is onze taak om een ​​pop-up terugbelformulier te hebben wanneer we op de link-knop klikken. Om het te maken, hebben we een speciale plug-in nodig op basis van de JQuery-taal, het heet Easy FancyBox. Het is ook beschikbaar voor installatie rechtstreeks vanuit het beheerdersgedeelte. Laten we het nu toevoegen.

Klik gewoon op "Installeren" en het zal voor u beginnen te werken. Het heeft instellingen voor mediabestanden. We kunnen ze kort overlopen.

Afbeeldingsformaten - stel uw eigen waarden in voor miniaturen, middelgrote en grote afbeeldingen.

FancyBox-effect voor de volgende mediacategorieën:

• Afbeeldingen
• Pdf-documenten
• Inline-inhoud
• SWF-grafieken
• Youtube
• Vimeo
• Dailymotion
• IFramen

Geef aan wat u in de toekomst wilt gebruiken. Ik laat het alleen voor foto's.

U kunt ook de dekking en kleur instellen. Ik heb niets gevraagd, ik liet alles standaard zoals het is.

Raam

• Pictogram venster sluiten . weergeven
• Kopkleur en randkleur
• Afmetingen (standaard 560x340x10)
• Gedrag (vertraging in seconden wanneer het terugbelformulier op de site verschijnt en de sluitingssnelheid).

Compatibel met andere browsers en apparaten

• Voeg regels toe voor de browser IE 6 en 7 versies (stijlen zijn bedoeld)
• Stijlregel inschakelen voor IE 8-browser

Ik heb er niets in gespecificeerd, hoewel je kunt experimenteren met de cross-browsercompatibiliteit van het formulier.

Afbeeldingen

• Automatische detectie voor afbeeldingsextensies - jpeg, png, jpg. U kunt uw extensies toevoegen
• Toepassen op alle afbeeldingen links
• Verder heb ik gewoon de instellingen niet veranderd, alles gelaten zoals het is. Hetzelfde doen.

Super goed! Nu zullen we al deze rijkdom aan opties opslaan.

Nu luisteren we heel aandachtig, kijken en herhalen na mij. Het is het beste om het terugbelformulier op de meest opvallende plaats te plaatsen, dat wil zeggen helemaal bovenaan de kop van de site, onder de telefoons en contacten. Dat zullen we doen. Ga naar de sjabloon kop. php en plak deze code:

Terugbellen