Door naar hoofdmenu

Hoe kan het formulier invullen Contact formulier 7 aanpassen

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 600.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

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 [responsief] boven het formulier, zodat als er een fout is opgetreden bij het verzenden van het formulier, dit op het formulier wordt aangegeven.

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

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

[antwoord] <label> je naam </ label> [text * your-name id: your-name] <label for = "your-email"> Jouw e-mail (verplicht) < / label> [email * uw e-mailadres id: uw e-mailadres] <label voor = "uw onderwerp"> uw onderwerp </ label> [sms uw onderwerp-ID: uw onderwerp] <label for = "uw bericht "> Uw bericht </ label> [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.

Lijst met contactstijlen van 6Voor 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 .

Voorbeeld van een wordpress contactformulier2. Contactformulier 7 Skins

Om Skins te gebruiken Contact Formulier 7, maak een nieuw contactformulier en scrol omlaag naar het gedeelte Skins. U kunt een sjabloon en een stijl voor uw formulier kiezen.

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

Contactformulierpagina wordpress-sjabloon

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

Voorbeeld van een contactformulier 7 aanvraagformulier

3. Materiaalontwerp voor contactformulier

Deze stijlen zijn gebaseerd op de stijl van materiaal ontwerp.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Deze plug-in suggereert dat u het standaardformulier verwijdert en de shortcodes gebruikt.

Hier is een voorbeeld met het Hestia-thema. Let op het zwevende label wanneer de aanwijzer in een formulierveld wordt verplaatst.

Contactformulier materiaalontwerp 77 Contactformulier Test op enkele 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.

Coral dark contactformulier

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.

Contactformulier met colormag-themaIk begon met het uploaden van een foto om als achtergrondafbeelding voor het formulier te gebruiken en de labelcode te veranderen van grijs naar wit met een blauwe schaduw op de tekst.

De volgende wijzigingen zijn aangebracht om de marges tussen formulierlabels en formuliervelden te vergroten, de aftrekknop te wijzigen en een rand toe te voegen wanneer de aanwijzer de formuliervelden binnengaat.

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

De GIF die werd uitgevoerd toen het formulier werd verzonden, werd niet correct weergegeven. Ik vond een alternatief voor Loading.io en verwees ernaar met CSS.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

Hier is de resulterende vorm:

Maatwerk resultaat van een contactformulier 7Hier 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 in te schrijven, raden we u aan onze te controleren 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 Contactformulier is een van de populairste plug-ins voor contactformulieren op WordPress. Het biedt volledige functionaliteit zoals verzenden naar meerdere ontvangers, ondersteuning voor animaties, onbeperkt maken van formulieren, verschillende stijlen en een breed scala aan extra aanpassingsopties.

W8 contactformulier wordpress contactformulier plugin

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

Downloaden | demonstratie | web hosting

2. Neem contact met ons op Formulier

Contactformulier is een responsieve WordPress-plug-in en een eenvoudige maar rijke aanpassingshulpprogramma met een duidelijke en bemoedigende vorm, waarin uw bezoekers contact met u kunnen opnemen met hun bericht.

Neem contact met ons op via wordpress contactformulier plug-in

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 vrij eenvoudige en lichtgewicht WordPress-extensie die elke vorm converteert die door de plug-in is gemaakt Contact Formulier 7 in een pop-up. Ze gebruikt het formulier en zet het om in een mooie en perfect reagerende pop-up.Wordpress popup plugin gladde popup pro

De formulierpop-up kan verschillende toepassingen hebben, waaronder: een formulier voor het verzamelen van informatie, een contactformulier, een registratieformulier, een offerteformulier, een suggestie- / klachtenformulier en andere.

Downloaden | demonstratie | web hosting

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Aanbevolen bronnen

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

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 ondertussen over uw commentaires en suggesties in de speciale sectie.

...

Dit artikel bevat opmerkingen 2

  1. Om een ​​professionele website te maken moet je precies en beknopt zijn om de gebruiker snel te overtuigen. Wij bieden u de mogelijkheid om een ​​professionele website te maken, of het nu gaat om het maken van een showcase-site of een portfolio. De productie van een online site of professionele website is nu binnen het bereik van iedereen. Dat is waarom uw orson-website al deze functies van nature toevoegt.

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
106 aandelen
aandeel4
gekwetter
Enregistrer102