HTML-feedbackcode. Maak een feedbackformulier in PHP

Hallo beste lezers, vandaag wil ik je vertellen over hoe ik formulieren maak om contactinformatie van gebruikers te krijgen.

Vandaag, is in de structuur van de bestemmingspagina. Dit is tenslotte een van de manieren om een bestelling te accepteren of een catalogus van uw producten te versturen, nadat u eerder een e-mail van een bezoeker heeft ontvangen.

Een feedbackformulier maken - html-opmaak

Meestal zijn drie velden genoeg voor mij, en in de meeste gevallen gebruik ik deze opmaak om te creëren Contact Formulier:

Probeer te openen in een browser gegeven code en kijk wat je krijgt, afhankelijk van de internetbrowser die je gebruikt, zou het er ongeveer zo uit moeten zien:

Als je vragen hebt over de opmaak, stel ze dan gerust in de opmerkingen, ik zal proberen in detail te antwoorden en ik zal niet elk element in het artikel beschrijven om de omvang ervan niet te vergroten. Ook zijn de elementen vrij eenvoudig.

Een feedbackformulier maken - css-opmaak

Laten we onze vorm stylen en casten naar leesbare vorm:

/ * Formulierstijlen * / #application (breedte: 475px; marge: 0 auto;) / * Invoerveldstijlen * / #applicationName, #applicationEmail, #applicationTelephone (breedte: 100%; hoogte: 73px; achtergrond: geen; marge - top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px;) / * Veldstijlen wanneer erop wordt geklikt * / #applicationName: focus , #applicationEmail : focus, #applicationTelephone: focus (rand: 1px vol # 30ad64;) / * Tekststijlen weergegeven in tijdelijke aanduiding * / :: - webkit-input-placeholder (kleur: #efefef; font-familie: "PT Sans", sans -serif; tekstschaduw: 0 1px 1px rgba (0, 0, 0, .3);) :: - moz-placeholder (kleur: #fff; font-family:" PT Sans ", schreefloos ; tekst- schaduw: 0 1px 1px rgba (0, 0, 0, .3);) / * Firefox 19+ * /: -moz-placeholder (kleur: #fff; font-familie: "PT Sans", schreefloos; tekst -schaduw: 0 1px 1px rgba (0, 0, 0, .3);) / * Firefox 18- * /: -ms-input-placeholder (kleur: #fff; font-familie: "PT Sans" , sans- serif; tekstschaduw: 0 1px 1px rgba (0, 0, 0, .3); ) :: tijdelijke aanduiding (kleur: #fff; tekstschaduw: 0 1px 1px rgba (0, 0, 0, .3);) / * Stijlen voor de knop * / .applicationButton (marge-top: 25px; achtergrond: # 30ad64 ; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: hoofdletters; font-family: "PT Sans", schreefloos ; cursor: aanwijzer;) .applicationButton: hover (achtergrond: # d68c18;)

Als u wilt dat de knopkleur soepel verandert, voegt u deze regel toe aan .applicationButton en .applicationButton: hover:

Overgang: .6s;

Waar 6s de animatietijd is in milliseconden.
Nu heeft ons formulier een mooie uitstraling gekregen, nu ziet het er zo uit:

Een feedbackformulier maken - php markup

Nu moeten we een application.php-bestand maken. Hij ontvangt de ingevulde parameters van het formulier en stuurt ze naar onze post.

De structuur is als een gewone. html-bestand, dit kan de pagina zijn waarop u schrijft: "Bedankt, uw aanvraag is geaccepteerd. Na verwerking van de aanvraag nemen onze beheerders contact met je op"

Dat wil zeggen, wanneer de gebruiker op de knop klikt, wordt hij doorgestuurd naar de applicatie.php-pagina. Dit is een volledige pagina en u moet deze dienovereenkomstig opmaken.

"; $ bericht ="

Bericht van de site

\ r \ n "; $ bericht ="

Van wie:". $ gebruikersnaam."

\ r \ n "; $ bericht ="

Mail:". $ gebruikersmail."

\ r \ n "; $ bericht ="

Website:". $ gebruikerstel."

\ r \ n "; $ msg. =" "; // stuur een bericht als (@mail ($ sendto, $ subject, $ msg, $ headers)) (echo"

";) anders (echo"

"; } ?>

Laten we de code een beetje uitleggen:

$ verzenden naar = " [e-mail beveiligd]"; // mail, die de letter $ gebruikersnaam = $ _POST [" naam "] zal ontvangen; // sla de gegevens op die uit het veld zijn ontvangen met de naam $ usertel = $ _POST [" telefoon "]; // sla de gegevens op in de variabele ontvangen uit het veld met het telefoonnummer $ usermail = $ _POST ["email"]; // sla de gegevens op die uit het veld zijn ontvangen met het e-mailadres in een variabele

Hier, denk ik, is begrijpelijk.

Laten we nu de e-mailheader vormen.

$ onderwerp = "Nieuw bericht"; $ headers = "Van:". strip_tags ($ gebruikersmail). "\ r \ n"; $ headers = "Antwoord aan:". strip_tags ($ gebruikersmail). "\ r \ n"; $ headers = "MIME-versie: 1.0 \ r \ n"; $ headers = "Inhoudstype: tekst / html; charset = utf-8 \ r \ n";

Lijn $ onderwerp = "Nieuw bericht";- is verantwoordelijk voor het onderwerp van de brief, kan daar schrijven: "Aanvraag van de site" of wat het beste bij je past.

Ik stel voor om de brief te laten komen van het adres dat is opgegeven in het veld invoertype = "e-mail". Dat wil zeggen, van degene die de gebruiker heeft ingevoerd bij het invullen van het formulier. Schrijf hiervoor de volgende regels:

$ headers = "Van:". strip_tags ($ gebruikersmail). "\ r \ n";

Dat wil zeggen, we zullen de gegevens van de $ usermail-variabele vervangen, waar de informatie uit het veld dat verantwoordelijk is voor het invoeren van het e-mailadres wordt opgeslagen.

Laten we nu instellen verschijning brieven. Je kunt het stylen zoals je wilt, maar ik raad de volgende structuur aan:

$ bericht = " "; $ bericht ="

Bericht van de site

\ r \ n "; $ bericht ="

Van wie:". $ gebruikersnaam."

\ r \ n "; $ bericht ="

Mail:". $ gebruikersmail."

\ r \ n "; $ bericht ="

Telefoon:". $ gebruikerstel."

\ r \ n "; $ bericht ="";

De eerste regel is om het lettertype van de brief in te stellen. Ten tweede geven we een bericht weer, bijvoorbeeld: "Aanvraag via het formulier feedback op het eerste scherm." Op de derde, vierde en vijfde regel zetten we de gegevens van het formulier over. Elk op een nieuwe regel.

Nu moet je een brief sturen met de mailfunctie en bepalen wat er gebeurt als de brief succesvol wordt verzonden of niet:

If (@mail ($ sendto, $ subject, $ msg, $ headers)) (echo "

";) anders (echo"

"; } ?>

Ik heb het zo gemaakt dat er in ieder geval een plaatje met de bijbehorende tekst komt te staan. U kunt een volledige pagina weergeven in plaats van een afbeelding. Schrijf gewoon de code in plaats van de afbeelding.

Een paar seconden nadat de afbeelding is weergegeven, stuur ik om (auto-redirect) naar Startpagina... U kunt dit doen door de volgende regel tussen de head-tags te typen;

Dat wil zeggen, na 4 seconden keert de gebruiker automatisch terug naar de hoofdpagina!

Ik ben geen expert in php - het is een back-end programmeertaal, mijn hele leven stond in het teken van het leren van de front-end. Oordeel daarom niet streng. Ja, hier kun je controles uitvoeren voor het invullen van contactformulieren enzovoort, maar dit is altijd genoeg voor mij geweest, dus als iemand een suggestie heeft om deze code te verbeteren, schrijf dan in de opmerkingen of e-mail, ik zal de les, bedankt!

Trouwens, als je een feedbackformulier nodig hebt zonder de pagina opnieuw te laden, dan kun je lezen hoe je het kunt installeren in

Misschien is iemand niet helemaal duidelijk over het materiaal, maar als je mijn stappen precies herhaalt, dan zal je contactformulier zeker werken. Als je vragen hebt - schrijf in de reacties, ik zal proberen te beantwoorden! Tot ziens op de blog!

P.s. Omdat ik heel vaak vragen kreeg over waarom het formulier niet werkt en brieven niet op de post komen, heb ik besloten om enkele van de meest populaire redenen te beschrijven waarom dit kan gebeuren:

Het formulier testen niet op de server.
Het formulier testen voor imp betaalde hosting.
U test het formulier op een betaalde hosting, maar in een gratis proefperiode.

In deze gevallen komen de brieven niet op uw post.

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

23/07/2014 12/07/2018

dimadv7

Elke site moet een feedbackformulier hebben, dus vroeg of laat denkt ieder van ons na over de ontwikkeling ervan. Er zijn veel opties op het netwerk, iemand gebruikt populaire plug-ins, iemand gebruikt zijn eigen persoonlijke werk, maar de meeste van op zoek naar kant-en-klare oplossingen. In ieder geval onze feedbackformulier voor de site zal werken en functioneel zijn, en dit alles in orde.

HTML

Laten we dus, zoals altijd, beginnen met de gebruikelijke sjabloon - html. Eerst hebben we een formulier nodig met meerdere velden. We nemen 3 velden voor de duidelijkheid en standaard van alle formulieren. Die. het zal Naam, E-mail en Telefoon zijn.

Elke ingang heeft zijn eigen unieke naam naam, hebben we deze later nodig om berichten te verzenden. U kunt ook vrij uw eigen velden toevoegen en niet alleen tekstgebied invoeren, maar ook selecteren. Vergeet niet om elk van hen hun eigen naam te geven, die we zullen gebruiken bij het verzenden van informatie per post. Voor het gemak heb ik een verplicht attribuut aan elk veld toegevoegd, zodat de browser de gebruiker niet toestaat om te verzenden lege waarden en u op de hoogte stellen van de noodzaak om ze in te vullen.

CSS

Als de vorm klaar is, kun je hem een beetje transformeren. Het hangt ook allemaal af van je behoeften en fantasieën. Voor de duidelijkheid heb ik voor elk element een paar stijlen geschetst, zodat alles er niet zo plat uitzag. Maar als je lui bent of niet weet hoe je dit moet doen, dan kun je mijn versie gebruiken:

Formulier (max-breedte: 400px; breedte: 100%; marge: 0 auto;) invoer (box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba (0, 0, 0, 0.11); opvulling: 10px 20px; breedte: 100%; marge: 10px 0; omtrek: geen;) invoer (achtergrond: rood; rand: geen; kaderschaduw: 0px 2px 0 1px # C50909; rand- straal: 5px; kleur: wit; teksttransformatie: hoofdletters; lettertypegewicht: 600; breedte: 200px; cursor: aanwijzer; overgang: 0.3s;) invoer: zweven (achtergrond: zwart; vakschaduw: 0px 2px 0 1px zwart ;)

Klantdeel

Hier is het al de moeite waard om meer in detail te begrijpen, meer bepaald om voor jezelf te kiezen geschikte optie:... Om berichten naar e-mail te sturen, moeten we gebruiken php taal, d.w.z. creëren apart bestand waaraan we al deze gegevens zullen overdragen. Maar wij op deze manier we zullen hier niet over nadenken, omdat het veel mooier is als alles gebeurt zonder de pagina opnieuw te laden. Daarom gaan we kijken naar het verzenden van gegevens via ajax.

Als je alles op de ouderwetse manier wilt doen, moet je de bovenste html een beetje aanpassen en de waarde van het method-attribuut (post of get) in het formulier instellen. Het hangt allemaal af van hoe u gegevens van het formulier wilt overbrengen. En vergeet ook niet om actie te schrijven, die het pad naar het php-bestand aangeeft.

En we gaan voor een meer geavanceerde methode en verzenden gegevens zonder de pagina opnieuw te laden, en als we een reactie van de server ontvangen, geven we de gebruiker een bericht over een succesvolle bewerking of een fout. We hebben echter ook 2 bestanden nodig, laten we zeggen contact.php en custom.js.

Vergeet allereerst niet de bibliotheek aan te sluiten Jquery, met zijn hulp zullen we de code verschillende keren verkleinen en zullen we gemakkelijk acties kunnen uitvoeren met behulp van kant-en-klare oplossingen.

$ (". formulier"). submit (function () (var str = $ (this) .serialize (); $ .ajax ((type: "POST", url: "contact.php", data: str, succes : function (msg) (if (msg == "ok") (waarschuwing ("E-mail verzonden"));) else (waarschuwing ("Fout! Mogelijk hebt u de velden verkeerd ingevuld.");)))); return vals ;) );

Laten we nu eens kijken wat het actieschema is en waarom we al deze bibliotheken en bestanden nodig hebben. Wanneer de gebruiker op de verzendknop klikt, hebben we een verzendgebeurtenis, die we in custom.js zullen schrijven en op basis waarvan we alle gegevens van het formulier zullen ontvangen en deze naar het contact.php-bestand zullen overbrengen. Hier controleren we nogmaals of we lege velden hebben (om een andere mogelijkheid van spam te voorkomen), sturen we een e-mailbericht en informeren we de gebruiker over de resultaten, die als reactie op custom.js worden verzonden.

If (trim ($ _ POST ["mfbPhone"]) == "") (echo "false";) else ($ txtname = trim ($ _ POST ["mfbName"]); $ txtemail = trim ($ _ POST ["mfbMail "]); $ txtphone = trim ($ _ POST [" mfbPhone "]); // van wie $ fromMail =" [e-mail beveiligd]"; // Vul hier uw e-mailadres in $ emailTo =" [e-mail beveiligd]"; $ onderwerp =" Feedback "; $ onderwerp =" =? utf-8? b? ". base64_encode ($ onderwerp)."? = "; $ headers =" Van: Voorbeeldformulier<$fromMail>\ n "; $ headers. =" Inhoudstype: tekst / gewoon; charset = "utf-8" \ r \ n "; $ headers. =" MIME-versie: 1.0 \ r \ n "; $ headers. =" Datum: ". datum (" D, d MIJN h: i: s O ")." \ R \ n "; // bericht body $ body =" Een brief ontvangen van de site ". $ Site." \ n \ nNaam: ". $ txtname." \ nTelefoon: ". $ txtphone." \ ne-mail: ". $ txtemail." \ nBericht: ". $ txtmessage; mail ($ emailTo, $ onderwerp, $ body, $ headers); echo "ok";)

Dit is het meest eenvoudige voorbeeld van hoe een contactformulier werkt. Er zijn veel opties voor het wijzigen van het controlebestand in php, het maken van uw eigen klassen, enz. Maar onze taak was om een eenvoudig en werkend voorbeeld te maken dat u op uw site kunt gebruiken.

demo

bestanden

Klaar plug-ins

Sinds je aan bent WordPress-blog, ben je waarschijnlijk klaar en enthousiast om allerlei soorten plug-ins te gebruiken, vooral als je een complete lam bent in programmeren en lay-out. En ik neem u dit niet kwalijk, en ik kan zelfs een van hen ter verduidelijking onder uw aandacht brengen. Het doel van deze paragraaf is geen aanbeveling, maar slechts een voorbeeld, aangezien ik de plug-in heb gebruikt Contact Formulier 7 bij meerdere projecten.

Het is zeer eenvoudig te configureren en werkt vrijwel altijd foutloos. Als u uw eigen unieke ontwerp wilt maken, kunt u dat doen. Het is voldoende om de benodigde velden in de constructor toe te voegen, meldingen over fouten en succesvolle verzending op uw eigen manier te vertalen en te wijzigen, en u bent klaar. Kopieer vervolgens de shortcode en plak deze in de juiste plek uitvoer vormen.

Ik heb nooit problemen gehad met de plug-in, en als je een snelle en kant-en-klare oplossing dan is dit het. Als u uw eigen functionele en ontwerpvereisten voor het formulier heeft, is het beter om de eerste optie te gebruiken, waarvoor kennis in deze branche vereist is.

Goedemiddag, op elke site moet een feedbackformulier aanwezig zijn. Vandaag zal ik een voorbeeld laten zien van een kant-en-klaar formulier om op elke site in te voegen, inclusief de wordpress-engine. Klaar html voorbeeld en php-code kan worden gekopieerd naar uw site. Naast het kant-en-klare voorbeeld zijn er veel plugins die ook erg populair zijn. Op veel sites is zo'n formulier al in het thema ingebouwd, maar soms is het nodig om een andere aan een andere pagina toe te voegen of de oude te vervangen.

Voordat ik aan dit artikel begon, heb ik op internet gezocht naar een antwoord op deze vraag. door te herzien meer kwantiteit sites en blogs, vond ik heel weinig antwoorden van hoge kwaliteit voor het invoegen van een feedbackformulier op een site. Het meeste materiaal is geschreven over het werken met plug-ins. Bij sommige artikelen is niet helemaal duidelijk wat en hoe te doen, de code werkt niet, letters komen niet aan... en ga zo maar door.

Er zijn natuurlijk fatsoenlijke antwoorden, maar er zijn er maar heel weinig. Ik zal je een eenvoudig voorbeeld geven dat niet veel intelligentie nodig heeft. Speciale kennis in php is niet vereist, of beter gezegd, ze zijn helemaal niet nodig. Wat en waar moet worden gewijzigd, zal ik in detail schrijven wanneer het nodig is. Het formulier werkt prima zonder glitches. Een voorbeeld van het formulier staat op mijn site. In het voltooide voorbeeld heb ik een paar stijlen voor schoonheid toegevoegd, zodat de vorm er helemaal niet "shabby" uitziet. Als je wilt, kun je alles naar eigen inzicht wijzigen.

Een kant-en-klaar feedbackformulier voor een website in html

V dit voorbeeld, het feedbackformulier voor de site bestaat uit: HTML code... Voeg zo'n voorbeeld van html-code toe aan absoluut elke pagina van de site, waar en wat u ook gebruikt. Dezelfde code kan in de pagina worden ingevoegd wordpress-engine, alles zal correct en zonder onderbreking werken.

< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form"> Naam< input class = "inp" style = "width: 30%;" name = "name" type = "text" / >

E-mail:< input class = "inp" style = "width: 30%;" name = "email" type = "text" / >

Bericht Onderwerp< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / >

Je berichtje:

< textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea >

< input class = "inp" type = "submit" value = "versturen" / >

< / form >

Helemaal aan het begin van de code, in de eerste regel, moet u uw pad specificeren naar php-bestand form.php (hierover later meer). U hoeft verder niets te veranderen. Als u niet tevreden bent met de naam van het formulier en de velden, kunt u altijd nieuwe toevoegen of de oude wijzigen. U kunt ook uw eigen stijlen direct aan de speeltafel toevoegen. Als deze optie onhandig voor je is, definieer dan nieuwe klassen en voeg dan pas stijlen toe via je style.css-bestand

Wie niet weet hoe dit kan, ga naar het site admin panel, ga naar de editor en open het style.css bestand. Voeg deze code helemaal aan het einde van de stylesheet toe. Als gevolg hiervan moet de formuliercode in de pagina worden ingevoegd en uw css-stijlen naar de tabel style.css

Inp (padding: 10px; border: 1px solid # styled; width: 200px; color: # 999999; box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba (0 , 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px;)

inp (

opvulling: 10px;

grens: 1px solide # exe;

breedte: 200px;

kleur: # 999999;

box - schaduw: rgba (0, 0, 0, 0.1) 0px 0px 8px;

Moz - doos - schaduw: rgba (0, 0, 0, 0.1) 0px 0px 8px;

Webkit - doos - schaduw: rgba (0, 0, 0, 0.1) 0px 0px 8px;

Na de genomen stappen zou u dit feedbackformulier op de pagina moeten krijgen. Laat u niet te veel meeslepen, uw formulier moet zo eenvoudig en gemakkelijk mogelijk zijn. Zonder onnodige extra velden ... naam, mail, onderwerp en bericht. Indien gewenst kan zelfs het Onderwerp van het bericht worden verwijderd.

PHP-formuliercode

We hebben gekozen voor de opmaak van het formulier, we hebben het mooi gemaakt, nu moeten we een bestand maken met php extensie en voeg de volgende code eraan toe. Voeg het bestand toe via FTP-client naar uw website. De meeste gebruikers gebruiken CMS, gooi maar weg dit bestand in je themamap. Het adres en de naam van dit bestand moet u in eerste instantie registreren in de opmaak van uw formulier, dat ik hierboven heb laten zien. ik heb voorgeschreven vol pad zodat het bijvoorbeeld duidelijk is wat en waar in te vullen.

(

De code van het form.php-bestand zelf bevat:

< meta http - equiv = "refresh" content = "1; url=http://сайт" >
< meta charset = "UTF-8" / >
if (isset ($ _POST ["naam"])) ($ naam = $ _POST ["naam"]; if ($ naam == "") (uitgeschakeld ($ naam);))
if (isset ($ _POST ["e-mail"])) ($ e-mail = $ _POST ["e-mail"]; if ($ e-mail == "") (uitgeschakeld ($ e-mail);))
if (isset ($ _POST ["temma"])) ($ temma = $ _POST ["temma"]; if ($ temma == "") (uitgeschakeld ($ temma);))
if (isset ($ _POST ["massage"])) ($ massage = $ _POST ["massage"]; if ($ massage == "") (uitgeschakeld ($ massage);))
if (isset ($ naam) && isset ($ e-mail) && isset ($ temma) && isset ($ massage)) (
$ adres = " [e-mail beveiligd]" ;
$ mes = "Naam: $ naam \ nE-mail: $ e-mail \ nOnderwerp: $ temma \ nTekst: $ massage";
$ verzenden = e-mail ($ adres, $ temma, $ mes, "Inhoudstype: tekst / gewoon; charset = UTF-8 \ r \ nVan: $ e-mail") ;
if ($ verzenden == "true")
(echo "Bericht verzonden"; }
anders (echo "O, er is iets misgegaan."; }
anders
echo "Vul alle velden in";

Schrijf uw siteadres in plaats van url = http: // site. $ adres = " [e-mail beveiligd]"- in deze regel geven we ons e-mailadres aan, dat brieven zal ontvangen. U hoeft verder niets te veranderen, alles is ingesteld en werkt. Als je problemen ondervindt tijdens het installatieproces, schrijf dan in de opmerkingen, ik zal zeker antwoorden.

Feedback invoegen in wordpress

Het proces van het installeren van een formulier in WordPress is niet anders, alle acties worden op dezelfde manier uitgevoerd. Het is wenselijk om het bestand form.php te uploaden naar de map met uw thema. Vergeet niet het volledige en exacte adres van het handlerbestand op te geven in de html-opmaak. Bovendien moet u het siteadres naar uw site wijzigen en uw e-mailadres correct schrijven. De kant-en-klare formuliercode kan op elke pagina van uw blog worden ingevoegd. Als voorbeeld heb ik toegevoegd aan mijn blog op de pagina met prijsvragen.

U kunt bijvoorbeeld een pagina Contact Auteur of Auteur maken en uw formulier daar uploaden. Op sommige blogs zie ik onderaan elk formulier een rij social media buttons of extra opties om contact op te nemen met de auteur. Als je wilt, kun je het ook herhalen. Het contactformulier werkt op mijn blog, ik heb het persoonlijk gecontroleerd op mijn eigen voorbeeld. Als de brieven u niet bereiken, ligt het probleem bij u.

WordPress-plug-ins

Als u problemen ondervindt bij het invoegen van dit soort feedback op uw site, kunt u een van de plug-ins vertellen en deze op uw site installeren. Tegenwoordig zijn er een groot aantal plug-ins die kunnen worden gebruikt om dergelijke formulieren voor de site te maken. Ga naar het beheerderspaneel, klik op Plug-ins - voeg een nieuwe toe. We kiezen alles wat je leuk vindt en gebruiken het voor de gezondheid. Populairder is de Contact Form 7-plug-in.

Snel veilig contactformulier.

Contactformulier via Contact ME.

VormAmbacht.

Visuele vorm bouwer.

nForms - WordPress Form Builder.

Zwaartekracht formulieren.

We installeren ze allemaal om de beurt en bekijken ze elk afzonderlijk. Besteed onmiddellijk aandacht aan de functionaliteit van de plug-in, om de externe link naar de website van de auteur (indien aanwezig) te verwijderen. Al dergelijke vormen zien er in eerste instantie niet erg mooi uit, kun je het aanpassen aan je smaak en kleur?

Laten we de eerste als voorbeeld nemen. Een nieuwe plug-in toevoegen Contact Form 7. Deze plug-in is heel eenvoudig, u zou er geen problemen mee moeten hebben om ermee te werken. Veel bloggers gebruiken deze plug-in voor extra kleine formulieren op hun sites. Ga naar de linkerconsole in het item Contact Form 7 en klik op "een nieuw formulier toevoegen". De standaardtaal is al Russisch.

Selecteer in het eerste tabblad de velden die aanwezig zullen zijn en geef ze een naam. Het is niet nodig om een heel groot formulier te maken, een naam, e-mail, onderwerp, bericht en een knop "verzenden" toe te voegen. In het tabblad "Brief" geven we uw e-mailbox aan, die berichten zal ontvangen. "U zou geen speciale problemen moeten hebben, alles is intuïtief.

Na het maken biedt de plug-in u een shortcode aan die u bijvoorbeeld op de juiste plaats op de site moet invoegen. Nadat je de shortcode hebt ingevoerd, zie je je gloednieuwe formulier. Ga bij het maken van een pagina naar het tabblad "Tekst" en plak uw code.

Het kleine nadeel is dat je feedbackontwerp erg slecht zal zijn. Wees niet te boos. We gaan via ftp op het opgegeven adres wp-content / plug-ins / contactformulier-7 / modules. Deze map bevat alle css-stijlen van de plug-in. Je kunt veilig je eigen nieuwe eigenschappen toevoegen zodat je vorm mooi en opvallend is.

Feedback formulier generator

Naast aanvullende plug-ins kunt u dergelijke formulieren gebruiken. Er zijn speciale diensten waarmee u snel en zonder veel kennis een nieuw formulier kunt maken. Er is een andere kant aan de medaille. Dergelijke diensten moeten ook worden gecontroleerd op prestaties en, belangrijker nog, op de kosten van dergelijk plezier. Sommige zijn gratis, maar er zijn ook betaalde opties. Schrijf in Yandex de naam van een van hen.

vormontwerper;

livetools.uiparade;

Google Formulieren;

iFormbouwer;

fee.

In dergelijke online generatoren is het niet nodig om helemaal opnieuw code te schrijven, na te denken over fouten, enzovoort. Alles is al eerder gedaan. Van u is het noodzakelijk om alleen de velden voor het formulier te selecteren, de knop "verzenden" toe te voegen en alle benodigde records te registreren. Na al deze stappen biedt de service u een insluitcode op de sitepagina. Kopieer de ontvangen code naar je pagina en controleer de verbinding op functionaliteit.

Op elke site bestaat nu een link met de eigenaar van een site, blog of winkel. Veel online winkels maken gebruik van betaalde diensten. Met behulp van dergelijke diensten neemt, naast het verzenden van brieven, het aantal verkopen toe. Het is erg handig wanneer een klant de site bezoekt en op elk moment contact kan opnemen met de beheerder van de online winkel.

Tegenwoordig zijn er een groot aantal van dit soort diensten en ze staan niet allemaal stil. Bij elke update worden nieuwe chips toegevoegd. Online consultants voegen veel functies toe aan uw online winkel voor het gemak van communicatie met de klant. Laten we de livetex-service als voorbeeld nemen, het enige nadeel is waarschijnlijk de prijs. De gebruiksperiode van drie maanden kost 4200 roebel voor één winkel. Er is altijd een mogelijkheid om een proefperiode te proberen.

Live communicatie met de klant.

Lood generatoren.

Verschillende callback-widgets.

Online statistieken.

Online toezicht.

Als je nog vragen hebt over hoe je feedback op de site kunt geven, stel ze dan in de comments. Deel het artikel gerust op social media.

Een van de meest voorkomende taken in de praktijk is de implementatie van het feedbackformulier. Je schrijft de HTML-code, versiert deze in CSS, maakt een PHP-script dat de gegevens die van de gebruiker zijn ontvangen zou verwerken en naar onze e-mail zou sturen, een JS-script zou schrijven dat het formulier zou controleren op de geschiktheid van de invoergegevens, onze geesteskind van spam, zodat onze mailbox niet instortte door botaanvallen.

Alle bovenstaande punten zullen in onze beoordeling worden overwogen en in detail worden becommentarieerd.

Laten we dus beginnen met het maken van een feedbackformulier:

HTML

Allereerst schrijven we HTML-code, het stelt de velden in die de gebruiker zal invullen. Deze zullen in de toekomst worden uitgegeven. De formuliercode ziet er als volgt uit:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Naam: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefoon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mailadres: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Bericht: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "versturen" />

En visueel ziet het er nu zo uit:

Ik ben het ermee eens, tot nu toe is alles lelijk en is niets duidelijk, maar we zijn net begonnen.

Overweeg de bovenstaande code in detail:

< form method= "post" action= "mail.php" > …

om een formulier te maken, moet u de formuliertag gebruiken. Hij is het die het begin en einde van het formulier voor de code-interpreter bepaalt. Het heeft, zoals elke tag, een hele reeks attributen, maar er zijn er maar twee nodig om het formulier te laten werken, dit zijn methode (de methode om een verzoek naar de server te sturen, voor formulieren gebruiken ze post als standaard) en actie ( specificeert het pad naar de bestandshandler van het formulier, precies in dit bestand zal een script in PHP staan, dat vervolgens de door de gebruiker ingevoerde waarden naar onze mail zal sturen, in ons geval zien we dat dit bestand mail heet .php en het ligt in dezelfde map van de site als de pagina die we overwegen).

< input maxlength= "30" type= "text" name= "name" />

Vervolgens hebben we ingangen. Dit zijn de daadwerkelijke formuliervelden waarin gebruikers de informatie invoeren die we nodig hebben (type = "tekst" geeft aan dat dit tekst zal zijn). Het kenmerk maxlength geeft aan hoeveel tekens een gebruiker in een bepaald formulierveld kan invoeren. Het belangrijkste attribuut is naam - het specificeert de naam van een bepaald veld. Het is door deze namen dat in de toekomst het PHP-script de informatie zal verwerken die erin wordt ingevoerd. Indien gewenst kunt u ook het placeholder-attribuut instellen, dat tekst in het veld weergeeft die verdwijnt wanneer de cursor erin wordt geplaatst. Een van de problemen met de tijdelijke aanduiding is dat deze door sommige oudere browsers niet wordt ondersteund.

< label for = "name" >Naam:

Gebruikt voor het geval we tijdelijke aanduidingen hebben verlaten. De gebruikelijke handtekening van een veld, het for-attribuut vertelt bij welk specifiek veld deze handtekening hoort. De waarde specificeert de naam van het interessegebied.

< textarea rows= "7" cols= "50" name= "message" >

Net zoals de invoer bedoeld is voor de gebruiker om informatie in te voeren, is dit keer het veld aangescherpt voor lange berichten. Rijen geeft de grootte van het veld in rijen aan, cols in tekens. Over het algemeen bepalen ze de hoogte en breedte van ons veld.

< input type= "submit" value= "versturen" />

Type = "verzenden" vertelt ons dat dit een knop is om een formulier in te dienen, en waarde bepaalt de tekst die binnen deze knop komt te staan.

< div class = "right" >

alleen gebruikt voor verdere visuele vormgeving van het formulier.

CSS

Om ons feedbackformulier er representatief uit te laten zien, moet u het ordenen. Om het volgende resultaat te krijgen:

We hebben deze code gebruikt:

formulier (achtergrond: # f4f5f7; opvulling: 20px;) formulier. links, vorm. rechts (display: inline-block; vertical-align: top; width: 458px;) formulier. rechts (opvulling- links: 20px;) label (display: blok; lettergrootte: 18px; tekst-uitlijning: midden; marge: 10px 0px 0px 0px;) invoer, tekstgebied (rand: 1px vast # 82858D; opvulling: 10px; lettergrootte: 16px; breedte: 436px;) tekstgebied (hoogte: 98px; marge-onder: 32px;) invoer [type = "submit"] (breedte: 200px; zwevend: rechts; rand: geen; achtergrond: # 595B5F; kleur: #fff; teksttransformatie: hoofdletters;)

Ik heb geen zin om de CSS in detail te beschrijven, ik zal uw aandacht alleen vestigen op de belangrijkste punten:

Je moet niet voor elke tag in het formulier een ontwerp schrijven. Probeer je selectors zo te bouwen dat je alle elementen die je nodig hebt kunt stylen met een paar regels code.

Gebruik geen extra tags per type voor regeleinden en inspringen < br>, < p> enzovoort, CSS doet geweldig werk met het display: blokeigenschap en marge met opvulling. Meer over waarom niet gebruiken < br> in de lay-out kun je over het algemeen de tag br in het artikel lezen, maar is het echt nodig? ...

Gebruik geen lay-outs in tabelvorm. Dit is in strijd met de semantiek van deze tag, en zoekmachines houden van semantische code. Om de visuele structuur van het document te vormen, hebben we alleen de div-tags nodig, en de display: inline-block (rangschikt blokken in een rij) en vertical-align: top (voorkomt dat ze over het scherm verspreid worden) eigenschappen ingesteld door ze in CSS, stel ze de gewenste hoogte in en voila, niets overbodigs en alles staat zoals we het nodig hebben.

Voor degenen die tijd willen besparen op het ontwerpen van websites, kan ik je aanraden om CSS-frameworks te gebruiken bij het maken van websites, vooral zelfgeschreven. Mijn keuze voor dit abonnement is Twitter Bootstrap. U kunt een les bekijken over het ontwerpen van formulieren ermee.

PHP

Welnu, nu is het tijd om ons formulier werkbaar te maken.

We gaan naar de hoofdmap van onze site en maken daar een mail.php-bestand aan, waarnaar we eerder het pad hebben aangegeven in het actieattribuut van de formuliertag.

Uiteindelijk zal zijn code er als volgt uitzien:

Uw bericht is succesvol verzonden. \ "javascript: history.back () \"> Ga terug
" ; if (! leeg ($ _POST ["naam"]) en! leeg ($ _POST ["telefoon"]) en! leeg ($ _POST ["mail"]) en! leeg ($ _POST ["bericht"])) ($ name = trim (strip_tags ($ _POST ["name"])); $ phone = trim (strip_tags ($ _POST ["phone"])); $ mail = trim (strip_tags ($ _POST ["mail"]) ); $ message = trim (strip_tags ($ _POST ["message"])); mail (,, "Ik schreef je:". $ naam. "
Zijn nummer is ". $ Telefoon."
Zijn mail: ". $ Mail. "
Zijn boodschap: "... $ bericht,); echo "Je bericht is succesvol verzonden!
Je krijgt zo snel mogelijk antwoord
$ terug "; Uitgang; ) else (echo; exit ;)?>

De bespreking van het HTML- en CSS-gedeelte van dit document kan worden overgeslagen. In de kern is dit een gewone pagina van de site, die u naar wens en behoefte kunt ontwerpen. Laten we eens kijken naar het belangrijkste deel ervan - het PHP-script voor het verwerken van het formulier:

$ terug = "
\ "javascript: history.back () \"> Ga terug
" ;

Met deze regel creëren we een link om terug te keren naar de vorige pagina. Omdat we niet van tevoren weten vanaf welke pagina de gebruiker op deze pagina komt, gebeurt dit met een kleine JS-functie. In de toekomst zullen we eenvoudig naar deze variabele verwijzen om deze weer te geven op de plaatsen die we nodig hebben.

if (! leeg ($ _POST ["naam"]) en! leeg ($ _POST ["telefoon"]) en! leeg ($ _POST ["mail"]) en! leeg ($ _POST ["bericht"])) ( // binnenste deel van de handler) anders (echo "Vul alle velden in om uw bericht te verzenden! $ Terug"; Uitgang; )

Hier hechten we de controle van het formulier op de volheid van de velden. Zoals je misschien al geraden hebt, schrijven we in het $ _POST ["name"]-gedeelte, tussen aanhalingstekens, de waarde van het name-attribuut van onze invoer.

Als alle velden zijn ingevuld, zal het script beginnen met het verwerken van de gegevens in het interne gedeelte, als ten minste één veld niet is ingevuld, wordt er een bericht weergegeven op het scherm van de gebruiker met het verzoek om alle velden in te vullen van het formulier echo "Om een bericht te verzenden, vul alle velden in! $ Terug" en een link om terug te keren naar de vorige pagina die we op de allereerste regel hebben gemaakt.

Vervolgens voegen we in het binnenste deel van de formulierhandler in:

$ naam = trim (strip_tags ($ _POST ["naam"])); $ telefoon = trim (strip_tags ($ _POST ["telefoon"])); $ mail = trim (strip_tags ($ _POST ["mail"])); $ bericht = trim (strip_tags ($ _POST ["bericht"]));

We hebben dus de gebruikersinvoer van html-tags en extra spaties gewist. Hierdoor kunnen we onszelf beschermen tegen het ontvangen van kwaadaardige code in berichten die naar ons worden verzonden.

Controles kunnen ingewikkeld zijn, maar dit is op uw verzoek. We hebben de minimale beveiliging al aan de serverzijde geïnstalleerd. Verder zullen we aan de klantzijde doen met behulp van JS.

Ik raad niet aan om formulierbeveiliging aan de serverkant volledig te verlaten ten gunste van JS, omdat, hoewel het uiterst zeldzaam is, er unieke zijn waarbij JS in de browser is uitgeschakeld.

Voeg na het opschonen van de tags het verzenden van een bericht toe:

post ( "[email protected]", "Brief van uw_site_adres", "Ik heb je geschreven:" $ naam. "
Zijn nummer is ". $ Telefoon."
Zijn mail: ". $ Mail. "
Zijn boodschap: "... $ bericht, "Inhoudstype: tekst / html; charset = windows-1251") ;

Het is deze lijn die zich bezighoudt met het vormen en verzenden van een bericht naar ons. Het is als volgt ingevuld:

"[email protected]" - plaats uw e-mail hier tussen de aanhalingstekens

"Letter from your_site_address" is het onderwerp van het bericht dat in de mail zal aankomen. Je kunt hier alles schrijven.

"Ik schreef je:". $ Naam. " < br /> Zijn nummer is ". $ Telefoon." < br /> Zijn post: ". $ Mail." < br /> Het bericht: ". $ Bericht - we vormen de tekst van het bericht zelf. $ Naam - we voegen de informatie in die door de gebruiker is ingevuld door te verwijzen naar de velden uit de vorige stap, tussen aanhalingstekens beschrijven we wat dit veld betekent, met de label < br /> we maken een regeleinde zodat het bericht als geheel leesbaar is.

Inhoudstype: tekst / html; charset = windows-1251 - aan het einde is er een expliciete indicatie van het gegevenstype dat in het bericht wordt verzonden en de codering ervan.

BELANGRIJK!

De codering gespecificeerd in de "kop" van het document ( < meta http- equiv= "Content-Type" content= "tekst / html; tekenset = windows-1251" /> ), de codering van het bericht Inhoudstype: tekst / html; charset = windows-1251 en, in het algemeen, de codering van het PHP-bestand moet overeenkomen, anders in berichten die per post worden ontvangen, in plaats van Russische of Engelse letters, "krakozyabry " zullen worden tentoongesteld.

Velen geven niet expliciet de codering aan van het bericht dat wordt verzonden, maar op sommige e-mailclients kan dit in de toekomst problemen veroorzaken (onleesbare brieven komen naar de e-mail), dus ik raad aan om het allemaal hetzelfde te specificeren.

Het formulier controleren op de juistheid van de ingevulde gegevens

Om ervoor te zorgen dat gebruikers de velden niet door onoplettendheid missen en alles correct invullen, is het de moeite waard om de ingevoerde gegevens te controleren.

Dit kan zowel in PHP aan de serverzijde als in JS aan de clientzijde. Ik gebruik de tweede optie, omdat een persoon op deze manier onmiddellijk kan achterhalen wat hij verkeerd heeft gedaan en de fout kan corrigeren zonder extra overgangen door de pagina's te maken.

Voeg de scriptcode in hetzelfde bestand in waar het HTML-gedeelte van het formulier zich bevindt. Voor ons geval ziet het er als volgt uit:

< script>function checkForm (form) (var name = form. name. value; var n = name. match (/ ^ [A- Za- zA- Ya- z] * [A- Za- zA- Ya- z] + $ / ); als (! n) (waarschuwing ( "De naam is onjuist ingevoerd, corrigeer de fout."); onwaar retourneren; ) var telefoon = formulier. telefoon. waarde; var p = telefoon. overeenkomen (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); als (! p) (waarschuwing ( "Telefoon verkeerd ingevoerd"); onwaar retourneren; ) var mail = formulier. mail. waarde; var m = e-mail. match (/ ^ [A- Za- z0- 9] [A- Za- z0- 9 \. _-] * [A- Za- z0- 9 _] * @ ([A- Za- z0- 9] + ([A- Za- z0- 9 -] * [A- Za- z0- 9] +) * \.) + [A- Za- z] + $ /); als (! m) (waarschuwing ( "E-mailadres verkeerd ingevoerd, corrigeer de fout"); onwaar retourneren; ) retourneer waar; )

Nou, nu voor de gebruikelijke ontleding:

Voor, zodat wanneer u op de verzendknop van het formulier klikt, we het hebben gecontroleerd we hangen de lancering van ons script op de formuliertag:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Nu nemen we punt voor punt de samenstelling van de cheque:

Zoals u kunt zien, wordt voor elk van onze velden zo'n minicheque geschreven. Ik heb de controle voor één veld in de schermafbeelding gemarkeerd met een rood vierkant, voor andere velden heeft het een vergelijkbare structuur en als het nodig is om een veld toe te voegen of te verwijderen, kun je dat nu eenvoudig doen.