Kontaktformular 7 er et plugin WordPress utroligt populært til at oprette kontaktformularer. Det giver dig mulighed for at oprette formularer uden HTML-kodning. disse formularer kan tilbyde funktioner såsom CAPTCHA, download af filer, undersøgelsesfelter osv. ...

Selvom standard Kontaktformular 7-stilen er tilstrækkelig til de fleste grundlæggende kontaktformularer, skal du ofte ændre den.

Dette ændrer standardformularstrukturen for at gøre den mere tilgængelig. Han tilføjer også shortcode [responsiv] over formularen, så hvis der er en fejl ved indsendelse af formularen, er det angivet på formularen.

Hvis du aldrig har oprettet et WordPress-websted, skal du finde ud af det Sådan installeres en WordPress-blog med en FTP-klient

For standardformularen er koden, der genereres af plugin:

[svar] Dit navn (påkrævet) [tekst * dit-navn-id: dit-navn] Din e-mail (påkrævet) [e-mail * din-e-mail-id: din-e-mail] Dit emne [tekst dit emne-id: dit emne] Din besked [tekstarea din-meddelelses-id: din-besked] [send "Send"]

Nogle plugins til at tilpasse kontaktformularen 7

1. Kontaktformular 7-stil

plugin Kontaktformular 7-stil har et antal stilarter at vælge imellem.

Liste over kontaktformater på 6For brugere af temaet Twenty Fifteen er der også en kompatibel stil.

Gå til "for at anvende en stil Kontaktformater> Hurtig redigering Kontroller den formular, som du vil anvende stilen i, og klik derefter på " Opdatering '.

Eksempel på en wordpress-kontaktformular2. Kontaktformular 7 Skins

At bruge Skins Kontakt formular 7, opret en ny Kontaktformular og rul ned på siden til sektionen Skins. Du kan vælge en skabelon og stil til din formular.

Du finder modeller dedikeret til former forEVENEMENTS, registrering og meddelelse.

Kontaktformular side wordpress skabelon

Sådan ser undersøgelsesformen ud med Topaz-stilen ved hjælp af temaet Twenty Fifteen.

Eksempel på en kontaktformular 7 forespørgsel

3. Materielt design til kontaktformular

Disse stilarter er baseret på stilen på Materiale Design.

Dette plugin foreslår, at du sletter standardformularen og bruger dens korte koder.

Her er et eksempel med Hestia-temaet. Bemærk den flydende etiket, når markøren flyttes ind i et felt på formularen.

Materiale design eksempel kontakt formular 7Kontakt Form 7 test på nogle WordPress-temaer

Kontaktformular med ColorMag WordPress-tema

Det meste af tiden vil kontaktformular 7 arve stilen på dit WordPress-tema. Dette er tilfældet med temaet Coral Dark.

Koral mørk kontaktformular

Kontaktformular med WordPress ColorMag-tema

Her er formen uden brugerdefineret stil. Han arver farven på den blå knap ColorMag WordPress-tema.

Kontaktformular med colormag-temaJeg startede med at uploade et foto til brug som baggrundsbillede til formularen og ændre koden på formularens etiketter fra grå til hvid med en blå skygge på teksten.

Følgende ændringer skulle øge margenerne mellem formularetiketter og formularfelter, ændre subtraktionsknappen og tilføje en kant, når markøren kommer ind i formularfelterne.

Visningen af ​​fejl / succesmeddelelser, når formularen sendes, skal også ændres, så de vises korrekt.

GIF'en, der roterer, når formularen indsendes, vises ikke korrekt, jeg fandt et alternativ til Loading.io og henviste til det med CSS.

Her er den resulterende form:

Tilpasningsresultat af en kontaktformular 7Her er koden:

div.wpcf7 {margin: 0; polstring: 1.5em; baggrund: url ('din_background_image_url_here'); -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænseradius: 3px; } .wpcf7 etiket, .wpcf7-submit {farve: hvid; tekstskygge: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {baggrund: #186d8e; } .wpcf7-form-control: fokus {grænse: 2px solid #289dcc; } div.wpcf7-respons-output {baggrund: #F8F8F8; tekst-align: center; bredde: 92.5%; margen: 1em 0em 1em 0em; -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænseradius: 3px; } span.wpcf7-non-valid-tip {baggrund: #F8F8F8; display: inline-block; bredde: auto; polstring: 1%; -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænseradius: 3px; } div.wpcf7 .ajax-loader {baggrundsbillede: url ('your_loading_image_url_here'); bredde: 50px; højde: 50px; }

Hvis du ikke har brug for at skrive i koden, foreslår vi, at du tjekker vores 10 WordPress-plugins for at oprette en kontaktformular på din blog

Oplev også 3 premium-alternativer, der hjælper dig med at oprette dine kontaktformularer. 

1. W8 kontaktformular

W8 Contact Form er et af plugins til Kontaktformular den mest populære på WordPress. Det tilbyder mange funktioner såsom indsendelse til flere modtagere, understøttelse af animationer, ubegrænset oprettelse af formularer, forskellige stilarter og en bred vifte af yderligere tilpasningsmuligheder.

W8 kontaktformular wordpress kontaktformular plugin

Derudover giver det dit websted eller din blog et professionelt system, der gør det lettere at komme i kontakt med dine kunder. Du vil være i stand til at tilpasse alle dine formularer efter dine behov og din smag.

Downloade | demo | Web-hosting

2. Kontakt os formular

Kontakt os-formularen er et lydhørt WordPress-plugin og et simpelt værktøj, men rig på tilpasningsmuligheder, der giver dig mulighed for at vise en klar og opmuntrende formular, som dine besøgende kan kontakte dig ved at efterlade deres besked.

Kontakt os formular wordpress kontaktformular plugin

Du vil være i stand til at definere de nødvendige felter, vælge det bedste layout af felterne og tilpasse det helt for at opmuntre dine kunder eller besøgende til at forlade deres forslag eller meddelelser.

Bare konfigurer den e-mail-adresse, hvor du vil modtage meddelelserne, og brug den til at vokse din virksomhed i den mest rentable retning.

Downloade | demo | Web-hosting

3. Slick Popup Pro

Slick Popup Pro er en WordPress plugin ganske enkel og letvægts, der konverterer enhver form skabt af plugin Kontakt formular 7 i en popup. Hun bruger formularen og konverterer den til en smuk og perfekt responsiv popup.Wordpress popup-plugin glat popup pro

Pop-up-formularen kan have flere anvendelser, herunder: en informationsindsamlingsformular, en Kontaktformular, en registreringsformular, et tilbud, en formular til forslag / klage og andre.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Tjek andre anbefalede ressourcer, der hjælper dig med bedre at oprette og administrere kontaktformularer på dit websted eller din blog. 

Konklusion

Voila! Det er alt sammen til denne tutorial, jeg håber, at du har flere ideer til at tilpasse din kontaktformular. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...