[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {bakgrunnsfarge: # f8f6f6! viktig;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0p ! viktig; kant-bunn-bredde: 0px! viktig; polstring-bunn: 0px! viktig;} "] [vc_column_text]

Divi: det enkleste WordPress-temaet som skal brukes

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Kontaktformular 7 er en plugin WordPress utrolig populært for å lage kontaktskjemaer. Det lar deg lage skjemaer uten HTML-koding. disse skjemaer kan tilby funksjoner som CAPTCHA, laste ned filer, undersøkelsesfelt etc ...

Selv om standard kontaktskjema 7-stilen er tilstrekkelig for de fleste grunnleggende kontaktskjemaer, må du ofte endre den.

Dette endrer standardformularstrukturen for å gjøre den mer tilgjengelig. Han legger også til snarvei [responsiv] over skjemaet, slik at hvis det er en feil når du sender skjemaet, er det angitt på skjemaet.

Hvis du aldri har opprettet et WordPress-nettsted, kan du finne ut av det Slik installerer du en WordPress-blogg med en FTP-klient

For standardformularet er koden generert av plugin:

[svar] Ditt navn (obligatorisk) [tekst * ditt navn id: ditt navn] Din e-post (obligatorisk) [e-post * din e-post id: din e-post] Ditt emne [tekst ditt emne id: ditt emne] Din melding [textarea your-message id: your-message] [send inn "Send"]

Noen plugins for å tilpasse kontaktformularen 7

1. Kontaktformular 7 Style

plugin Kontaktformular 7 Style har en rekke stiler å velge mellom.

Kontaktlisteliste over 6For brukere av temaet Twenty Fifteen er det også en kompatibel stil.

Hvis du vil bruke en stil, går du til " Kontaktstiler> Hurtigredigering Sjekk skjemaet du vil bruke stilen i, og klikk deretter på " Oppdater '.

Eksempel på et WordPress-kontaktskjema2. Kontaktformular 7 Skins

Å bruke Skins Kontaktskjema 7, opprette et nytt kontaktskjema og bla ned til Skins-delen. Du kan velge en mal og en stil for skjemaet ditt.

Du finner modeller dedikert til skjemaene forEVENEMENTS, registrering og varsel.

Kontaktformular side wordpress mal

Slik ser undersøkelsesformen ut med Topaz-stilen ved hjelp av temaet Twenty Fifteen.

Eksempel på et skjema for kontaktskjema 7

3. Materialdesign for kontaktskjema

Disse stilene er basert på stilen til Material Design.

Dette pluginet foreslår at du sletter standardskjemaet og bruker kortkodene.

Her er et eksempel med Hestia-temaet. Legg merke til den flytende etiketten når pekeren flyttes inn i et felt på skjemaet.

Materiell design eksempel kontaktskjema 77 Testskjema for test på noen WordPress-temaer

Kontaktskjema med ColorMag WordPress Theme

Det meste av tiden vil kontaktskjema 7 arve stilen til ditt WordPress-tema. Dette er tilfellet med temaet Coral Dark.

Kontaktform for korallmørk

Kontaktskjema med WordPress ColorMag-tema

Her er skjemaet uten tilpasset stil. Han arver fargen på den blå knappen ColorMag WordPress-tema.

Kontaktskjema med fargetemaJeg startet med å laste opp et bilde som skal brukes som bakgrunnsbilde for skjemaet og endre koden til skjemaetikettene fra grått til hvitt med en blå skygge på teksten.

Følgende endringer var å øke marginene mellom skjemaetiketter og skjemafelt, endre trekk-knappen og legge til en kant når pekeren skriver inn felt på skjemaet.

Visningen av feil- / suksessmeldinger når skjemaet sendes inn, bør også endres slik at de vises riktig.

GIF-en som roterer når skjemaet sendes, dukket ikke opp riktig, jeg fant et alternativ til Loading.io og refererte til det med CSS.

Her er den resulterende formen:

Tilpasningsresultat av et kontaktskjema 7Her er koden:

div.wpcf7 {margin: 0; polstring: 1.5em; bakgrunn: url ('your_background_image_url_here'); -webkit-grense-radius: 3px; -moz-grense-radius: 3px; grense-radius: 3px; } .wpcf7-etikett, .wpcf7-submit {color: white; tekstskygge: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-kontroll {10px 0 20px 0; } .wpcf7 .wpcf7-submit: svever {bakgrunn: #186d8e; } .wpcf7-form-control: fokus {border: 2px solid #289dcc; } div.wpcf7-respons-utgang {bakgrunn: #F8F8F8; tekstjustering: center; bredde: 92.5%; margin: 1em 0em 1em 0em; -webkit-grense-radius: 3px; -moz-grense-radius: 3px; grense-radius: 3px; } span.wpcf7-ikke-gyldig-tips {bakgrunn: #F8F8F8; display: inline-block; bredde: auto; polstring: 1%; -webkit-grense-radius: 3px; -moz-grense-radius: 3px; grense-radius: 3px; } div.wpcf7 .ajax-loader {bakgrunnsbilde: url ('your_loading_image_url_here'); bredde: 50px; høyde: 50px; }

Hvis du ikke trenger å skrive inn koden, anbefaler vi at du sjekker ut vår 10 WordPress-plugins for å opprette et kontaktskjema på bloggen din

Oppdag også 3 premiumalternativer som vil hjelpe deg med å opprette kontaktskjemaer. 

1. W8 kontaktskjema

W8 Contact Form er en av de mest populære kontaktskjema plugins på WordPress. Den tilbyr mange funksjoner som innlevering til flere mottakere, animasjonsstøtte, ubegrenset formoppretting, forskjellige stiler og et bredt utvalg av ekstra tilpasningsalternativer.

W8 kontaktskjema wordpress kontaktskjema plugin

I tillegg gir det nettstedet eller bloggen din et profesjonelt system for å gjøre det lettere å komme i kontakt med kundene dine. Du vil kunne tilpasse alle skjemaene dine etter dine behov og din smak.

Last ned | dEMO | Webhotell

2. Kontakt oss skjema

Kontakt oss-skjemaet er et responsivt WordPress-plugin og et enkelt verktøy, men rikt på tilpasningsalternativer som lar deg vise et tydelig og oppmuntrende skjema der besøkende kan kontakte deg ved å legge igjen meldingen.

Kontakt oss fra wordpress kontaktskjema plugin

Du vil kunne definere de nødvendige feltene, velge den beste utformingen av feltene og tilpasse dem helt for å oppmuntre kundene eller besøkende til å legge igjen forslagene eller meldingene sine.

Bare sett opp e-postadressen der du vil motta meldingene, og bruk den til å utvide virksomheten din i den mest lønnsomme retningen.

Last ned | dEMO | Webhotell

3. Slick Popup Pro

Slick Popup Pro er et ganske enkelt og lett WordPress-plugin som konverterer hvilken som helst form opprettet av pluginet Kontaktskjema 7 i en popup. Hun bruker skjemaet og konverterer det til en vakker og perfekt responsiv popup.Wordpress popup-plugin glatt popup pro

Pop-upskjemaet kan ha flere bruksområder, inkludert: et skjema for informasjonssamling, et kontaktskjema, et registreringsskjema, et pristilbud, et forslag / klageskjema og andre.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Ta en titt på andre anbefalte ressurser som hjelper deg med å opprette og administrere kontaktskjemaer på nettstedet eller bloggen din. 

konklusjonen

Voila! Det er alt for denne opplæringen, jeg håper du vil ha flere ideer til å tilpasse kontaktskjemaet ditt. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Men i mellomtiden, fortell oss om din commentaires og forslag i den dedikerte delen.

...  

106 aksjer
del4
tweet
Enregistrer102