Contactformulier 7 is een plug-in WordPress ongelooflijk populair voor het maken van contactformulieren. Hiermee kunt u formulieren maken zonder HTML-codering. deze vormen kan functies bieden zoals de CAPTCHA, bestanden downloaden, onderzoeksvelden etc ...

Hoewel het standaardcontactformulier 7-stijl voldoende is voor de meeste basiscontactformulieren, moet u dit vaak wijzigen.

Hiermee wordt de standaardformulierstructuur gewijzigd om deze toegankelijker te maken. Hij voegt ook de shortcodes [responsive] boven het formulier, zodat als er een fout optreedt bij het verzenden van het formulier, dit op het formulier wordt aangegeven.

Als je nog nooit een WordPress-website hebt gemaakt, kom erachter Hoe een WordPress-blog met een FTP-client te installeren

Voor het standaardformulier is de code die door de plug-in wordt gegenereerd:

[antwoord] Uw naam (verplicht) [tekst * uw-naam-id: uw-naam] Uw e-mail (verplicht) [e-mail * uw-e-mail-id: uw-e-mail] Uw onderwerp [tekst uw-onderwerp-id: uw-onderwerp] Uw bericht [textarea your-message id: your-message] [submit "Send"]

Enkele plugins om het contactformulier 7 aan te passen

1. Contactformulier 7-stijl

de plugin Contactformulier 7-stijl heeft een aantal stijlen om uit te kiezen.

Voor gebruikers van het thema Twenty Fifteen is er ook een compatibele stijl.

Ga naar 'om een ​​stijl toe te passen' Contactstijlen> Snel bewerken Vink het formulier aan waarin u de stijl wilt toepassen en klik vervolgens op ' bijwerken .

2. Contactformulier 7 Skins

Om Skins te gebruiken Contact Formulier 7, maak een nieuwe aan Contact formulier en scrol omlaag op de pagina naar het gedeelte Skins. U kunt een sjabloon en stijl voor uw formulier kiezen.

U vindt modellen gewijd aan de vormen vanevenementen, registratie en kennisgeving.

Zo ziet het enquêteformulier eruit met de Topaz-stijl met het thema Twenty Fifteen.

3. Materiaalontwerp voor contactformulier

Deze stijlen zijn gebaseerd op de stijl van materiaal ontwerp.

Deze plug-in stelt voor dat u het standaardformulier verwijdert en de shortcodes ervan gebruikt.

Hier is een voorbeeld met het Hestia-thema. Let op het zwevende label wanneer de aanwijzer naar een veld op het formulier wordt verplaatst.

Contactformulier 7 test op sommige WordPress-thema's

Contactformulier met ColorMag WordPress-thema

Meestal ervaart Contactformulier 7 de stijl van uw WordPress-thema. Dit is het geval met het thema Koraal Donker.

Contactformulier met het WordPress ColorMag-thema

Hier is de vorm zonder aangepaste stijl. Hij neemt de kleur van de blauwe knop over ColorMag WordPress-thema.

Ik begon met het uploaden van een foto om als achtergrondafbeelding voor het formulier te gebruiken en de code van de labels van het formulier te veranderen van grijs in wit met een blauwe schaduw op de tekst.

De volgende wijzigingen waren om de marges tussen formulierlabels en formuliervelden te vergroten, de aftrekknop te wijzigen en een rand toe te voegen wanneer de aanwijzer velden op het formulier invoert.

De weergave van fout- / succesberichten wanneer het formulier wordt verzonden, moet ook worden gewijzigd zodat ze correct worden weergegeven.

De GIF die roteerde toen het formulier werd ingediend, werd niet correct weergegeven, ik vond een alternatief voor Loading.io en verwees ernaar met CSS.

Hier is de resulterende vorm:

Hier is de code:

div.wpcf7 {margin: 0; opvulling: 1.5em; achtergrond: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; } .wpcf7 label, .wpcf7-submit {color: white; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; text-align: center; breedte: 92.5%; marge: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; weergave: inline-block; breedte: auto; opvulling: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); breedte: 50px; hoogte: 50px; }

Als u de code niet hoeft te krabbelen, raden we u aan onze 10 WordPress-plug-ins om een ​​contactformulier op uw blog te maken

Ontdek ook 3 premium-alternatieven waarmee u uw contactformulieren kunt maken. 

1. Contactformulier W8

W8 Contact Form is een van de plug-ins van Contact formulier het meest populair op WordPress. Het biedt veel functies, zoals indiening bij meerdere ontvangers, ondersteuning voor animaties, onbeperkte formuliercreatie, verschillende stijlen en een breed scala aan aanvullende aanpassingsopties.

Bovendien biedt het uw website of blog een professioneel systeem om gemakkelijker in contact te komen met uw klanten. U kunt al uw formulieren aanpassen aan uw behoeften en uw smaak.

Downloaden | demonstratie | web hosting

2. Neem contact met ons op Formulier

Contactformulier is een responsieve WordPress-plug-in en een eenvoudige tool, maar rijk aan aanpassingsopties waarmee u een duidelijk en bemoedigend formulier kunt weergeven waarop uw bezoekers contact met u kunnen opnemen door hun bericht achter te laten.

U kunt de benodigde velden definiëren, de beste lay-out van de velden kiezen en deze volledig aanpassen om uw klanten of bezoekers aan te moedigen hun suggesties of berichten achter te laten.

Stel gewoon het e-mailadres in waar u de berichten wilt ontvangen en gebruik dit om uw bedrijf in de meest winstgevende richting te laten groeien.

Downloaden | demonstratie | web hosting

3. Slick Popup Pro

Slick Popup Pro is een WordPress-plug-in vrij eenvoudig en lichtgewicht dat elke vorm die door de plug-in is gemaakt, converteert Contact Formulier 7 in een pop-up. Ze gebruikt het formulier en zet het om in een mooie en perfect reagerende pop-up.

Het pop-upformulier kan op verschillende manieren worden gebruikt, waaronder: een formulier voor het verzamelen van informatie, een Contact formulier, een registratieformulier, een offerteformulier, een suggestie- / klachtenformulier en meer.

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Bekijk andere aanbevolen bronnen waarmee u contactformulieren op uw website of blog beter kunt maken en beheren. 

• 6 WordPress plug-ins voor verificatie door CAPTCHA op uw formulieren
• Hoe maak je een contactformulier met WordPress contactformulier 7 toevoegen
• Hoe GDPR-compliant formulieren op WordPress te maken

Conclusie

Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat u meer ideeën heeft om uw contactformulier aan te passen. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken. 

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...