Hallo, lieve lezers blogsite. Vandaag wil ik het hebben over manieren om formulieren te maken feedback, bestelling, contact en andere typen die een webmaster mogelijk moet organiseren handige communicatie met uw bezoekers of klanten.
Het is duidelijk wanneer gebruik van Joomla en WordPress kan het probleem van feedback of bestelling worden opgelost met behulp van diverse uitbreidingen of plug-ins, maar er zijn methoden die geschikt zijn voor absoluut elk project dat op beide is gebouwd pure HTML, en het gebruik van (scripts, cms, constructors en generatoren van feedbackformulieren).
Hoewel er oplossingen zijn die dit niet vereisen PHP-ondersteuning, en ze zullen ook in dit artikel worden genoemd. Er zullen in dit artikel geen bijzonder gedetailleerde beschrijvingen van de installatie en configuratie staan, omdat dit slechts een overzicht is van de beschikbare opties die nu op internet te vinden zijn.
Ik zou het zeer op prijs stellen als u in de opmerkingen uw voorbeeld geeft van het maken van feedbacksystemen (bij voorkeur origineel, mooi en functioneel) met een link naar de beschrijving en een pagina met een voorbeeld (ik ben nog steeds bezig met het vinden van de ideale oplossing).
Feedbackformulieren voor Joomla en WordPress
Laten we eens kijken hoe u feedback kunt organiseren in Joomla en WordPress standaard middelen of het gebruik van extensies.
Joomla heeft al een standaardoptie die deze functionaliteit implementeert, waarvan u de instellingen kunt lezen via de meegeleverde link. In de regel bevat de distributie van deze engine standaard de meest stabiele extensies, maar niet altijd de meest functionele. En ontwikkelaars slapen niet, en er verschijnen periodiek nieuwe, meer functionele oplossingen.
Zo kun je voor Joomla een aparte feedbackmodule downloaden genaamd Snel contact, waarmee u nieuwe functies en functionaliteit kunt krijgen (zie demo). Je leest over de opzet en mogelijkheden van deze module. Daarnaast, standaard onderdeel in Joomla om feedback te implementeren heeft niet voldoende flexibiliteit en staat het gebruik van spambescherming (captcha) niet toe, en staat je ook niet toe om verschillende contactformulieren op de website.
Deze problemen worden opgelost door een alternatief onderdeel voor deze motor te gebruiken, genaamd aiContactSafev, waarmee u een willekeurig aantal feedbackformulieren op de site kunt maken (u kunt ze koppelen aan andere e-mail adressen) en heeft de mogelijkheid om een veld voor het uploaden van bestanden toe te voegen, evenals andere veldtypen.
Het controleert of velden correct zijn ingevuld en geeft foutmeldingen weer, en aiContactSafev slaat ook een archief op van alle verzonden gegevens, zodat u deze kunt bekijken vanuit .
Dit onderdeel bevat een zeer flexibele captcha (het invoeren van een code bij het verzenden van gegevens ter bescherming tegen spam). Het kan gratis worden gedownload voor verschillende versies Jumla, een.
Laten we het nu over WordPress hebben. Persoonlijk heb ik hier nog geen besluit over genomen en ik heb een regelmatige e-mail op mijn contactpagina, wat over het algemeen niet erg cool is, omdat het al lang in de spamdatabase staat, en als ik dat niet had kunnen doen koppel het aan een gewone, dan zou de vloed aan spam me al lang geleden hebben overweldigd.
Maar het spam-cutten van Google-mail werkt goed en zelfs te goed, omdat uw brieven, beste lezers, soms onder zijn hete hand vallen, waarvoor ik, op dit moment, mijn excuses aanbied.
Over het algemeen is dit het belangrijkste voordeel van het feedbackformulier: u kunt uw feedbackformulier behouden postadres voor spammers. Welnu, het is meestal ook ontworpen in een vrij aangename schil, wat een pluspunt kan zijn voor de houding van gebruikers ten opzichte van uw project. Dit geldt vooral voor commerciële middelen, wanneer een handig bestel- of feedbackformulier de conversie (inkomsten) kan verhogen.
Eigenlijk over WordPress. Er is een zeer populaire en zeer krachtige plug-in genaamd Contactformulier 7. Zijn populariteit is simpelweg buiten de hitlijsten, wat betekent dat er iets speciaals aan hem is. Het is waar dat je om de captcha-functie te implementeren een extra Real Simple CAPTCHA-plug-in moet installeren.
Het feedbackformulier kan in elke pagina of post van uw WordPress-blog worden ingevoegd, maar ook in een widget. In feite is dit een soort constructor voor WordPress waarmee je informatie in het formulier kunt bijwerken zonder de pagina te vernieuwen (met behulp van ajax-technologie). Persoonlijk heb ik deze plug-in voor de site ongeveer een paar jaar geleden getest, en toen leek het mij erg zwaar en ongepast omslachtig om mijn doelen te bereiken (feedback).
Dat is duidelijk in deze tijd Contactformulier 7 zou veel geschikter kunnen worden voor de uitvoering van de taken waarmee we te maken hebben en daarom stel ik voor dat u het zelf uitprobeert, vertrouwend op behoorlijk wat gedetailleerde beschrijving. Als je een andere goede en lichtgewicht plug-in gebruikt, schrijf daar dan een paar woorden over in de reacties.
We hebben het dus gehad over het implementeren van feedback in Joomla en WordPress met behulp van de juiste extensies.
Maar dat is er ook verschillende manieren:
Maak het formulier zelf. Om dit te doen, moet u de code schrijven en het uiterlijk ervan ontwerpen met behulp van CSS-stijlen, en schrijf er ook een handler voor in Php (in principe is de kennis die is opgedaan met de videocursus van Popov over Php voldoende) en controleer vervolgens of de velden correct zijn ingevuld en nog iets anders. Ik kan je meteen vertellen dat dit niet gemakkelijk zal zijn.
Om het installatie- en configuratieproces te beschrijven van dit schrift je zult een apart artikel moeten schrijven, dus ik stel voor dat je en downloadt bekijk een gedetailleerde video-tutorial over deze kwestie, waarin ook het proces wordt beschreven van het integreren van het script in het ontwerp van uw site.
Feedbackformulierontwerpers en -generatoren
Er zijn nogal wat ontwerpers en generatoren van online feedbackformulieren. Deze service biedt u bijvoorbeeld een redelijk handige en functionele interface om structuren van vrijwel elke complexiteit te creëren. In de eerste stap wordt u gevraagd een kleurenschema te kiezen:
Daarna moet u aan de linkerkant van het venster de vereiste velden voor het toekomstige formulier selecteren en ze vervolgens, door erop te klikken, groter maken fijnafstemming(veldlabels instellen in het Russisch, veldbreedte selecteren, type wijzigen en voorlopige tekst invoeren):
Toegevoegde velden kunnen worden verwisseld eenvoudig slepen en neerzetten muis, verwijderen en opnieuw bewerken:
Over het algemeen is de interface hiervan online ontwerper heel, heel modern en comfortabel. Nadat u alle benodigde velden in de gewenste volgorde heeft geplaatst en alle benodigde instellingen heeft opgegeven, kunt u op de knop Opslaan klikken (onderaan). Op volgende pagina u wordt gevraagd het feedbackscript te bekijken en te downloaden of terug te keren naar bewerken:
Feedback voor HTML-sites (zonder PHP)
Eten online diensten, die gratis hun eigen Php-handlers ter beschikking stellen, die zich op hun servers zullen bevinden. Dit type omvat:
Geen fontein natuurlijk in termen van verfijning van het ontwerp, maar zo'n formulier kan in vijf seconden worden gemaakt en in nog een minuut op absoluut elke website worden geplaatst, zelfs op een hosting zonder PHP-ondersteuning.
Na het instellen verschijning en voeg de vereiste velden toe, klik op de knop "Bekijken" en vervolgens op de knop "Geconfigureerd" en kopieer de code. Plak het in de contactpagina en klik op de knop "Invoegen" onder de code.
Voer daarna het adres in van de pagina op uw site waar u de code heeft ingevoegd en E-mailadres, die gebruikersberichten zou moeten ontvangen die via dit formulier zijn verzonden.
Er is nog een feedbackformuliergenerator die qua functionaliteit sterk op elkaar lijkt. Ontwerpen die ermee zijn gemaakt, kunnen ook op hostingsites worden geplaatst zonder PHP-ondersteuning (geef gewoon het pagina-adres en het e-mailadres op waarnaar de berichten worden verzonden). Ik zal er niet veel over praten, omdat het in wezen erg lijkt op de constructor die hierboven is beschreven.
Veel geluk voor jou! Tot binnenkort op de pagina's van de blogsite
Je kunt meer video's bekijken door naar te gaan");">
Misschien ben je geïnteresseerd
Google Forms - hoe u een online enquête op een website maakt in Google Forms 
SendPulse- Pushmeldingen voor de site en gratis optie hun verbindingen van SandPulse Online HTML-editors- visueel, IDE en editors voor installatie op de site 
Versnel en bescherm uw website in cloud-service Airi.rf
Een van de meest populaire functies op de site is het aanvraag- of bestelformulier, waarvan de gegevens per e-mail naar de site-eigenaar worden verzonden. Dergelijke formulieren zijn in de regel eenvoudig en bestaan uit twee of drie velden voor gegevensinvoer. Hoe maak je zo’n bestelformulier aan? Hiervoor is taalgebruik nodig HTML-opmaak en taal PHP-programmering.
De HTML-opmaaktaal zelf is eenvoudig; u hoeft alleen maar uit te zoeken hoe en waar u bepaalde tags moet plaatsen. Met de programmeertaal PHP zijn de zaken iets ingewikkelder.
Voor een programmeur is het maken van zo'n formulier niet moeilijk, maar voor een HTML-lay-outontwerper lijken sommige acties misschien moeilijk.
Maak een formulier voor het indienen van gegevens in html
De eerste regel zal als volgt zijn
Laten we nu alles samenvoegen.
Laten we nu de velden in het formulier verplicht maken. We hebben de volgende code:
Maak een bestand dat gegevens uit het HTML-formulier accepteert
Dit zal een bestand zijn met de naam send.php
In het bestand moet u in de eerste fase gegevens uit de post-array accepteren. Om dit te doen, maken we twee variabelen:
$fio = $_POST["fio"];
$e-mail = $_POST["e-mail"];
Namen van variabelen in PHP worden voorafgegaan door een $-teken en aan het einde van elke regel wordt een puntkomma geplaatst. $_POST is een array waarnaar gegevens uit het formulier worden verzonden. In het HTML-formulier wordt de verzendmethode gespecificeerd als method="post". Er worden dus twee variabelen uit gehaald html-formulieren. Om uw site te beschermen, moet u deze variabelen door verschillende filters sturen: php-functies.
De eerste functie converteert alle tekens die de gebruiker aan het formulier probeert toe te voegen:
In dit geval worden er geen nieuwe variabelen aangemaakt in php, maar worden bestaande variabelen gebruikt. Wat het filter zal doen is het personage transformeren "<" в "<". Также он поступить с другими символами, встречающимися в html коде.
De tweede functie decodeert de URL als de gebruiker deze aan het formulier probeert toe te voegen.
$fio = urldecode($fio);
$email = urldecode($email);
Met de derde functie verwijderen we eventuele spaties aan het begin en einde van de regel:
$fio = trim($fio);
$email = trim($email);
Er zijn andere functies waarmee u php-variabelen kunt filteren. Het gebruik ervan hangt af van hoe bezorgd u bent dat een aanvaller programmacode zal proberen toe te voegen aan dit HTML-e-mailinzendingsformulier.
Validatie van gegevens overgedragen van HTML-formulier naar PHP-bestand
Om te controleren of deze code werkt en of er gegevens worden overgedragen, kunt u deze eenvoudig op het scherm weergeven met behulp van de echofunctie:
echo $fio;
echo "
";
echo $fio;
De tweede regel hier is nodig om de uitvoer van PHP-variabelen in verschillende regels te verdelen.
Ontvangen gegevens van een HTML-formulier naar e-mail verzenden met behulp van PHP
Om gegevens per e-mail te verzenden, moet u de mailfunctie in PHP gebruiken.
mail("naar welk adres moet worden verzonden", "onderwerp van de brief", "Bericht (hoofdtekst van de brief)", "Vanaf: vanuit welke e-mail de brief wordt verzonden \r\n");
U moet bijvoorbeeld gegevens naar het e-mailadres van de site-eigenaar of -beheerder sturen [e-mailadres beveiligd].
Het onderwerp van de brief moet duidelijk zijn en de boodschap van de brief moet bevatten wat de gebruiker heeft opgegeven in het HTML-formulier.
mail(" [e-mailadres beveiligd]", "Toepassing van de site", "Volledige naam:".$fio.". E-mail: ".$email ,"Van: [e-mailadres beveiligd]\r\n");
Het is noodzakelijk om een voorwaarde toe te voegen die controleert of het formulier via PHP naar het opgegeven e-mailadres is verzonden.
als (mail(" [e-mailadres beveiligd]", "Bestel via de site", "Volledige naam:".$fio.". E-mail: ".$email ,"Van: [e-mailadres beveiligd]\r\n"))
{
echo "bericht succesvol verzonden";
) anders (
}
De programmacode van het send.php-bestand, dat HTML-formuliergegevens naar e-mail verzendt, zal er dus als volgt uitzien:
$fio = $_POST["fio"];
$e-mail = $_POST["e-mail"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
// echo "
";
// echo $ e-mail;
als (mail(" [e-mailadres beveiligd]", "Toepassing van de site", "Volledige naam:".$fio.". E-mail: ".$email ,"Van: [e-mailadres beveiligd]\r\n"))
( echo "bericht succesvol verzonden";
) anders (
echo "Er zijn fouten opgetreden tijdens het verzenden van het bericht";
}?>
Drie regels om te controleren of de gegevens naar het bestand worden overgebracht, zijn van commentaar voorzien. Indien nodig kunnen ze worden verwijderd, omdat ze alleen nodig waren voor foutopsporing.
De HTML- en PHP-code voor het versturen van het formulier plaatsen wij in één bestand
In de commentaren op dit artikel stellen veel mensen de vraag hoe ze ervoor kunnen zorgen dat zowel het HTML-formulier als de PHP-code voor het verzenden van gegevens naar e-mail in één bestand staan, en niet in twee.
Om dit werk te implementeren, moet u de HTML-code van het formulier in het bestand send.php plaatsen en een voorwaarde toevoegen die controleert op de aanwezigheid van variabelen in de POST-array (deze array wordt verzonden vanuit het formulier). Dat wil zeggen, als de variabelen in de array niet bestaan, moet u de gebruiker het formulier laten zien. Anders moet u gegevens uit de array ontvangen en naar de ontvanger sturen.
Laten we eens kijken hoe we de PHP-code in het send.php-bestand kunnen wijzigen:
//controleer of er variabelen bestaan in de POST-array
if(!isset($_POST["fio"]) en !isset($_POST["e-mail"]))(
?> ) anders (
//toon het formulier
$fio = $_POST["fio"];
$e-mail = $_POST["e-mail"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
als (mail(" [e-mailadres beveiligd]", "Toepassing van de site", "Volledige naam:".$fio.". E-mail: ".$email ,"Van: [e-mailadres beveiligd]\r\n"))(
echo "Bericht succesvol verzonden";
) anders (
echo "Er zijn fouten opgetreden tijdens het verzenden van het bericht";
}
}
?>
We controleren het bestaan van een variabele in de POST-array met de isset() PHP-functie. Een uitroepteken voor deze functie in een voorwaarde betekent ontkenning. Dat wil zeggen, als de variabele niet bestaat, moeten we onze vorm tonen. Als ik het uitroepteken niet had geplaatst, zou de voorwaarde letterlijk betekenen: ‘als het bestaat, toon dan de vorm’. En dat is in ons geval verkeerd. Uiteraard kunt u de naam ervan wijzigen in index.php. Als u de naam van het bestand wijzigt, vergeet dan niet de bestandsnaam in de regel te hernoemen
< form action = "/wp-content/themes/xmarkup/form.php" methode = "post" naam = "formulier" > Naam< input class = "inp" style = "width: 30%;" name = "name" type = "text" / > E-mail:< input class = "inp" style = "width: 30%;" name = "email" type = "text" / > Berichtonderwerp< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / > Jouw tekst: < 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, op de eerste regel, moet u uw pad naar het php-bestand form.php aangeven (hierover later meer). Er is geen noodzaak om iets anders te veranderen. Als u niet tevreden bent met de naam van het formulier en de velden ervan, kunt u altijd nieuwe toevoegen of oude wijzigen. U kunt ook uw eigen stijlen rechtstreeks aan de tabel toevoegen. Als deze optie lastig voor u is, definieer dan nieuwe klassen en voeg pas daarna stijlen toe via uw style.css-bestand
Voor degenen die niet weten hoe ze dit moeten doen: ga naar het beheerderspaneel van de site, ga naar de editor en open het style.css-bestand. Voeg deze code helemaal aan het einde van het stijlblad toe. Als gevolg hiervan moet de formuliercode in de pagina worden ingevoegd en uw CSS-stijlen in de style.css-tabel
Inp( opvulling: 10px; rand: 1px effen #E5E5E5; breedte: 200px; kleur: #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-schaduw: rgba(0, 0, 0, 0.1) 0px 0px 8px )
Inp ( opvulling: 10px; rand: 1px effen #E5E5E5; breedte: 200px; kleur: #999999; vakschaduw: rgba (0, 0, 0, 0.1) 0px 0px 8px; Moz-box-schaduw: rgba (0, 0, 0, 0.1) 0px 0px 8px; Webkit - box - schaduw: rgba (0, 0, 0, 0.1) 0px 0px 8px; |
Na deze stappen zou er een feedbackformulier zoals dit op de pagina moeten staan. Laat u niet te veel meeslepen; uw formulier moet eenvoudig en zo comfortabel mogelijk zijn. Zonder onnodige extra velden...naam, e-mailadres, onderwerp en bericht. Indien gewenst kan zelfs het onderwerp van het bericht worden verwijderd. 
PHP-formuliercode
We hebben de opmaak van het formulier bepaald, we hebben het mooi gemaakt, nu moeten we een bestand maken met de php-extensie en de volgende code eraan toevoegen. Voeg het bestand via FTP-client toe aan uw website. De meeste gebruikers gebruiken een CMS, plaats dit bestand in de map met uw thema. U moet in eerste instantie het adres en de naam van dit bestand in de opmaak van uw formulier schrijven, die ik hierboven heb laten zien. Ik heb het volledige pad voor het voorbeeld opgeschreven, zodat het duidelijk is wat waar moet worden ingevoegd.
(
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" ] ) ) ( $name = $_POST [ "naam" ] ; if ($name == "" ) ( niet ingesteld ($naam ; ) ) if (isset ($_POST ["email" ] ) ) ( $email = $_POST [ "email" ] ; if ($email == "" ) ( niet ingesteld ($email ) ; ) ) if (isset ($_POST ["temma" ] ) ) ($temma = $_POST [ "temma" ] ; if ($temma == "" ) ( niet ingesteld ($temma ) ; ) ) if (isset ($_POST ["massage"] ) ) ($massage = $_POST ["massage"] ; if ($massage == "" ) ( niet ingesteld ($massage ) ; ) ) if (isset ($naam ) && isset ($e-mail ) && isset ($temma ) && isset ($massage ) ) ( $adres = " [e-mailadres beveiligd]" ; $mes = "Naam: $naam \nE-mail: $email \nOnderwerp: $temma \nTekst: $massage"; $verzenden = mail ($adres , $temma , $mes , "Inhoudstype:tekst/plain; tekenset = UTF-8\r\nVan:$email") ; als ($verzenden == "waar" ) (echo "Bericht verzonden"; } anders (echo "Oeps, er is iets misgegaan"; } anders echo "Vul alle velden in"; |
In plaats van url=http://site schrijft u het adres van uw site. $adres = " [e-mailadres beveiligd]"- in deze regel geven wij uw e-mailadres aan waarnaar brieven worden verzonden. Er hoeft verder niets te worden gewijzigd, alles is ingesteld en werkt. Als je problemen ondervindt tijdens het installatieproces, schrijf dan in de reacties, ik zal zeker antwoorden.
Feedback invoegen in WordPress
Het proces van het installeren van een formulier in WordPress is niet anders; alle stappen worden op dezelfde manier uitgevoerd. Het is raadzaam om het form.php-bestand te uploaden naar de map met uw thema. Vergeet niet het volledige en exacte adres van het handlerbestand in de html-opmaak aan te geven. Bovendien moet u het websiteadres naar uw website wijzigen en het e-mailadres correct schrijven. De voltooide formuliercode kan op elke pagina van uw blog worden ingevoegd. Als voorbeeld heb ik een pagina met wedstrijden aan mijn blog toegevoegd.
U kunt bijvoorbeeld een pagina 'Contact opnemen met de auteur' of 'Auteur' maken en uw formulier daar uploaden. Op sommige blogs zag ik onderaan elk formulier een rij knoppen voor sociale netwerken of extra opties om contact op te nemen met de auteur. Als u wilt, kunt u hetzelfde opnieuw doen. Het contactformulier werkt op mijn blog, ik heb het persoonlijk getest aan de hand van mijn eigen voorbeeld. Als de brieven u niet bereiken, is er een probleem aan uw kant.
WordPress-plug-ins
Als u problemen ondervindt bij het invoegen van dit soort feedback op uw site, kunt u een van de plug-ins zeggen en deze op uw site installeren. Tegenwoordig zijn er een groot aantal plug-ins die kunnen worden gebruikt om dergelijke formulieren voor een website te maken. Ga naar het beheerderspaneel, klik op Plug-ins - nieuwe toevoegen. We kiezen degene die u leuk vindt en gebruiken deze voor uw gezondheid. De plug-in Contact Form 7 is populairder.
- Snel veilig contactformulier.
- Contactformulier via Contact ME.
- FormCraft.
- Visuele formulierbouwer.
- nForms – WordPress-formulierbouwer.
- Zwaartekracht vormen.
We installeren ze allemaal om de beurt en bekijken ze elk afzonderlijk. Besteed onmiddellijk aandacht aan de functionaliteit van de plug-in en aan het verwijderen van externe links naar de website van de auteur (indien aanwezig). Al dergelijke vormen zien er in eerste instantie erg onaantrekkelijk uit, je kunt het aanpassen aan je smaak en kleur.
Laten we de eerste als voorbeeld nemen. We voegen een nieuwe plug-in Contact Form 7 toe. Deze plug-in is heel eenvoudig, er zouden geen problemen moeten zijn om ermee te werken. Veel bloggers gebruiken deze plug-in voor extra kleine formulieren op hun sites. Ga naar het Contact Formulier 7 item in de console aan de linkerkant en klik op “een nieuw formulier toevoegen”. De standaardtaal is al Russisch.
Selecteer op 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; voeg een naam, e-mailadres, onderwerp, bericht en een knop “verzenden” toe. Geef op het tabblad 'Brief' uw e-mailadres aan waarnaar berichten worden verzonden." U zou geen bijzondere problemen moeten hebben, alles is intuïtief.
Eenmaal gemaakt, biedt de plug-in u een korte shortcode die u bijvoorbeeld op de gewenste locatie op de site moet plakken. Nadat u de shortcode heeft ingevoerd, ziet u uw gloednieuwe formulier. Wanneer u een pagina maakt, gaat u naar het tabblad 'Tekst' en plakt u uw code.
Het kleine nadeel is dat je feedbackontwerp erg verschrikkelijk zal zijn. Wees niet te boos. Log in via ftp op dit adres wp-content/plugins/contact-form-7/modules. Deze map bevat alle CSS-stijlen van de plug-in. U kunt veilig uw eigen nieuwe eigenschappen toevoegen om uw formulier mooi en opvallend te maken.
Feedbackformuliergenerator
Naast extra plug-ins kunt u dergelijke formulieren gebruiken. Er zijn speciale services waarmee u snel en zonder speciale kennis een geheel nieuwe vorm kunt creëren. Er is een andere kant aan de medaille. Dergelijke diensten moeten ook worden gecontroleerd op functionaliteit en, belangrijker nog, op de kosten van dergelijk plezier. Sommige zijn gratis, maar er zijn ook betaalde opties. Schrijf de naam van een van hen in Yandex.
- vormontwerper;
- livetools.uiparade;
- Google-formulieren;
- iFormbuilder;
- fee.
Bij dergelijke online generatoren is het niet nodig om helemaal opnieuw code te schrijven, na te denken over fouten, enzovoort. Alles is al eerder gedaan. U hoeft alleen maar de velden voor het formulier te selecteren, een knop 'Verzenden' toe te voegen en alle benodigde gegevens in te voeren. Na al deze stappen biedt de service u een code die u in de sitepagina kunt invoegen. Kopieer de ontvangen code naar uw pagina en controleer de verbinding om te zien of deze werkt.
Tegenwoordig bestaat op iedere website een connectie met de eigenaar van een website, 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 website bezoekt en op elk moment live contact kan opnemen met de beheerder van de webwinkel.
Tegenwoordig zijn er een groot aantal vergelijkbare soorten diensten en ze staan niet allemaal stil. Bij elke update worden er nieuwe functies toegevoegd. Online consultants voegen veel functies toe aan uw online winkel voor eenvoudige communicatie met de klant. Laten we de livetex-service als voorbeeld nemen; het enige nadeel is waarschijnlijk de prijs. Een gebruiksperiode van drie maanden kost 4.200 roebel voor één winkel. Er is altijd de mogelijkheid om een proefperiode uit te proberen.
- Live communicatie met de klant.
- Leadgeneratoren.
- Verschillende widgets voor terugbellen.
- Onlinestatistieken.
- Online-monitoring.
Als je nog vragen hebt over het installeren van feedback op de site, stel ze dan in de reacties. Deel het artikel gerust op sociale netwerken.
Hallo beste lezers, vandaag wil ik jullie vertellen hoe ik formulieren maak om contactinformatie van gebruikers te verkrijgen.
Tegenwoordig maakt , deel uit van de structuur van de landingspagina. Dit is immers een van de manieren om een bestelling te accepteren of een catalogus van uw producten te versturen, nadat u eerder de e-mail van de bezoeker heeft ontvangen.
Een feedbackformulier maken - html-opmaak
Meestal heb ik drie velden nodig, en in de meeste gevallen gebruik ik deze opmaak om een contactformulier te maken:
Probeer deze code in uw browser te openen en kijk wat u krijgt. Afhankelijk van welke internetbrowser u gebruikt, zou deze er ongeveer zo uit moeten zien:
Als je vragen hebt over de markup, stel ze dan gerust in de reacties, ik zal proberen in detail te antwoorden, en ik zal niet elk element in het artikel beschrijven om de omvang ervan niet te vergroten. Bovendien zijn de elementen vrij eenvoudig.
Een feedbackformulier maken - css-opmaak
Laten we ons formulier vormgeven en leesbaar maken:
/* Formulierstijlen */ #application ( breedte: 475px; marge: 0 auto; ) /* Invoerveldstijlen */ #applicationName, #applicationEmail, #applicationTelephone ( breedte: 100%; hoogte: 73px; achtergrond: geen; marge - top: 25px; rand: 1px effen #fff; tekstuitlijning: midden; #applicationEmail:focus, #applicationTelephone:focus (rand: 1px effen #30ad64;) /*Tekststijlen weergegeven in tijdelijke aanduiding */ ::-webkit-input-placeholder ( kleur: #efefef; lettertypefamilie: "PT Sans", sans-serif; tekstschaduw: 0 1px 1px rgba(0, 0, 0, .3); ) : :-moz-placeholder ( kleur: #fff; lettertypefamilie: "PT Sans", sans-serif; tekstschaduw: 0 1px 1px rgba(0, 0, 0, .3); /* Firefox 19+ */ :-moz-placeholder ( kleur: #fff; lettertypefamilie: "PT Sans", sans-serif; tekstschaduw: 0 1px 1px rgba(0, 0, 0, .3); /* Firefox 18- */ :-ms-input-placeholder ( kleur: #fff; lettertypefamilie: "PT Sans", sans-serif; tekstschaduw: 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( kleur: #fff; tekst-schaduw: 0 1px 1px rgba(0, 0, 0, .3); ) /*Knopstijlen*/ .applicationButton ( marge-boven: 25px; achtergrond: #30ad64 ; rand: geen; hoogte: 73px; kleur: #fff; teksttransformatie: "PT Sans", schreefloos; cursor: .applicationButton:hover (achtergrond: #d68c18; )
Als u wilt dat de knopkleur soepel verandert, voegt u de volgende regel toe aan .applicationButton en .applicationButton:hover:
Overgang: 0,6s;
Waarbij.6s de animatietijd in milliseconden is.
Nu heeft ons formulier een mooie uitstraling gekregen, nu ziet het er zo uit:
Een feedbackformulier maken - php markup
Nu moeten we het application.php-bestand maken. Het ontvangt de ingevoerde parameters uit het formulier en stuurt deze per e-mail naar ons.
De structuur is als een gewoon HTML-bestand; het kan een pagina zijn waarop u schrijft: “Bedankt, uw aanvraag is geaccepteerd. Na verwerking van de aanvraag nemen onze managers contact met u op"
Dat wil zeggen dat wanneer de gebruiker op de knop klikt, hij wordt doorgestuurd naar de application.php-pagina. Dit is een volledige pagina en u moet deze dienovereenkomstig opmaken.
"; $msg.= "
Bericht van de site
\r\n"; $msg .= "Van:".$gebruikersnaam."
\r\n"; $msg .= "Mail:".$gebruikersmail."
\r\n"; $msg .= "Website:".$usertel."
\r\n"; $msg .= ""; // een bericht verzenden if(@mail($sendto, $subject, $msg, $headers)) ( echo "
Laten we de code een beetje uitleggen:
$verzenden = " [e-mailadres beveiligd]"; // mail waarnaar de brief wordt verzonden $username = $_POST["name"]; // sla de ontvangen gegevens uit het veld met de naam op in een variabele $usertel = $_POST["telefoon"]; / / sla de gegevens op in een variabele ontvangen uit het veld met een telefoonnummer $usermail = $_POST["email"] // sla de gegevens ontvangen uit het veld op met een e-mailadres in een variabele
Hier is het, denk ik, duidelijk.
Laten we nu de kop van de brief maken.
$subject = "Nieuw bericht"; $headers = "Van: " . strip_tags($usermail) . "\r\n"; $headers .= "Antwoord aan: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-versie: 1.0\r\n"; $headers .= "Inhoudstype: text/html;charset=utf-8 \r\n";
Lijn $subject = "Nieuw bericht";— is verantwoordelijk voor het onderwerp van de brief, kan daar schrijven: “Aanmelding vanaf de site” of wat u het beste uitkomt.
Ik stel voor om ervoor te zorgen dat de brief arriveert vanaf het adres dat is opgegeven in het invoertype = "email" veld. Dat wil zeggen, van degene waaruit de gebruiker is binnengekomen bij het invullen van het formulier. Om dit te doen, schrijven we de volgende regels:
$headers = "Van: " . strip_tags($usermail) . "\r\n";
Dat wil zeggen dat we gegevens uit de variabele $usermail zullen vervangen, waar de informatie uit het veld dat verantwoordelijk is voor het invoeren van het e-mailadres wordt opgeslagen.
Laten we nu het uiterlijk van de letter instellen. Je kunt het ontwerpen zoals je wilt, maar ik stel de volgende structuur voor:
$msg = "
"; $msg.= "Bericht van de site
\r\n"; $msg .= "Van:".$gebruikersnaam."
\r\n"; $msg .= "Mail:".$gebruikersmail."
\r\n"; $msg .= "Telefoon:".$usertel."
\r\n"; $msg .= "";
De eerste regel stelt het lettertype in. Ten tweede geven we een bericht weer, bijvoorbeeld: “Verzoek via het feedbackformulier op het eerste scherm.” De derde, vierde en vijfde regel verzenden gegevens uit het formulier. Ieder op een nieuwe regel.
Nu moet u een brief verzenden met behulp van de mailfunctie en bepalen wat er zal gebeuren als de brief succesvol en niet succesvol wordt verzonden:
If(@mail($sendto, $subject, $msg, $headers)) ( echo "
Ik heb het zo gemaakt dat in elk van de gevallen een afbeelding met de bijbehorende tekst wordt weergegeven. 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 door (automatische doorverwijzing) naar de hoofdpagina. Dit kun je doen door de volgende regel tussen de head-tags te plaatsen;
Dat wil zeggen dat de gebruiker na 4 seconden automatisch terugkeert naar de hoofdpagina!
Ik ben geen expert in PHP - het is een back-end programmeertaal. Ik ben mijn hele leven aangetrokken tot het leren van front-end. Oordeel dus niet hard. Ja, hier kun je controles uitvoeren voor het invullen van contactformulieren enzovoort, maar dit was voor mij altijd voldoende, dus als iemand een suggestie heeft over hoe deze code te verbeteren, schrijf dan in de reacties of per e-mail, ik zal de fout corrigeren les, bedankt!
Trouwens, als je een feedbackformulier nodig hebt zonder de pagina opnieuw te laden, dan kun je lezen hoe je het kunt installeren
Misschien begrijpen sommige mensen de stof niet zo goed, maar als je mijn stappen precies herhaalt, dan zal je contactformulier zeker werken. Als je vragen hebt, schrijf dan in de reacties, ik zal proberen te antwoorden! Tot ziens op de blog!
P.s. Omdat ik heel vaak vragen kreeg over waarom het formulier niet werkt en e-mails niet aankomen, heb ik besloten een aantal van de meest populaire redenen te beschrijven waarom dit kan gebeuren:
- U test het formulier niet op de server.
- Test het formulier op gratis hosting.
- Je test het formulier op betaalde hosting, maar wel tijdens de gratis proefperiode.
In deze gevallen worden er geen brieven naar uw e-mailadres verzonden.
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.
23/07/2014 12/07/2018
dimadv7