Kant-en-klare stijlen voor contactformulier 7. Tips, hacks, geheimen

Selecteer in de vervolgkeuzelijst het element 'Tekstveld'

Als een functie die u toevoegt vereist is, vink dan vakje 1 aan en vergeet niet dit in de beschrijving te schrijven.

U kunt aanvullende informatie aan het invoerveld toevoegen om het invullen van het formulier eenvoudiger te maken. Selectievakje 2 “Gebruiken als tijdelijke aanduiding?” en voer een hint in het veld ernaast in. Wanneer u dit veld op het formulier invult, verdwijnt de tooltiptekst. Volg daarna de aanwijzingen van de plug-in. Het resultaat zal een veld als dit zijn in het voltooide formulier:

Zorg ervoor dat u de code in het e-mailsjabloon plakt, anders worden de gegevens uit dit veld niet naar de e-mail verzonden! Dit geldt niet alleen voor tekstvelden, maar ook voor alle andere elementen.

E-mail

Wordt gebruikt om het mailboxadres van de afzender naar het formulier over te brengen

URL

Hiermee kunt u een websiteadres aan het formulier toevoegen.

Telefoonnummer

In dit veld kunnen alleen cijfers worden ingevoerd

Nummer (draaidoos)

Een veld waarin je de hoeveelheid van iets kunt instellen, bijvoorbeeld een product. De hoeveelheid wordt ingesteld met de pijlen omhoog/omlaag.

Datum

Voegt een kalender in het formulier in met de mogelijkheid om een ​​datum te selecteren. Wordt bijvoorbeeld gebruikt om hotelkamers te reserveren. Aankomstdatum, vertrekdatum.

Tekstveld

Ja, wees niet verrast :) Nog een tekstveld. Deze keer is dit veld groot en kun je er veel tekst in schrijven. Bijvoorbeeld recensies, opmerkingen.

Vervolgkeuzemenu

Wanneer er veel opties voor iets zijn en u een item uit een grote lijst moet selecteren, bijvoorbeeld een lijst met steden, straten, goederen.

De lijst moet in het veld Selectie worden geplaatst, waarbij elk item op een nieuwe regel wordt geplaatst.

Selectievakjes

Een selectievakje, of selectievakje in ontwikkelaarsjargon, is een element dat een veld creëert waarin een vinkje kan worden geplaatst. Dit veld heeft twee statussen: aangevinkt of uitgeschakeld. Meervoudige selectie mogelijk. Ze kunnen alleen op een rij worden gerangschikt als u het selectievakje 'Selecteer selectievakjes elkaar uitsluiten?' aanvinkt. dan kan slechts één parameter worden geselecteerd.

Keuzerondjes

Schakelaars (in jargon: keuzerondjes) worden gebruikt wanneer het nodig is om één enkele optie uit meerdere aangeboden opties te selecteren. Door het vakje “Eerst een label plaatsen en dan een vinkje?” aan te vinken De locatie van het label en het selectieveld verandert standaard eerst de selectie en vervolgens het label.

Aanvaarding

Bevestiging van iets. Laten we uitgaan van een akkoord om de hierboven beschreven voorwaarden te accepteren.

Vraag

Dit is de eerste verdedigingslinie tegen spam, de meest elementaire. Schrijf in de instellingen een vraag, misschien in cijfers, misschien in letters, of beide, en geef het juiste antwoord aan. Als het antwoord bij het invullen van het formulier juist is, wordt het formulier verzonden. Groen geeft aan welk deel van deze formule op de site wordt weergegeven vóór het antwoordinvoerveld, rood geeft het antwoord aan. Het juiste antwoord in de formule wordt na het teken | geschreven (verticale balk)

Voegt antispambescherming toe aan het formulier.

Om deze functie te laten werken, is een andere plug-in vereist. Download, installeer en activeer de plug-in.

U hoeft de instellingen niet te wijzigen, kopieer en plak gewoon 2 regels vóór de verzendknop.

Een bestand verzenden

U kunt een bestand bij het berichtverzendingsformulier voegen. In de instellingen kunt u de maximale grootte in bytes en toegestane formaten voor downloaden opgeven, bijvoorbeeld.jpg .tiff .doc

Knop Verzenden

Het formulier verzenden. In de instellingen, in het gedeelte "Snelkoppeling", kunt u de naam van de knop opgeven (Verzenden, antwoorden, verzenden :)

Het uiterlijk van Contactformulier 7 aanpassen

Omdat plug-ins de mogelijkheid hebben om te worden bijgewerkt, worden wijzigingen in het uiterlijk van het formulier aangebracht in het themastijlbestand style.css van de website

De code is verantwoordelijk voor het weergeven van het formulier, de velden en andere elementen:

Wpcf7 ( achtergrondkleur:#ddd; ) /*form achtergrondkleur */ .wpcf7 input, .wpcf7 textarea( opvulling:5px; kleur:#1D1D1D; lettertypefamilie: Arial, Helvetica, sans-serif; lettertypegrootte: 16px; lijnhoogte: 20px; rand: 1px effen #C7C7C7; inzet 2px 2px 8px #F9F9F9; alle 0,2s gemak; ; opvulling links: 0; marge links: 0; ) .wpcf7 select( overzicht: geen; lettergrootte: 16px; lettertypefamilie: Arial, Helvetica, sans-serif; ) .wpcf7 invoer: hover, .wpcf7 invoer :focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( achtergrond: #FDFDFD; overzicht: geen; )

Wat is wat?

.wpcf7 invoer, .wpcf7 tekstgebied — stijl van het invoerveld (tekstveld)

1. opvulling- stelt de inspringing in van de inhoud tot de rand van het element. Hier ziet u de inspringing vanaf de tekst die in het veld is ingevoerd tot aan de veldrand. Stelt de waarde in pixels Xpx in, waarbij X het aantal pixels is. Voorbeeld: opvulling: 5px 3px 6px 8px;
2. kleur- tekstkleur.
3. lettertype-familie- lettertype van de invoervelden.
4. lettergrootte- lettergrootte
5. lijn-hoogte- lijnhoogte
6. grens- kader rond het invoerveld
7. doos-schaduw- blokschaduw. inzet geeft aan dat de schaduw intern is. Als u een buitenschaduw wilt, slaat u deze waarde over. De tweede en derde waarde van 2px 2px geven respectievelijk de verplaatsing van de schaduw horizontaal en verticaal aan. De vierde waarde, 8px, stelt de vervagingsradius van de schaduw in. Vijfde - #F9F9F9 - schaduwkleur.

De knop Contactformulier 7 aanpassen

Meldingsstijl contactformulier 7

Het is verantwoordelijk voor foutmeldingen of succesvolle indieningsberichten

Wpcf7 .wpcf7-validation-errors(rand: geen; achtergrondkleur: #246416; kleur: #fff; marge: 0; opvulling: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; grensradius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok(rand: geen; achtergrondkleur: #7ad33f; marge: 0; vulling: 20px; -webkit-border-radius: 10px; -moz-border -radius: 10px; grensradius: 10px; -moz-border-radius: 10px; opvulling: 5px; opvulling-links: 5px; opvulling-rechts: 5px; /* Slagschaduw */ -webkit-box-schaduw: 3px 3px rgba(0,0,0,0.3) ; -schaduw: 3px 3px 3px rgba(0,0,0,0.3); vakschaduw: 3px 3px 3px rgba(0,0,0,0.3);

En nu, voor het gemak, de volledige code met commentaar:

Wpcf7 ( achtergrondkleur:#ddd; ) /*form achtergrondkleur */ .wpcf7 input, .wpcf7 textarea( /* Dit deel van de code is verantwoordelijk voor de stijl van invoervelden, tekstgebieden */ opvulling:5px; / * Stelt de opvulling in van het veldenelement vóór de inhoud ervan, u kunt elke waarde invoeren, bijvoorbeeld 10px */ color:#1D1D1D;* Tekstkleur in invoervelden */ font-family:Arial, Helvetica, sans-serif; * Tekstlettertype in invoervelden */ lettertype -grootte:16px; /* Tekstgrootte in invoervelden */ regelhoogte: 20px;* Hoogte van invoervelden */rand: 1px effen #C7C7C7; in pixels - de stijl van het frame, de derde is de kleur */ box-shadow: inzet 2px 2px 8px #F9F9F9; Schaduw van de invoervelden 2px - offset langs de x-as, 2px - offset langs de y-as , 8px - straal van schaduwvervaging, #F9F9F9 - schaduwkleur */ -webkit-overgang: allemaal 0,2s gemak; -moz-overgang: allemaal 0,2s gemak; ); item( opvulling-links: 0; marge-links: 0; marge-rechts: 25px; ) .wpcf7 .wpcf7-list-item input(rand: geen; opvulling-links: 0; marge-links: 0; ) .wpcf7 select( overzicht: geen; lettergrootte:16px; lettertypefamilie:Arial, Helvetica, sans-serif; ) .wpcf7 invoer: hover, .wpcf7 invoer:focus, .wpcf7 invoer:actief, .wpcf7 tekstgebied: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Dit onderdeel is verantwoordelijk voor de stijl van de invoervelden wanneer u er met de muis overheen beweegt */ achtergrond: #FDFDFD; /* De achtergrond van het invoerveld wanneer u beweegt er de muis overheen */ overzicht: geen; /* Buitenrand van het tekstinvoerveld */ ) .wpcf7 input.wpcf7-submit(/* Dit deel van de code is verantwoordelijk voor de stijl van de knop Verzenden in het venster. formulier */ -webkit-overgang: 0; -moz-overgang: 0; rand: geen; /* Rand rond de knop */ positie: relatief* teksttransformatie : hoofdletter; dat de tekst op de knop in hoofdletters wordt weergegeven) */ /* Rond de hoeken van de knop De waarden van de volgende drie eigenschappen moeten hetzelfde zijn, omdat ze hetzelfde zijn, alleen voor verschillende browsers */ -webkit-border-radius: 6px; /* Ronde hoeken voor Chrome */ -moz-border-radius: 6px; /* Ronde hoeken voor Mozilla FireFox */ border-radius: 6px; /* Ronde hoeken voor alle andere browsers, inclusief mobiele browsers */ font-size: 14px; /* Tekstgrootte knop */ lettertypegewicht: vet; /* Tekststijl (vet betekent vet) */ padding-top: 11px; /* Bovenste opvulling vanaf de rand van het element tot aan de inhoud ervan */ padding-bottom: 10px; /* Onderste opvulling vanaf de rand van het element tot aan de inhoud ervan */ padding-left: 35px; /* Linkervulling vanaf de rand van het element tot aan de inhoud */ padding-right: 35px; /* Inspringing naar rechts vanaf de rand van het element tot de inhoud ervan */ /* Achtergrondverloop - Achtergrondverloop van de knop */ achtergrondkleur: #000000; /* Achtergrondkleur van knop als het verloop niet door de browser wordt ondersteund */ /* In de volgende eigenschappen moeten de kleuren hetzelfde worden opgegeven, omdat ze hetzelfde zijn, alleen voor verschillende browsers. Laten we naar de eerste eigenschap kijken. Het gedeelte van(#676767), naar(#3B3B3B) betekent dat je een verloop moet weergeven, waarbij van kleur #676767) een overgang is naar kleur #3B3B3B */ achtergrond: -webkit-gradient(linear, left top, linksonder, van( #676767), tot(#3B3B3B)); achtergrond: -moz-lineair-gradiënt(boven, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Slagschaduw - Knopschaduw. De schaduwkleur wordt gespecificeerd in RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-schaduw: 0 2px 5px rgba(0,0,0,0.3); vakschaduw: 0 2px 5px rgba(0,0,0,0.3); ) /* Bij zweven - Stijl de knop wanneer u de muisaanwijzer beweegt. Alles is bijna hetzelfde als in het vorige blok */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; tekstversiering: geen; achtergrondkleur: #000000; achtergrond: -webkit-gradiënt(lineair, linksboven , linksonder, van(#246416), naar(#349622)); achtergrond: -moz-linear-gradient(top, #246416, #349622); ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Bij klikken - stijl van de knop wanneer u op klikt het is bijna hetzelfde als in het vorige blok */ .wpcf7 input.wpcf7-submit:active( top: 1px; kleur: #d8c6e2; /* Knoptekstkleur wanneer erop wordt geklikt */ achtergrondkleur: #000000; achtergrond: -webkit -gradient(lineair, linksboven, linksonder, van(#FF0000), naar(#246416)); #FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-schaduw: geen; -moz-box-schaduw: geen; doosschaduw: geen; ) /* CF7-berichten - Stijl van berichten over succesvol verzenden, fouten, enz. */ .wpcf7 .wpcf7-validation-errors( /* Berichtstijl voor validatiefouten */ border:none; /* Berichtblokframe */ achtergrondkleur:#246416; /* Achtergrond */ kleur:#fff; /* Tekstkleur */ marge:0; /* Buitenste opvulling */ opvulling:20px; /* Binnenste opvulling */ /* Afrondingshoeken voor verschillende browsers - de volgende 3 eigenschappen */ -webkit-border-radius: 10px; 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Stijl van succesvolle berichten */ border:none; /* Berichtblokframe */ achtergrondkleur:#7ad33f; /* Achtergrond * / marge:0; /* Buitenste opvulling */ opvulling:20px; /* Binnenste opvulling */ /* Afgeronde hoeken voor verschillende browsers - de volgende 3 eigenschappen */ -webkit-border-radius: 10px; border-radius: 10px ) .wpcf7 .wpcf7-mail-sent-ng( border:none; achtergrondkleur:#349622; marge:0; opvulling:20px; -webkit-border-radius: 10px; -moz-border- straal: 10px; grensradius: 10px; .wpcf7 span.wpcf7-niet-geldige-tip(rand: geen; achtergrondkleur: #349622; opvulling: 5px; opvulling links: 5px; opvulling rechts: 5px; grensradius: 10px; breedte: 290px; kleur: wit; /* Slagschaduw */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-schaduw: 3px 3px 3px rgba(0,0,0,0.3); vakschaduw: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( zwevend: links; ) .wpcf7-form .mright20( marge-rechts: 20px; ) .wpcf7-form .mright40( marge-rechts: 40px; ) .wpcf7-form .clear( helder: beide;

Dit materiaal beschrijft in detail de opzet van Contact Form 7, een plug-in voor zo'n populair platform voor het maken en promoten van sites op het World Wide Web als WordPress. Met deze softwaretool kunt u feedbackformulieren maken en configureren.

Een beetje over WordPress

Een van de populairste en meest wijdverspreide tools voor het ontwikkelen en vullen van informatiebronnen is WordPress. Aanvankelijk was dit softwareproduct gericht op het maken van eenvoudige blogs. Maar toen vulden gespecialiseerde specialisten de functionaliteit aan, waardoor het mogelijk werd om met dit contentmanagementsysteem andere internetbronnen te creëren.

Sterke en zwakke punten van dit platform voor het maken en promoten van websites

De voordelen van dit softwareplatform zijn:

Eenvoud en open source-code.

Een indrukwekkende hoeveelheid referentie-informatie.

Het vermogen om in de kortst mogelijke tijd elke thematische bron op internet te ontwikkelen.

Hoge prestaties zonder extra software-add-ons (plug-ins).

Maar de nadelen in dit geval zijn de volgende:

Websites die op WordPress zijn gebouwd, kunnen geen zware lasten aan.

Er is een afname van de snelheid van de internetbron bij het installeren van extra miniprogramma's of, zoals ze ook wel plug-ins worden genoemd.

en waarom hebben sites die op het WordPress-platform zijn gebaseerd deze nodig?

De basisfunctionaliteit van een contentmanagementsysteem als WordPress is zeer bescheiden. Het is alleen voldoende om de meest eenvoudige blogs en websites te ontwikkelen. Om de situatie met de functionaliteit van het softwareplatform op de een of andere manier te verbeteren en er flexibiliteit aan toe te voegen, moeten ontwikkelaars speciale miniprogramma's installeren, die in vakjargon plug-ins worden genoemd. Eén daarvan is Contactformulier 7. Door de plug-in in te stellen, kunt u een feedbackformulier maken met een uitgebreid functionaliteitsniveau op een specifieke pagina van het contentmanagementsysteem.

Specialisatie "Contactformulieren 7"

Zoals eerder opgemerkt, is het creëren van feedback tussen de bezoeker en de beheerder van een internetbron op basis van het WordPress-platform de hoofdtaak van Contact Form 7. Het instellen van e-mail, het bewerken van een sjabloon, het verzenden van verschillende bestanden is geen volledige lijst van de mogelijkheden die dit biedt een miniprogramma. In dit geval zal de belasting van de hardwarebronnen van de site relatief klein zijn en zal de aanwezigheid ervan niet leiden tot een significante afname van de prestaties van de site of blog.

Installatieprocedure voor plug-ins

Er zijn drie manieren om plug-ins op het WordPress-platform te installeren:

Door een ZIP-archief van het World Wide Web te downloaden en dit naar de juiste map van de internetbron te “uploaden”.

Gebruik van verschillende soorten FTP-clients.

De veiligste van de drie opties voor het installeren van plug-ins is de laatste. In dit geval wordt de programmacode gedownload van de officiële website en bevat deze zeker geen verschillende soorten kwaadaardige, gevaarlijke fragmenten. De procedure voor het installeren van de plug-in is in dit geval als volgt:

Ga naar het WordPress-beheerderspaneel.

Vervolgens moet u naar het gedeelte 'Plug-ins' gaan.

In het geopende venster selecteert u ‘Nieuwe toevoegen’.

Voer in de zoekbalk de naam van de plug-in in - Contact Form 7 - en beweeg vervolgens de muisaanwijzer over de knop "Zoeken" en klik één keer. Hierna begint de zoekactie naar de benodigde software.

Na voltooiing wordt een lijst met gevonden plug-ins weergegeven. In deze lijst vinden we degene die we nodig hebben en klikken op de knop met het label "Installeren", die er tegenover staat.

Hierna zal het contentmanagementsysteem deze plug-in automatisch downloaden en installeren.

De volgende stap is het activeren van de geïnstalleerde software. Om dit te doen, gaat u naar het tabblad “Plug-ins” en zoekt u Contact Form7 in de lijst. Ernaast staat het opschrift: “Activeren”, klik er één keer op met de muis.

We updaten het administratieve paneel van het contentmanagementsysteem en vinden Contact Form7 tussen de items. Dit is de voorwaarde voor een succesvolle installatie van deze populaire en functionele plug-in.



Configuratie-algoritme voor “Contactformulieren 7”

Het instellen van Contactformulier 7 bestaat uit de volgende items:

Een nieuw formulier maken of een oud formulier bewerken dat is gemaakt tijdens het installeren van de plug-in. De ervaring leert dat het in de meeste gevallen beter is om gebruik te maken van de mogelijkheid om een ​​nieuw formulier aan te maken.

Selecteer in de volgende fase de taal van het formulier en stel de naam in.

Vervolgens moet u indien nodig de sjabloon opnieuw configureren.

Sla de aangebrachte wijzigingen op.

We maken een nieuwe pagina aan met de eerder ontvangen code.

In de laatste fase moet u naar de website gaan en de juiste werking van het gemaakte internetbroninterface-element controleren.

Maak een nieuw formulier

Onmiddellijk na activering creëert deze plug-in een standaardformulier voor het stellen van vragen aan site- of blogbezoekers. Uiteraard kan het indien nodig worden bewerkt en aangepast. Maar het zal veel gemakkelijker zijn om deze te verwijderen en een nieuwe te maken met een volledige set van alle noodzakelijke functionaliteit. Om dit te doen, moet u het volgende doen:

Ga naar het menu van deze plug-in en selecteer “Formulieren”.

In het venster dat hierna wordt geopend, moet u het vakje naast het item “Contactformulier1” aanvinken.

Selecteer vervolgens daarboven in de vervolgkeuzelijst ‘Acties’ de optie ‘Verwijderen’.

Als antwoord verschijnt er een vraag om de uitgevoerde acties te bevestigen. U moet het verwijderen van het formulier bevestigen en op de knop “Ja” klikken.

Selecteer vervolgens het menu-item: “Nieuw maken” in het beheerderspaneel “Wordpress” “Contact Form7”.

In het geopende venster selecteert u in de vervolgkeuzelijst de interfacetaal van het toekomstige formulier - "Russisch". Klik vervolgens op de knop ‘Aanmaken’.

Hierna wordt standaard de initiële code voor het nieuwe feedbackformulier voor WordPress gegenereerd. Hierna moet u bewerkingen uitvoeren zoals het instellen van Contactformulier 7.

Stel de naam van het formulier in

Nadat u alle voorgaande stappen heeft doorlopen, verschijnt er een venster waarin u de naam van het nieuwe formulier in Contact Form 7 Style kunt invoeren. Het instellen hiervan begint met deze eenvoudige handeling aan de ene kant. Maar het is beter om de naam van het formulier te geven op basis van zoekmachineoptimalisatie. Daarom is de meest optimale optie in dit geval bijvoorbeeld 'Feedbackformulier' of 'Stel een vraag aan de sitebeheerder'. Zodra we de naam van dit interface-element hebben bepaald, typen we deze in het overeenkomstige veld van het verzoekvenster.



Het bewerken van de sjabloon “Contactformulieren 7”.

In hetzelfde venster met de naam van het gemaakte formulier bevinden zich 4 tabbladen. De eerste is "Sjabloon". Standaard worden hier slechts 5 elementen gevormd:

Plaats waar u de naam van de bezoeker van de internetbron kunt typen.

Veld voor het invoeren van het e-mailadres van de bezoeker die de vraag heeft gesteld.

In een ander veld kunt u het onderwerp van de vraag invoeren.

Het laatste element van het formulier is standaard een knop met het label ‘Verzenden’.

Indien nodig kan de tekst in dit veld worden bewerkt en kunnen andere interface-elementen worden toegevoegd. Om dit te doen, selecteert u gewoon de code van een tekstelement (bijvoorbeeld dat deel van de code waar het onderwerp van het bericht wordt aangegeven) en kopieert u deze via het contextmenu naar hetzelfde veld op een andere plaats. Aan de rechterkant zijn er parameters (dit wordt in detail besproken in de volgende paragraaf) waarin u het element selecteert waarin u geïnteresseerd bent. Daarna verschijnt de vereiste code naast de vervolgkeuzelijst. Kopieer vervolgens deze code en voer de naam van het element in in plaats van de code van het bericht.

Veldlengtes instellen en meer

Op dezelfde plaats kunt u de invoer in Contactformulier 7 wijzigen. Het aanpassen van de breedte van een eventueel tekstveld gaat als volgt:

Het is bijvoorbeeld nodig om het aantal tekens in de naam van een bezoeker van een internetbron te verhogen tot 55. Standaard zijn er 40.

Voeg hiervoor de cijfers 60/55 toe aan het einde van de code. Het resultaat is de code. Na het opslaan van de wijzigingen zal de lengte van dit veld 60 zijn en het maximale aantal tekens dat erin kan worden ingevoerd 55.

U kunt het formaat van het berichttekstveld op dezelfde manier wijzigen. Alleen in dit geval is het nodig om de code van dit element als volgt te wijzigen. In dit geval is 40 het aantal letters op één regel en 30 het totale aantal termen in dit interface-element in Contactformulier 7. Het instellen van het uiterlijk van het formulier zelf gebeurt nauwkeurig door de parameterwaarden van elk te selecteren individueel onderdeel. Daarom wordt aanbevolen om specifieke waarden op te geven voor elke parameter die in deze sectie wordt gegeven in de code van elk element.



Andere formuliertabbladen

Zoals opgemerkt, heet het eerste tabblad “Formuliersjabloon”. De volgende in dit venster is “Letter”. Het specificeert de parameters van de locatie waarnaar e-mail vanaf deze internetbron wordt verzonden. Op het tabblad “Melding” wordt de tekst van het bericht gegenereerd, die wordt weergegeven als de brief succesvol is verzonden. Ook bestaat de mogelijkheid om een ​​bericht op te stellen voor het geval u de sitebeheerder niet op de juiste manier kunt bereiken. Het laatste tabblad in Contactformulier 7 is “Geavanceerde instellingen”. Het bevat de parameters die in de praktijk zeer, zeer zelden worden gebruikt. U kunt het bijvoorbeeld gebruiken om het bijhouden van door de gebruiker ingevoerde tekst in te stellen met behulp van Yandex-statistieken.

Velden die met deze plug-in aan dit formulier kunnen worden toegevoegd

Door Contact Form 7 voor Wordpress in te stellen, kunt u de volgende interface-elementen toevoegen aan het feedbackformulier:

• Een testveld is een universeel interface-element waarin u een willekeurige reeks tekens kunt invoeren.

  E-mail - plaats waar u de naam van de elektronische mailbox kunt invoeren.

  URL - veld voor het invoeren van het adres van een internetpagina.

  Telefoonnummer: hiermee kunt u een telefoonnummer in internationaal formaat invoeren.

  Met het element “Nummer (spinbox)” kunt u een invoerveld maken voor elke gehele waarde (bijvoorbeeld de leeftijd van de bezoeker).

  Het element “Getal (Slider)” voegt een schuifregelaar toe aan het formulier waarmee u een numerieke waarde uit een opgegeven bereik kunt selecteren.

  Het item “Datum” creëert een speciaal invoerveld waarin u de gewenste datum kunt opgeven. Wanneer u dit interface-element activeert, verschijnt onderaan een kalender waarin u direct de gewenste datum kunt selecteren.

  Het vervolgkeuzemenu-item 'Tekstveld' is op zijn beurt bedoeld voor het typen van het tekstgedeelte van de e-mail.

  Met het volgende item - "Vervolgkeuzemenu" - kunt u de gewenste parameter uit een vaste lijst selecteren.

  Maar “CheckBoxes” is bedoeld voor het selecteren van een of meer waarden uit een bepaalde lijst.

  Het interface-element “Radioknoppen” is vrijwel identiek aan het vorige. Het enige verschil is dat u in dit geval slechts één juiste optie kunt selecteren, terwijl “CheckBoxes” meerdere correcte waarden kunnen hebben.

  Met het item “Acceptatie” kunt u slechts één selectievakje toevoegen aan het gemaakte formulier. In de regel wordt het gebruikt om kennis te maken met eventuele voorwaarden en zonder deze te accepteren is het in de toekomst niet meer mogelijk om een ​​e-mail te sturen.

  Met het item "Menu" kunt u een speciaal gedeelte in de interface maken dat uw mailbox tegen spam beschermt. In dit geval moet u het juiste antwoord op de vraag opgeven voordat u het verzendt.

  De tweede beveiligingsoptie is CAPTCHA. Wanneer u dit selecteert, wordt een apart gedeelte aan het formulier toegevoegd, waarin een afbeelding met symbolen wordt weergegeven en een extra veld waarin u deze kunt invoeren.

  Het volgende item is “Een bestand verzenden”. Hiermee kunt u een bestand met verschillende soorten uitleg en commentaar toevoegen aan de tekst van de brief voor de bronbeheerder.

  Met het laatste item - "Verzendknop" - kunt u een bijbehorend interface-element toevoegen.

Sla de aangebrachte wijzigingen op

Zodra de vereiste waarden zijn ingesteld en het formulier correct is geconfigureerd, moet u alles opslaan. Om dit te doen, gaat u in het venster voor het bewerken van de plug-in naar het bovenste gedeelte. Er zou hier een knop "Opslaan" moeten zijn. Richt de manipulatoraanwijzer erop en klik er één keer op. Als reactie verschijnt de formuliercode, die we selecteren met dezelfde muisaanwijzer en kopiëren. Ga vervolgens naar het item “Pagina’s” in het beheerderspaneel van het contentmanagementsysteem. Vervolgens maken we een nieuwe pagina met de vereiste naam (bijvoorbeeld 'feedback', 'Contacten' of 'Stel een vraag aan de bronbeheerder'). Vervolgens verplaatsen we de kiescursor naar het invoerveld voor de code. In dit geval moet u de codetypmodus in het parameterpaneel naar “Tekst” schakelen. Voer daarna de eerder ontvangen formuliercode in. Zoek vervolgens aan de rechterkant van de interface de knop 'Publiceren' en beweeg uw muis erover. Klik in de volgende fase één keer met de linkermuisknop op dit element van de interface van het contentmanagementsysteem.



Het resultaat controleren

Na het uitvoeren van de eerder aangegeven manipulaties moet een nieuwe pagina worden toegevoegd aan de interface van de internetbron, waarop de elementen gespecificeerd in Contactformulier 7 worden weergegeven. De interface-instellingen zijn in principe voltooid. U hoeft alleen maar te controleren of de software correct is geconfigureerd. Om dit te doen, moet je naar de hoofdpagina van de site, blog of portal gaan. Vervolgens vinden we in de lijst met pagina's degene waarop het feedbackformulier is geplaatst. We gaan erheen, voeren de juiste parameters in alle velden in één keer in en sturen een testbrief naar onszelf. Als reactie hierop zou een informatiebericht moeten verschijnen dat de succesvolle voltooiing van deze bewerking aangeeft. Vervolgens proberen we nog een brief met lege velden te sturen. Hierna zou er een bericht moeten verschijnen waarin staat dat u alle geselecteerde formulierparameters moet instellen. Als in beide gevallen de eerder aangegeven resultaten zijn behaald, functioneert het aangemaakte feedbackformulier correct.

Voor- en nadelen van de plug-in. Alternatieve opties

Een uitstekende oplossing voor een beginnende ontwikkelaar om een ​​feedbackformulier te maken is het miniprogramma Contact Form 7. Het instellen van het verzenden van e-mail, het maken van interface-elementen en andere belangrijke interface-elementen is in dit geval grotendeels geautomatiseerd en vereist minimale gebruikerskennis. Daarom is dit voor een eenvoudige internetbron op instapniveau met een beginnende beheerder een uitstekende oplossing. Maar elke plug-in is een extra belasting van de bronnen van de website, waardoor de prestaties afnemen. Als gevolg hiervan raden meer gevorderde gebruikers aan om af te stappen van een dergelijke eenvoudige manier om een ​​feedbackformulier te maken. Je kunt het ook zelf maken met HTML, CSS en JS, zij het met een lager functionaliteitsniveau. Dit zal de behoefte aan computerbronnen op de site verminderen en het prestatieniveau aanzienlijk verhogen.



Resultaten

Dit artikel beschrijft stap voor stap hoe u Contact Form 7 configureert. Deze plug-in heeft echt een hoog functionaliteitsniveau; u kunt er elk feedbackformulier mee maken. Aan de andere kant verhoogt het gebruik van een extra plug-in als onderdeel van een contentmanagementsysteem de belasting van de hardware van de site. Daarom wordt aanbevolen dat beginnende sitebeheerders die op dit contentmanagementsysteem zijn gebaseerd, deze plug-in voor dergelijke doeleinden gebruiken. Welnu, meer gevorderde gebruikers kunnen zonder Contact Form 7. In dit geval is het instellen van de plug-in absoluut niet nodig.

De populaire plug-in Contactformulier 7 is in zijn standaardvorm niet bijzonder mooi, dus voor veel gebruikers rijst de vraag hoe ze het uiterlijk kunnen veranderen. Dit is precies wat we nu gaan doen, ik zal proberen u een universele optie te geven die geschikt is voor elke site.

Ik heb hier al eerder over gesproken, maar laten we er nu niet over praten, maar laten we meteen verder gaan met de noodzakelijke ontwerpwijzigingen.

Ten eerste hebben we een style.css-bestand nodig, dit is te vinden op het tabblad “Uiterlijk” / “Editor”. Standaard wordt het bestand dat u nodig hebt geopend. Ik raad aan om verschillende tabbladen in uw browser te openen:

1. Tabblad Contactformulier 7 voor het bewerken van het formulier.
2. Een pagina op de website met een feedbackformulier.
3. Een editor met een open CSS-bestand.

Tabbladen zijn geopend, laten we beginnen met het aanbrengen van wijzigingen. Eerst zullen we ons formulier een beetje aanpassen.

Klassen toevoegen aan contactformulier 7.

Wanneer we het formulier openen om te bewerken, zien we zoiets als de volgende afbeelding:

Dit feedbackformulier ziet er ongeveer zo uit:

Het is saai, buiten proporties en eerlijk gezegd niet mooi.

Om het uiterlijk van het formulier te veranderen moeten we wat stijlwerk doen, maar eerst zullen we een paar klassen aan de formuliersjabloon toevoegen. Om dit te doen, opent u het formulier voor bewerking (zoals in de afbeelding hierboven) en voegt u de volgende klassen toe:

Er valt weinig te schrijven, dus het is moeilijk om fouten te maken. Je hebt waarschijnlijk online advies gevonden zonder lessen te gebruiken of toe te voegen. Het punt is dat er zonder het toevoegen van klassen verschillende problemen kunnen ontstaan. Als u bijvoorbeeld meerdere formulieren tegelijk aan de site wilt toevoegen, hebben ze allemaal een identieke vorm, en dit is niet altijd handig, dus u moet de optie gebruiken die ik heb voorgesteld.

De klassen zijn toegevoegd, er is nog niets veranderd, de volgende stap is het bepalen van de id van het formulier.

Bepaal de ID van het formulier op de pagina.

Eerst moet u begrijpen dat hetzelfde formulier verschillende ID's zal hebben op verschillende pagina's van de site. Dit is hoe de plug-in is ontworpen: elke keer dat het formulier wordt aangeroepen, wordt een extra parameter toegevoegd. Laten we het nu eens nader bekijken.

Om het formulier te bewerken, moet u het aan de pagina toevoegen of op de gewenste plaats posten, dat wil zeggen door de shortcode in te voegen. Ga daarna naar deze pagina en klik met de rechtermuisknop op het formulier en selecteer “Code bekijken” dit is voor de Chrome browser, heb je een andere, dan staat er ongeveer dezelfde tekst.

In de code die wordt geopend, zoeken we naar het begin van ons formulier, het ziet er als volgt uit:

Dit zal de formulier-ID zijn. Als ik terugga, laat ik je zien welke ID hetzelfde formulier op een andere pagina heeft.

Zoals u kunt zien, verschilt de identificatie slechts in een paar cijfers. Daarom moet u eerst beslissen op welke pagina het formulier zich zal bevinden, en pas dan beginnen met het bewerken van de stijlen.

Welnu, de volgende stap is gezet, we hebben de id gedefinieerd, onze klassen geregistreerd, laten we nu direct doorgaan met het veranderen van het uiterlijk.

Styling Contactformulier 7, werkend met het style.css bestand

Vooruitkijkend zal ik zeggen dat de optie die ik heb voorgesteld u waarschijnlijk niet ideaal lijkt. Het is een feit dat iedereen die deze regels leest, hun vorm precies wil zien zoals zij zich die voorstellen. Ik ben geen telepaat en ik zal niet iedereen tevreden kunnen stellen, maar ik zal proberen je een tip te geven over waar en waar je informatie kunt zoeken en wat je kunt veranderen. Dus vergeef me onmiddellijk voor mogelijke teleurstellingen, er is geen wondermiddel, je zult een beetje moeten werken.

Wijzig de achtergrondkleur, inspringingen en het lettertype van het formulier.

Nadat het werk is gedaan, gaan we verder met stijlen. Laten we eerst (indien nodig) de achtergrondkleur van het formulier wijzigen, onze inspringingen aanpassen en het gewenste lettertype en de tekstkleur selecteren. Al deze instellingen voeren wij van tevoren uit, waarbij we de ID kennen. We hebben hierboven besproken hoe je het kunt herkennen.

Laten we eerst naar het style.css-bestand gaan, de eerste regels voor de formulier-ID toevoegen (je moet deze helemaal onderaan het bestand toevoegen), in mijn geval is het wpcf7-f172-p34-o1, je moet vervang uw identiteitsbewijs:

#wpcf7-f172-p34-o1 (
marge: 5px;
opvulling: 10px;
achtergrond: #B3AFAF;
lettertypefamilie: Georgia, “Times New Roman”, Times, serif;
kleur: #000;
}

Laten we nu alles in meer detail bekijken:

1. Laten we eerst de streepjes behandelen. Externe opvulling (vanaf de rand tot het begin van het formulier) - marge: 5px, interne opvulling (vanaf het begin van het formulier tot de interne elementen) - opvulling: 10px.
2. De vulling van het formulier of de achtergrond ervan wordt bepaald door de achtergrondeigenschap: #B3AFAF. U kunt elke gewenste kleur selecteren door simpelweg de waarde te vervangen.
3. Wij beslissen over de lettertypefamilie; als u deze niet wilt wijzigen, kunt u deze regel overslaan (lettertypefamilie: Georgia, “Times New Roman”, Times, serif).
4. De kleur van de tekst wordt bepaald door de kleureigenschap, die momenteel is ingesteld op zwart (kleur: #000).

U kunt zelf met deze parameters experimenteren en inspringingen, kleuren en lettertypen selecteren. Om dit te doen, hoeft u alleen maar de waarde te wijzigen, de nieuwe optie op te slaan, de pagina te vernieuwen en de wijzigingen te bekijken. Wees niet bang om te experimenteren, in extreme gevallen kun je hier niets kapot maken, de stijlen werken gewoon niet en je kunt alles gemakkelijk repareren zoals het was.

We bepalen de inspringingen tussen de velden en veranderen het frame.

Laten we verder gaan met onze velden en streepjes toevoegen:

#wpcf7-f172-p34-o1 p(
marge:5px;
}

Dit zijn inkepingen langs de randen van de velden zodat de tekst en blokken niet samenvloeien tot één geheel.

De volgende fase zijn de frames, ik zal mijn versie geven, en je kunt online veel opties vinden die je leuk vindt en deze vervangen.

#wpcf7-f172-p34-o1 invoer,tekstgebied (
rand: 3px dubbel #000;
}

Nog even over het raamwerk. Een waarde van 3px is de breedte van het frame, double wordt twee keer gebruikt (indien niet nodig, kun je dit woord verwijderen), #000 de kleur van het frame, je kunt ook je eigen kleur kiezen.

Wijzig de breedte van de velden en hun locatie.

Naam-cf (
zweven:links;
opvulling: 2px;
}
.name-cf invoer (
breedte: 270px;
}
.thems-cf invoer (
breedte: 100%;
}
.clear-cf (
duidelijk: beide;
}
.text-cf tekstgebied (
breedte: 100%;
}

Laten we nu alles in meer detail bekijken:

1. De eerste klasse waar we naar toe gaan naam-cf het behoort tot de velden met naam en e-mailadres. Voor hen stellen we een marge van 2px in ( opvulling: 2px) en stroom ( zweven: links) om twee velden in één rij uit te lijnen.
2. Vervolgens passen we de breedte van de velden aan door ze in te stellen op de optimale (voor mijn sjabloon) grootte van 270px ( .name-cf invoer (breedte: 270px;)). Als uw marges nog steeds één regel zijn of het formaat te klein is, kiest u uw eigen optie.
3. We zullen ervoor zorgen dat het veld met de naam van het thema de gehele breedte van het formulier vult, omdat daar mogelijk meer tekst staat (.thems-cf invoer (breedte: 100%;)). Als u er zelf een wilt, geef dan de exacte waarde in pixels aan.
4. Het volgende blok dat we aan het formulier hebben toegevoegd, is ontworpen om de stroom te annuleren ( .thems-cf invoer (breedte: 100%; )).
5. Net als in het vorige geval maken we het veld met de berichttekst over de volledige breedte ( tekst-cf tekstgebied (breedte: 100%;)).

U kunt het stijlbestand bijwerken en de wijzigingen bekijken. Indien nodig kunt u de formaten aanpassen aan uw behoeften.

Lijn de knop "Verzenden" uit in het midden, wijzig de achtergrond en breedte.

Laten we naar onze knop gaan, deze in het midden uitlijnen en een achtergrond toevoegen:

Indienen-cf (
breedte: 200px; /*blokbreedte*/
hoogte: 25px; /*hoogte*/
marge: 0 automatisch; /* Linker- en rechteropvulling */
}
.submit-cf-invoer (
breedte: 200px;
achtergrond:#96B195;
}

Traditioneel leg ik uit wat wat is:

1. De eerste regel is om de breedte en hoogte van het blok waarin de knop wordt geplaatst te bepalen en deze in het midden van het formulier te plaatsen.
2. De tweede regel is om de achtergrondkleur van de knop in te stellen ( achtergrond:#96B195, als u niet opgeeft dat deze dezelfde kleur heeft als alle andere velden), stelt u de breedte van de knop in ( breedte: 200px(het is wenselijk dat deze even groot is als de breedte van het blok, zodat de knop niet naar de zijkanten beweegt).

We slaan onze instellingen op en zien wat we hebben:

Ik ben het ermee eens dat het verre van chic is, maar het ziet er over het algemeen voldoende uit. Hieronder staat de standaardvorm, ik denk dat het effect duidelijk is. Hoe dan ook, we hebben ervan geleerd verander het uiterlijk van Contactformulier 7.

Ik hoop dat het artikel nuttig voor je was, maar als er iets mis is of als je problemen hebt, laat dan een reactie achter en ik zal proberen te antwoorden (correct).