Hallo. In deze tutorial maken we een volledig formulier feedback, en het verschijnt in een modaal venster wanneer u op een knop op de pagina klikt. Ik heb deze les zelf helemaal opnieuw gedaan, met alleen het jQuery-framework en een kleine JavaScript-les. Deze is erg interessant, dus sla deze niet over! Hieronder kun je een demonstratie bekijken van het formulier dat ik heb gemaakt, en ook downloaden benodigde bestanden voor het werk:

Stap 1. algemene beschrijving en hoe het feedbackformulier werkt:

Eerst zal ik u vertellen welke bestanden we nodig hebben en, in feite, waarom ze nodig zijn:

• afbeeldingen - de map waarin alle afbeeldingen van ons formulier zijn opgeslagen;
• index.html - het hoofdindexbestand waarin de knop voor het oproepen van het feedbackformulier zich bevindt;
• contact.html is het bestand dat het formulier zelf bevat. Het is dit bestand dat in het modale venster wordt opgenomen;
• send.php - een afhandelingsbestand dat verantwoordelijk is voor het verzenden van brieven;
• jquery.js - het belangrijkste jQuery-framework;
• style.css is een bestand met trapsgewijze stijlbladen voor ons formulier.

Dus laten we verder gaan en in volgorde... Het formulier werkt als volgt: de gebruiker gaat naar de pagina waarop een knop staat om het modale venster op te roepen, drukt erop en vervolgens verschijnt het formulier waarin de bezoeker alles invoert de gegevens en tekst van het bericht en verzendt, waarna het wordt doorgestuurd naar een pagina met een bericht over het al dan niet succesvol verzenden van de brief. Dat is alles, laten we nu beginnen met het opstellen van ons formulier...

Stap 2. Knop om het formulier op te roepen.

Dus dat, onze modaal venster verscheen met het formulier, je moet het op de een of andere manier dwingen om het te doen. Om dit te doen, hoeven we alleen maar een gewone knop op de pagina te plaatsen. De code voor zo'n knop wordt hieronder weergegeven, samen met de stijlen die erop zijn toegepast:

Schrijf een bericht naar de beheerder

Stap 3. Het formulier zelf + instellingen ervoor

Laten we nu eens kijken waar ons feedbackformulier zich zal bevinden. En het zal zich in het bestand contact.html bevinden, dat zich al in de broncode van de les bevindt. Deze vorm Het is vrij klein, dus ik zal de code hieronder plaatsen:

Een bericht naar de administratie sturen:

*Naam: *E-mail: Onderwerp: *Bericht:

Zoals je kunt zien, als je door de code gaat, kun je zelfs met het blote oog zien dat ik, om het formulier beter weer te geven, een tabelindeling heb gebruikt. Dit was voor mij erg handig om alle formuliervelden gelijk te maken.

Stap 4. Verwerker verantwoordelijk voor het versturen van brieven

Hier zal ik je snel vertellen over de hoofdprocessor voor het verzenden van brieven. Ik zal de code hier niet geven, omdat deze in de broncode staat. Download en bekijk de inhoud ervan. Als je PHP ergens op een gemiddeld niveau kent, zoals ik, dan kun je de volledige code van deze handler eenvoudig zelf parseren. Als alles klaar is, ga dan verder...

Stap 5. Het belangrijkste jQuery-framework “inschroeven”.

Nu moeten we, zoals in elke jQuery-les, het belangrijkste jQuery-framework “inschroeven”. Om dit te doen, gaan we een beetje terug naar waar onze knop zich bevindt, en tussen de tags, en voegen we de volgende code in:

Stap 6: Het formulier stylen

Zoals u kunt zien, worden de stijlen voor ons formulier afzonderlijk in het style.css-bestand geplaatst, omdat deze stijlen te veel ruimte in beslag nemen. We hoeven alleen de onderstaande code aan ons indexbestand te koppelen:

Stap 7. jQuery-verbeteringen

Nu voor volwaardig werk In het modale venster van het formulier moeten we de volgende jQuery-code invoegen:

$(function() ( $("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(dit.getTrigger().attr("href"));

Conclusie.

Ons interessante feedbackformulier is klaar. Het pad was lang en moeilijk, dus als iemand iets niet begrijpt, luister ik naar je vragen in de reacties deze les. En dat is alles voor mij, tot ziens, vrienden!

Met oprecht respect, uw jQuery-gids - M.K.

Er zijn veel WordPress-plug-ins voor het maken van contactformulieren op uw blog of website. de meest opvallende daarvan is dat je deze kunt insluiten Contact Formulier direct in de opname en WordPress-pagina's(terwijl veel plug-ins je dwingen om te gebruiken aangepaste sjabloon aan de pagina, waardoor de bewerking ervan wordt beperkt).

Het insluiten van het formulier op de pagina is meestal voldoende, maar wat als u wilt dat het formulier in een pop-up verschijnt wanneer de gebruiker op de link Contact opnemen klikt? Om zo'n verlangen te realiseren, moet je er twee gebruiken WordPress-plug-in tegelijkertijd: Easy FancyBox

1. Installeer eerst plug-ins en Easy FancyBox.

2. Voor de eenvoud zullen we gebruiken Contact Formulier Formulier 7, al aangemaakt door de plug-in zelf tijdens de installatie voor het voorbeeld. Op de pagina Contactformulierinstellingen neemt u de formuliercode, die u moet kopiëren en plakken WordPress-editor om een ​​formulier te maken.

3. Creëer nieuwe pagina op WordPress. Om een ​​contactformulier toe te voegen, moet u de code tussen vierkante haakjes van de instellingenpagina van Contact Form 7 op uw pagina plakken. Zorg ervoor dat u de code correct plakt, precies zoals de plug-in deze weergeeft.

4. Je WordPress heeft nu een contactformulier. We hebben besloten om het in een modaal venster te laten verschijnen nadat de gebruiker op de link klikt. De Easy FancyBox-plug-in komt in het spel. Met zijn hulp kun je elk pagina-element dwingen in een pop-up te verschijnen. Open de paginabewerking, klik op het tabblad TEKST en voeg de volgende HTML-code toe:

Neem contact met ons op

5. Dat is alles, nu hebben we een link die het contactformulier in een pop-upvenster “lanceert”. Gefeliciteerd! U zult waarschijnlijk de CSS van uw e-mailformulieren moeten aanpassen om de breedte, hoogte en e-mailberichten correct weer te geven. mogelijke fouten bij het vullen. Dit zou voldoende moeten zijn om u op weg te helpen.

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

Update 18/05/2017: Afgaande op de laatste beoordelingen in de repository kunnen er in sommige gevallen problemen zijn met de werking ervan. Als u hier ook last van heeft, probeer dan een nieuwe oplossing van de ontwikkelaars genaamd Popup Maker. Een ander alternatief kan worden overwogen.

Ik zal niet in detail treden over het installeren en configureren van Contact Form 7; alle informatie hierover vindt u hier. Op de blog stond ook een artikel over wat nuttig zou kunnen zijn.

Laten we meteen naar de Easy Modal-module gaan. Je zult hem vinden. De ontwikkelaars beweren dat dit De beste beslissing het creëren van modale vensters op de site met verschillende interessante opties voor het presenteren van inhoud.

Meer dan 10.000 downloads, beoordeling 4,6. Geldige versies van 3.4 zijn 4.0.8, hoewel ik het met succes heb uitgevoerd op WP 4.3.1. Ondanks het feit dat de plug-in nu is omgezet in een nieuwe Popup Maker-oplossing, kun je op de website wordpress.org en bij het zoeken naar plug-ins in het admin-paneel nog steeds de gebruikelijke Easy Modal-versie 2.0.17 vinden. 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 er verschillende items zijn. We hebben de allereerste nodig: Modals. Klik daar op de knop Nieuw toevoegen.

Met deze actie wordt een nieuw modaal venster voor uw WordPress-site gemaakt. De elementinstellingen hebben 4 tabbladen:

• Algemeen: algemene parameters.
• Weergaveopties - weergaveopties.
• Sluitingsopties - instellingen voor het sluiten van het venster (met een klik of de Esc-knop).
• Voorbeelden - voorbeelden van te gebruiken code.

Algemene instellingen omvatten de vensternaam (niet weergegeven op de site), de titel, inhoud en downloadtype. Voeg in het inhoudsblok, overschakelend naar de HTML-modus, de shortcode van uw feedbackformulier toe in het modale venster.

Type Laden Type heeft 2 opties:

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

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

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

Het tweede tabblad van de moduleparameters is Weergaveopties.

Hier geef je aan:

• venstergrootte - automatisch, gemiddeld, adaptief, klein, groot, enz.;
• achtergrond - u kunt een achtergrond voor het formulier gebruiken of deze zonder achtergrond weergeven;
• pop-upvensteranimatie;
• positie (locatie) - middenboven, rechtsonder, enz.; vast of niet;
• inkeping bovenaan het scherm.

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

Je moet deze code invoegen via een widget in de zijbalk of in een teksteditor. Het verschilt niet van andere HTML-code, het enige is dat de klasse van een specifiek modaal venster (eModal-1) hier wordt aangegeven. Voor het tweede element dat u hebt gemaakt, is de klasse eModal-2, enz. Om te voorkomen dat u een fout maakt bij het invoegen van de code, kunt u deze het gemakkelijkst vanaf deze pagina kopiëren.

Het thema van een modaal venster bewerken

In de Easy Modal-plug-in, naast instellingen voor specifiek onderdeel U kunt thema's definiëren voor pop-upvensters (Thema). In basis gratis versie De module heeft slechts één sjabloon, maar dit is meer dan voldoende.

IN dit hulpmiddel 6 bladwijzers:

• Algemeen - geef de naam van het onderwerp aan;
• Overlay — achtergrond (hier kunt u de kleur en transparantie van de achtergrond van het formulier selecteren);
• Houder verschillende instellingen het modale venster zelf (opvulling, rand, schaduw);
• Titel: titelparameters van het pop-upvenster (lettertype, schaduw);
• Inhoud — lettertype en kleur van teksten in het blok;
• Sluiten - formulierafsluitingselement (tekst en ontwerp).

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

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

Video over het toevoegen van Contactformulier 7 in de Easy Modal-pop-up

Ik heb trouwens een video gevonden 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 je kunt de algemene essentie begrijpen. Misschien is het voor iemand gemakkelijker te begrijpen deze kwestie met behulp van video.

Totaal over modale vensters voor WordPress

Zoals hierboven vermeld, is nu de Easy Modal-plug-in (afgaande op Officiële Pagina) geconverteerd naar Popup Maker. Ik heb een module met dezelfde naam in de repository gevonden, maar ik heb deze niet getest. Ik vertel je hierover zodat je weet waar je op moet letten als Easy Modal in WordPress in volgende versies plotseling niet meer werkt.

Beide oplossingen zijn gratis, hoewel er betaalde add-ons voor zijn. Hiermee kunt u de targeting aanpassen, meer ontwerpthema's toevoegen, analyses bevatten en enkele andere functies. Als u een geavanceerder modaal venstermechanisme nodig heeft, kunt u deze extensies eens nader bekijken.

Wat betreft de taak om het feedbackformulier van Contact Form 7 in een pop-upvenster te openen, er is voldoende basismogelijkheden Gemakkelijk Modaal. Bovendien deze beslissing kan ook worden gebruikt om andere modale vensters in WordPress weer te geven - handige tips, Extra informatie enzovoort. Gezien de aanwezigheid van een redacteur HTML-invoegingen code kunt u video's, formulieren enz. in een pop-upvenster weergeven. Kortom, een nuttige plug-in. Als je er vragen over hebt, schrijf dan in de reacties.

Goede middag vrienden! In deze tutorial leer ik je hoe je met behulp van plug-ins een contactformulier in WordPress maakt. Het feedbackformulier op WordPress dient ideale oplossing voor wie contact wil houden met zijn publiek of sollicitaties wil ontvangen E-mail om eventuele diensten te bestellen. We zullen leren hoe u een pop-upformulier in een modaal venster kunt maken. Na het lezen van dit artikel kunt u het formulier zelf op uw websites embedden. Dus laten we gaan.

Waarom heb je een WordPress-contactformulier nodig?

Je vraagt ​​je misschien af ​​waarom ik een feedbackformulier nodig heb voor een WordPress-site? Waarom voeg je niet gewoon een e-mailadres toe aan de site, zodat mensen me gewoon kunnen schrijven?

Dit is de meest voorkomende vraag van beginners die bang zijn om formuliercode aan een website toe te voegen zonder programmeerkennis. Sterker nog, je hebt helemaal geen code nodig bij het maken van een contactformulier in WordPress. In deze tutorial gaan we stap voor stap een contactformulier maken, zodat zelfs de meest complete beginner dit kan doen.

Hieronder staan ​​de 3 belangrijkste redenen waarom het gebruik van een formulier beter is dan alleen het toevoegen van een e-mailadres aan de site.

• – spambots gebruiken met benijdenswaardige regelmaat hun parsers om e-mailadressen op te pikken waar sprake is van een vermelding mail domein en voeg het toe aan hun database, zodat ze u vervolgens ongewenste correspondentie kunnen sturen. Aan de andere kant, wanneer u een feedbackformulier voor WordPress gebruikt, raakt u het probleem kwijt van SPAM-e-mails die uw mailbox overspoelen.
• Volledigheid van informatie – Bij het verzenden van e-mail sturen mensen niet altijd alle informatie die u nodig heeft. Met een contactformulier bepaalt u zelf welke velden u nodig heeft, zodat gebruikers u gemakkelijker een e-mail kunnen sturen (naam, e-mailadres, telefoonnummer, opmerking en meer).
• Bespaar tijd – Met het WordPress-contactformulier kunt u tijd besparen. Naast de volledigheid van de gegevens die u bij de gebruiker heeft opgevraagd en die hij u toestuurt, kunt u ook aangeven wat er bij de volgende stap te wachten staat, bijvoorbeeld ‘Uw aanvraag wordt binnen 24 uur beoordeeld’ of Bekijk de video en nog veel meer nuttige dingen.

Hieronder ziet u een voorbeeld van het contactformulier dat we in deze tutorial gaan maken.

Laten we beginnen, heren.

Stap 1: De beste plug-in voor contactformulieren voor WordPress kiezen

Op deze stap We moeten beslissen over de juiste formulierplug-in. Er is een grote verscheidenheid, zowel gratis als betaald. In deze tutorial vertel ik je over verschillende plugins zodat je een ruime keuze hebt. In het eerste geval wordt de plug-in WPForms gebruikt.

Hieronder staan ​​de redenen waarom WPForms dat is beste plug-in Feedback:

Ten eerste is dit de meest beginnersvriendelijke plug-in. Door simpelweg de benodigde blokken te slepen en neer te zetten, kunt u met een paar klikken een contactformulier maken.

WPForms Lite is volledig gratis.

Wanneer u toe bent aan krachtigere functionaliteit en dit echt belangrijk voor u is, kunt u upgraden naar de Pro-versie.

Mooi, als deze redenen voldoende blijken te zijn en ik je heb overtuigd, dan gaan we verder.

Stap 2: Installeer de contactplug-in WordPress-formulieren

Voor deze tutorial gebruiken we de Lite-versie omdat deze gratis en gemakkelijk te gebruiken is. Je kunt het installeren door in te loggen op de blog en naar Plug-ins - Nieuw toevoegen te gaan.

Typ in de zoekbalk de naam van onze plug-in en klik op Nu installeren.

Zorg ervoor dat u na het installeren van de plug-in deze activeert. Dit wordt hier weergegeven:

Stap 3: Maak een contactformulier in WordPress

Dus nadat u de activering van de plug-in met succes hebt voltooid, is het tijd om ons feedbackformulier te maken. Om dit te doen, klikt u in het blogbeheerderspaneel op het tabblad WPForms-menu en gaat u naar Nieuw toevoegen.

Dit opent de Wpforms-ontwerper voor u, waar eenvoudig slepen en neerzetten Met de benodigde blokken kun je een WordPress feedback-contactformulier maken. Gratis Lite-versies Er zijn twee vooraf gebouwde sjablonen beschikbaar (blanco en makkelijke vorm). U kunt ze samen gebruiken om degene te creëren die u nodig heeft en die handig voor u is. In dit voorbeeld hebben wij voor u de tweede optie gekozen, namelijk een eenvoudig contactformulier. We voegen er een naam, e-mailadres en een tekstveld aan toe.

U kunt op elk veld klikken om het te bewerken. U kunt formuliervelden ook slepen en opnieuw ordenen met uw muis.

Als u een nieuw veld wilt toevoegen, selecteert u eenvoudigweg het gewenste veld in de lijst aan de linkerkant en sleept u het naar het werkgebied.

Wanneer alles klaar is, klikt u gewoon op de knop Opslaan.

Stap 4: Stel meldingen en bevestigingen in

Nadat u met succes een contactformulier in WordPress heeft aangemaakt, is het van groot belang om de meldings- en bevestigingsformulieren correct te configureren.

Het bevestigingsformulier is wat uw gebruikers zien wanneer zij een formulierverzoek bij u indienen. Dit kan een bedankbericht zijn, maar u kunt ze ook doorverwijzen naar een andere speciale pagina.

Het meldingsformulier bestaat uit de berichten die u ontvangt wanneer u een nieuwe applicatie of e-mail brief vanaf uw WordPress-site.

Je kunt beide velden aanpassen door naar Instellingen te gaan in de WPForms forum builder-plug-in.

Standaard hebben we dit niet zo ingesteld en hebben we het veld Bevestigingsformulier met het bericht “Bedankt voor uw verzoek” ongewijzigd gelaten. U heeft echter het recht om deze in een andere tekst te wijzigen of de gebruiker ernaar door te verwijzen aparte pagina.

Het beste aan deze plug-in is dat de standaardinstellingen perfect zijn voor beginners. Ze hoeven niet uit te zoeken wat ze moeten doen of wat ze moeten veranderen. Alles is heel intuïtief en eenvoudig. Wanneer u naar de meldingsinstellingen gaat, worden alle velden dynamisch vooraf ingevuld.

Meldingen worden standaard verzonden naar het e-mailadres dat u in de instellingen heeft opgegeven. Als u de ontvanger wilt wijzigen voor het verzenden van meldingen, kunt u deze ook eenvoudig wijzigen. Als u meerdere e-mailadressen wilt opgeven (gespecificeerd door komma's), neem dan de kaarten bij de hand, zoals ze zeggen :)

Het veld E-mailonderwerp wordt automatisch ingevuld met uw formuliernaam. Het naamveld wordt overgenomen van de gebruikersnaam (uw naam). Wanneer u op een brief reageert, gaat deze naar de mail met de naam van de gebruiker die het contactformulier heeft ingevuld.

Stap 5: Een WordPress-contactformulier aan de pagina toevoegen

Wanneer u bij deze stap het feedbackformulier heeft gebouwd en geconfigureerd, moet u er een aparte “Contacten”-pagina voor maken, waar u deze kunt plaatsen. U maakt een nieuwe of bewerkt deze al bestaande pagina, waar u het kunt toevoegen.

We gebruiken een eenvoudige shortcode om het formulier op de pagina in te sluiten. Klik eenvoudig op de knop “Formulier toevoegen” en selecteer de naam van uw formulier om het op de pagina in te voegen.

Geweldig. Sla nu de pagina op en open het voorbeeld om de wijzigingen te zien.

Zo ziet het formulier er ongeveer uit: eenvoudige WordPress bladzijde:

Als u alleen een formulier aan een pagina wilt toevoegen, gefeliciteerd. Alle stappen zijn met succes voltooid. Als je het als widget aan de zijbalk wilt toevoegen, ga dan hieronder verder.

Stap 6: Een WordPress-contactformulier toevoegen aan de zijbalk

De WPForms-plug-in wordt geleverd met een ingebouwde contactformulierwidget die u kunt toevoegen aan uw zijbalk of een ander deel van uw site (zoals de voettekst).

Om dit te doen, moeten we naar de sectie gaan " Verschijning» (Uiterlijk) -> Widgets (Widgets). Daar ziet u aan de linkerkant een vooraf geïnstalleerde formulierplug-inwidget. We nemen het gewoon en stellen de weergavevolgorde in met de gebruikelijke slepen en neerzetten gewenste gebied in de zijbalk.

De volgende stap is het opgeven van de naam van de widget en het opslaan. Ga naar de site en bekijk het resultaat.

Hiermee is de beoordeling van onze WPForms-plug-in voor feedbackformulieren voltooid. Maar speciaal voor jou heb ik er nog een recensie van geschreven gratis plug-in, waarmee we een pop-upfeedbackformulier kunnen maken en dezelfde functies als in de vorige. Het heet Contactformulier 7. Het is echt heel krachtig en de troef is dat het helemaal GRATIS is!

Het kan ook adaptief worden gemaakt, dat wil zeggen dat het feedbackformulier zich aanpast aan de schermgrootte van uw apparaat.

Dus, voor het geval dat, zodat je weet dat ze er zijn.

Een contactfeedbackformulier maken met behulp van Contactformulier 7

We blijven het probleem begrijpen van het maken van formulieren voor het accepteren van sollicitaties van uw website. We hebben nog een plug-in voor WordPress-contactformulieren in het vooruitzicht, genaamd Contact Form 7. Laten we deze op onze blog installeren en activeren zoals we weten hoe we dat moeten doen.

Het is al geïnstalleerd op mijn website, niet op deze blog. De werkwijze is standaard. Nu moeten we naar het blogbeheerderspaneel gaan en een bestand aanmaken nieuw uniform, die sollicitaties voor ons en anderen verzamelt bruikbare informatie. Ga naar de sectie “Contactformulier 7” -> Nieuw toevoegen.

Geweldig! Laten we het nu een passende naam geven, in mijn geval zijn er veel van deze contactformulieren. Laten we er een kiezen, bijvoorbeeld ‘Bestelformulier voor websitepromotie’

Ik zal je kort vertellen wat we hier nodig hebben. Allereerst moeten we beslissen hoeveel formuliervelden we willen maken. Ik zal meteen zeggen dat het niet nodig is om 100.500 velden aan te maken en dat het zinloos is, om de simpele reden dat mensen uw site sluiten en geen verzoek achterlaten. Ze moeten deze stap gemakkelijker maken. Dat wil zeggen, als je erover nadenkt, wat we van een persoon nodig hebben is:

Zijn naam om hem aan te spreken (persoonlijk adres)

E-mailadres (feedback, waar u hem een ​​aanbieding kunt sturen)

Telefoonnummer om direct te bellen (gebeurt dit snel, dan wordt hij sowieso uw klant)

De daadwerkelijke knop 'Verzenden'

Dit zijn de basisgegevens, andere kunt u al achterhalen tijdens correspondentie of telefoongesprek. Logisch? Ik denk van wel. Laten we verder gaan.

Contactformuliervelden maken in de Contact Form 7-plug-in

We hebben dus het aantal velden bepaald, nu moeten we deze velden maken. De volgende tabbladen zijn voor ons beschikbaar:

• Tekst (elk tekstveld, zoals 'Naam', 'Stel een vraag' of een andere titel die u via dit veld verzamelt)
• E-mail (het doel hier is dat de gebruiker invoert)
• URL (het siteadres wordt in dit veld ingevoerd, andere waarden zijn niet acceptabel en er wordt een foutmelding weergegeven)
• Tel (veld met telefoonnummer voor ons WordPress-feedbackformulier, zijn acceptabel numerieke waarden, de tekst geeft een foutmelding)
• Aantal (Numeriek bereik van waarden kan bijvoorbeeld worden toegepast op de prijs: "hoeveel bent u bereid te betalen voor de site? Van 23.000 tot 120.000 roebel")
• Datum (Geef de datum aan, vanaf welke datum tot welke datum. Voorbeeld: “Reservering van een auto van 13-04-2016 tot 25-04-2016”)
• Tekstgebied (Tekstgebied, hier kunt u tekst als commentaar invoeren)
• Drop-down menu. Geïmplementeerd op mijn blog, je kunt het zien. Aan het einde van elk artikel raad ik gebruikers aan om een ​​eenvoudige website of een online winkel te maken. Dit is precies de functionaliteit die biedt deze optie.
• Selectievakjes (meerkeuze, bijvoorbeeld: Website + Logo creatie + promotie + contextueel adverteren)
• Keuzerondjes (Een item selecteren, bijvoorbeeld: “Je bestelt of contextuele reclame of gericht")
• Acceptatie (Accepteer de voorwaarden van de overeenkomst, d.w.z. gebruikersinformatie, zoals een openbaar aanbod)
• Quiz (Quiz is een reeks korte vragen die ook in het contactformulier kunnen worden ingevoegd).
• reCaptcha (Bevestiging dat u geen robot bent en geen spam zult versturen.) Goede bescherming van SPAM. Let op: deze optie werkt als je de plugin Real Simple Captcha hebt aangesloten.
• Bestand (Als u wilt dat gebruikers een bestand naar u kunnen uploaden, bijvoorbeeld: “Technische specificaties bijvoegen voor website-ontwikkeling”).
• Verzenden (gegevens per e-mail verzenden)

Dus we hebben de velden gekozen, je kent ook de betekenis van elk. Laten we beginnen met het bouwen van ons contactformulier in WordPress.

In het onderstaande voorbeeld heb ik 2 velden gebruikt: Naam, E-mailadres. Daarom heeft u deze tabbladen nodig:

Door op het teksttabblad (Tekst) te klikken, komen we in het dialoogvenster:

Hier moeten we op het selectievakje Veldtype – Vereist klikken. Dit wordt gedaan zodat als de gebruiker er geen naam in invoert, hij u geen aanvraag kan sturen, er een verzendfout optreedt, wat aangeeft dat niet alle velden correct zijn ingevuld.

Vervolgens ziet u een shortcode om dit veld en ernaast in te voegen blauwe knop"Tag invoegen." Hiermee wordt één nieuw contactformulierveld toegevoegd.

Om ervoor te zorgen dat je niet in de war raakt, heb ik het met stijl gemarkeerd. Code hieronder:

Voor-en achternaam

< div class = "col-md-4" > < label class = "sr-only" >Voor-en achternaam< / label >[ tekst* tekst - 658 klasse: formulier - controle tijdelijke aanduiding "Uw naam" ] !}< / div >

En hier is het scherm:

We voeren een soortgelijke bewerking uit voor het veld 'E-mail'. We klikken op het overeenkomstige tabblad en komen in dit dialoogvenster terecht.

Het is absoluut niet anders dan de vorige, we herhalen alleen onze acties. Mijn e-mailveld heeft ook een stijl. Ik geef de onderstaande code:

Volledige e-mail

< div class = "col-md-4" > < label class = "sr-only" >Volledige e-mail< / label >[ e-mail* e-mail - 447 klasse: formulier - tijdelijke aanduiding voor controle "Uw e-mail" ] !}< / div >

En hier is het scherm:

En tot slot de knop ‘Verzenden’. Ze is helemaal in mijn stijl.

< div class = "col-md-4" >[klasse indienen: btn - platte klasse: col - xs - 12 "Bestelling" ]< / div > < / div >

Belangrijke opmerking: Beste vrienden, in dit voorbeeld gebruik ik responsieve stijlen om een ​​contactformulier in WordPress te maken, wat betekent dat het vormen van elke schermgrootte kan aannemen.

Je ziet de knop aan de rechterkant bovenste hoek. Je zult het zeker niet missen. 🙂

We hebben een deel van het werk gedaan, nu gaan we door naar de volgende fase.

Instellingen postadres voor het accepteren van sollicitaties

Bij deze stap moeten we enkele instellingen maken zodat de brieven in onze mailbox naar ons worden verzonden. Hoe je dit kunt bereiken, vertel ik je hieronder.

We moeten doorklikken groot tabblad"Brief". Het komt op de tweede plaats na de formuliersjabloon.

Het eerste dat u ziet zijn uw tags die u heeft toegevoegd. We moeten ze in de hoofdtekst van de brief invoegen. Ze vervangen de gegevens die de gebruiker vanuit het formulier invoert. Ik denk dat ik het duidelijk heb uitgelegd.

Nu voor de velden:

• Naar (Waar de aanvraag naartoe wordt gestuurd, in mijn geval is dit mijn e-mailadres, u kunt meerdere adressen opgeven waar u de aanvraag naartoe wilt sturen)
• Van (veld Van, d.w.z. de waarde wordt vervangen door dat de applicatie afkomstig is van mijn studiowebsite)
• Onderwerp (Dient om te bepalen uit welk formulier de aanvraag komt, in ons geval is het een aanvraag uit het sitepromotieformulier).
• Extra headers (Extra headers, deze komen wij niet tegen, deze zijn nodig voor het correct versturen van het formulier)
• Berichttekst (De hoofdtekst van het bericht, hier geef je aan van wie de brief afkomstig is en vanaf welk adres, bijvoorbeeld: “Van: Ivan” “E-mailadres: vasya @ mail. ru”)
• Bestandsbijlagen (bijlagen bij het bestand, niet aanraken)

Nu moeten we meldingen configureren over het succesvol of niet succesvol verzenden van een e-mail vanuit het WordPress-contactformulier.

Dit zijn berichten die aan de gebruiker worden getoond als reactie op zijn acties met het formulier. Standaard gaan ze naar de Engelse taal. Ik heb de meest noodzakelijke dingen voor je in het Russisch vertaald. Er zullen er meer dan genoeg zijn, en zo niet, dan zal Google Translator je helpen. Dus laten we beginnen.

• Bij het succesvol verzenden van een bericht: “Uw bericht is succesvol verzonden. Bedankt."
• Als een bericht verkeerd wordt verzonden vanuit het formulier: “Er is een fout opgetreden tijdens het verzenden van het bericht. Probeer het later opnieuw of neem contact op met de sitebeheerder."
• Vulfout: “Vulfouten. Controleer alle velden en verzend opnieuw."
• De verzonden gegevens worden geïdentificeerd als spam: “Fout bij verzenden bericht. Probeer het later opnieuw of neem contact op met de sitebeheerder."
• Er moeten enkele voorwaarden worden geaccepteerd: “Accepteer de voorwaarden om door te gaan.”
• Er moeten enkele velden worden ingevuld: “Vul een verplicht veld in.”
• De lengte van de tekens in het veld is overschreden: “Er zijn te veel gegevens opgegeven.”
• Onvoldoende lengte van tekens in het veld: “Te weinig gegevens opgegeven.”
• Ongeldig datumformaat: "Het datumformaat is onjuist."
• Vroege datum op minimumlimiet: “De opgegeven datum is te vroeg.”
• Late datum bij maximale limiet: “De opgegeven datum is te laat.”
• Bestand downloaden mislukt: "Het bestand kon niet worden gedownload."
• Niet-toegestaan ​​bestandstype: "Dit bestandstype is niet toegestaan."
• Laden ook groot bestand: "Dit bestand is te groot."
• Het uploaden van het bestand is mislukt vanwege PHP-fouten: "Het uploaden van bestanden is mislukt. Er is een fout opgetreden."
• Het door de afzender ingevoerde getalformaat is onjuist: "Het getalformaat is onjuist."
• Aantal is kleiner dan de minimumlimiet: “Dit aantal is te klein.”
• Aantal groter dan maximumlimiet: “Dit aantal is te hoog.”
• De afzender heeft geen juist antwoord ingevuld op de vraag: “U heeft een onjuist antwoord ingevuld.”
• Het door de afzender ingevoerde e-mailadres is onjuist: “Ongeldige e-mail.”
• De door de afzender ingevoerde URL is onjuist: "Ongeldige URL."
• Het door de afzender ingevoerde telefoonnummer is onjuist: “Ongeldig telefoonnummer.”

Erg goed. We zijn klaar met het instellen van het formulier, nu moeten we het in de site invoegen. Voor dit doel al bekende technologie, ga naar een bestaande pagina of maak een nieuwe. In mijn voorbeeld laat ik je een voorbeeld zien bestaande vorm op de WordPress-sitepagina.

Omdat ons formulier aanvragen voor websitepromotie verzamelt, gaan we naar een vergelijkbare pagina.

Om ons contactformulier in te voegen, moeten we de shortcode kopiëren die daaraan door de plug-in is toegewezen. Het is beschikbaar onder uw formuliernaam.

We kopiëren en plakken in onze pagina, nadat we naar zijn gegaan teksteditor(niet visueel). Weergegeven in de onderstaande schermafbeelding:

Laten we onze pagina opslaan en kijken wat we in de browser krijgen:

Super! Laten we nu proberen het formulier te verzenden zonder iets in te vullen. En dit is wat we zullen zien.

Er is een formulierverzendingsfout opgetreden omdat de gebruiker niet de vereiste gegevens in de velden heeft opgegeven. Laten we nu de juiste gegevens invoeren en kijken wat we in dit geval krijgen.

Klik op verzenden en dit is wat ons formulier zegt:

Laten we nu eens kijken hoe onze applicatie eruit ziet. Ze komen naar mijn e-mail. Laten we de levering controleren:

Laten we naar binnen gaan om te controleren of de codering en alle gegevens correct zijn.

Alles is oke. Het formulier werkt prima en verzendt gegevens. Nu kunnen we sollicitaties verzamelen die naar je toekomen als je begint, als we het hebben over regionale promotie.

We hebben u dus verteld hoe u een contactformulier in WordPress op een websitepagina kunt maken. Nu zal ik je vertellen hoe je een pop-up maakt adaptieve vorm feedback met behulp van onze plug-in Contactformulier 7.

Een pop-up responsief contactformulier maken in WordPress

Om ervoor te zorgen dat ons formulier adaptief wordt, d.w.z. “vloeiend”, moeten we een andere plug-in aansluiten, of beter gezegd de toevoeging ervan aan Contact Form 7 – het heet Bootstrap Contact Form 7. We installeren en activeren eenvoudigweg en dat is alles – het werkt. Je hoeft er geen instellingen mee te doen. Stel het in en vergeet het.

In de volgende stap zal ik u vertellen welke wijzigingen we moeten aanbrengen om ons formulier pop-up en responsief te maken. Ik heb een soortgelijke implementatie gemaakt op Startpagina uw studiowebsite. Om dit te doen, gaan we naar de index.php-sjabloon, die zich in de sectie "Uiterlijk - Editor" bevindt. Wij werken alleen met code, handmatig.

Ons pop-upformulier verschijnt in een modaal dialoogvenster zoals dit:

Om dit resultaat te bereiken heb je de volgende code nodig, ik zal deze volledig in een fragment weergeven:

Bestellen ×Sluiten Laat een aanvraag achter

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Volgorde< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >&keer;< / span > < span class = "sr-only" >Dichtbij< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >Dien uw aanvraag in< / h4 > < / div >

Dag Allemaal. We werden gebombardeerd met vragen over hoe we een formulier konden implementeren dat in een modaal venster verschijnt nadat op een knop is geklikt, en na verzending een bericht over succes of mislukking zou worden weergegeven.

Ik denk dat er veel soortgelijke dingen op internet staan, maar omdat mensen ernaar vragen, heb ik besloten het te doen. Bovendien moet dergelijke functionaliteit op vrijwel elke landingspagina aanwezig zijn om een ​​knop te kunnen implementeren Bel terug. En inderdaad, nu zijn er steeds meer AB-testresultaten die aantonen dat open formulieren slechter werken dan formulieren die verborgen zijn in een modaal venster en geopend worden na het klikken op een 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. Naar verluidt is dit het moment waarop de gebruiker, bij het zien van een open formulier, gelooft dat hij iets aan hem probeert te 'verkopen'. Ik ben het niet helemaal eens met deze theorie, maar er zit wel een kern van waarheid in. Dit kan in sommige soorten bedrijven het geval zijn. Laten we nu beginnen met het implementeren van het formulier.

Opmerking! Ik zal niet elke actie in detail beschrijven, maar u een kant-en-klare versie in de broncode aanbieden. Als je vragen hebt, schrijf dan in de reacties. We komen er wel achter :)

Vandaag beginnen we niet met jQuery, maar met de lay-out van de knop en het formulier. We zullen alle scripts aan het einde van de pagina opnemen.

Een knop die, wanneer erop wordt geklikt, een modaal venster opent:

Dien uw aanvraag in

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

Nu zal ik de code geven voor het formulier en het blok waarop het formulier zich zal bevinden:

Laat uw contactgegevens achter en onze adviseur neemt contact met u op. Ik wil dit formulier voor mijn website

Na het toevoegen van stijlen zag het er zo 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 met mijn bewerkingen aan het einde van het artikel.

Tussen hoofdlabels verbind stijlen:

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

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

$(document).ready(function () ($("form").submit(function () ( // Haal de formulier-ID op var formID = $(this).attr("id"); // Voeg een hash toe naar de naam ID var formNm = $("#" + formID); $.ajax(( type: "POST", url: "mail.php", data: formNm.serialize(), succes: function (data) ( // Uitvoertekst van het verzendresultaat $(formNm).html(data); function (jqXHR, text, error) ( // Weergave van de tekst van de verzendfout $(formNm.html(error); ) ) );

Het origineel geef ik niet css-code en js uit de bestanden die verantwoordelijk zijn voor het modale venster en de vorm, omdat ze behoorlijk groot zijn. Als dat zo is, kijk dan naar de bron. Maar de PHP-handler is grotendeels standaard (als ik het mag zeggen):

Vergeet niet uw e-mailadressen te wijzigen in uw eigen e-mailadres.

Dit is het Ajax-formulier dat we hebben. Sorry dat ik niet in detail heb geprobeerd uit te leggen hoe elk element is gemaakt. Ik wilde alleen een eindresultaat geven, maar het heeft geen zin om alle animaties en optredens te beschrijven. Download de broncode en implementeer deze op uw website. En dat is alles voor vandaag. Succes allemaal!

Jongens, ik verzoek jullie dringend om het formulier te testen op een echte of virtuele server(hosten). Zorg ervoor dat uw server php ondersteunt, dat heeft u betaald tarief en geen testperiode. Anders zal het formulier in 90% van de gevallen niet werken.

Wacht niet op een brief bij u thuis postbus, als je net bent geopend indexbestand in de browser en klikte op de knop "Verzenden". PHP is een server-side taal!

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

Geupdate versie artikel bevindt