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.
For 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 '.
2. Kontaktformular 7 Skins
Å bruke Skins Kontaktskjema 7, lage en ny Kontaktskjema og bla nedover siden til Skins-delen. Du kan velge en mal og stil for skjemaet ditt.
Du finner modeller dedikert til skjemaene forEVENEMENTS, registrering og varsel.
Slik ser undersøkelsesformen ut med Topaz-stilen ved hjelp av temaet Twenty Fifteen.
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.
Kontaktskjema 7 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.
Kontaktskjema med WordPress ColorMag-tema
Her er skjemaet uten tilpasset stil. Han arver fargen på den blå knappen ColorMag WordPress-tema.
Jeg 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:
Her 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 pluginene til Kontaktskjema den mest populære på WordPress. Den tilbyr mange funksjoner som innsending til flere mottakere, støtte for animasjoner, ubegrenset oppretting av skjemaer, forskjellige stiler og et bredt utvalg av ekstra tilpasningsalternativer.
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.
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.
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.
3. Slick Popup Pro
Slick Popup Pro er en WordPress-utvidelse ganske enkel og lett som konverterer hvilken som helst form laget av plugin Kontaktskjema 7 i en popup. Hun bruker skjemaet og konverterer det til en vakker og perfekt responsiv popup.
Pop-upskjemaet kan ha flere bruksområder, inkludert: et skjema for informasjonsinnsamling, en Kontaktskjema, et registreringsskjema, et pristilbudsskjema, et forslag / klageskjema og andre.
Anbefalte ressurser
Ta en titt på andre anbefalte ressurser som hjelper deg med å opprette og administrere kontaktskjemaer på nettstedet eller bloggen din.
- 6 WordPress plugins for verifisering av CAPTCHA på skjemaene dine
- Hvordan legge til et kontaktskjema med WordPress Kontakt skjema 7
- Hvordan lage GDPR-kompatible skjemaer på WordPress
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.
...
For å skape et profesjonelt nettsted må du være presis og konsistent for raskt å overbevise brukeren. Vi tilbyr deg muligheten til å skape et profesjonelt nettsted, enten det er gjenstand for produksjon av et showcase eller en portefølje. Fremstillingen av en nettside eller profesjonell nettside er nå innen rekkevidde av alle. Det er derfor din orson-nettside legger til alle disse funksjonene av natur.
Ingen annonser, vær så snill!