Gå til hovedindhold

Sådan tilpasses formen Kontakt formular 7

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

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 rulle ned til Skins-sektionen. Du kan vælge en skabelon og en stil til din form.

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.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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 77 Kontaktformulartest 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:

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

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-kontaktformular er en af ​​de mest populære kontaktformular-plugins på WordPress. Det tilbyder masser af funktioner såsom indsendelse til flere modtagere, animationssupport, ubegrænset oprettelse af form, forskellige stilarter og en bred vifte af ekstra 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 et ret simpelt og let WordPress-plugin, der konverterer enhver form oprettet af pluginet 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

Popup-formularen kan have flere anvendelser, herunder: en formular til indsamling af oplysninger, en kontaktformular, en registreringsformular, et tilbud, en formular til forslag / klage og andre.

Downloade | demo | Web-hosting

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

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.

...  

Denne artikel indeholder kommentarer 2

  1. For at skabe et professionelt websted skal du være præcis og koncis for hurtigt at overbevise brugeren. Vi giver dig mulighed for at oprette en professionel hjemmeside, det være sig genstand for fremstilling af et showcase site eller en portefølje. Fremstillingen af ​​et websted eller en professionel hjemmeside er nu inden for rækkevidden af ​​alle. Derfor tilføjer din orson-hjemmeside alle disse funktioner af natur.

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
106 aktier
andel4
tweet
Tilmeld102