Kontaktformulär 7 är ett plugin Wordpress otroligt populärt för att skapa kontaktformulär. Det låter dig skapa formulär utan HTML-kodning. dessa former kan erbjuda funktioner som CAPTCHA, ladda ner filer, undersökningsfält etc ...

Även om standardformuläret för kontaktformulär 7 är tillräckligt för de flesta grundläggande kontaktformulär, måste du ofta ändra det.

Detta ändrar standardformulärstrukturen så att den blir mer tillgänglig. Han lägger också till kortkod [lyhörd] ovanför formuläret så att om det uppstår ett fel när formuläret skickas indikeras det på formuläret.

Om du aldrig har skapat en WordPress-webbplats, ta reda på det Hur man installerar en WordPress-blogg med en FTP-klient

För standardformuläret är koden som genereras av plugin:

[svar] Ditt namn (obligatoriskt) [text * ditt namn id: ditt namn] Din e-post (obligatoriskt) [e-post * din-e-post id: din e-post] Ditt ämne [text ditt ämne id: ditt ämne] Ditt meddelande [textarea ditt meddelande-id: ditt meddelande] [skicka "Skicka"]

Några plugins för att anpassa kontaktformuläret 7

1. Kontaktformulär 7-stil

plugin Kontaktformulär 7-stil har ett antal stilar att välja mellan.

För användare av temat Twenty Fifteen finns det också en kompatibel stil.

För att tillämpa en stil, gå till " Kontaktformat> Snabbredigering Kontrollera formuläret där du vill använda stilen och klicka sedan på " uppdatering ".

2. Kontaktformulär 7 Skins

Att använda Skins Kontaktformulär 7, skapa en ny kontakt~~POS=TRUNC formulär~~POS=HEADCOMP och scrolla ner på sidan till avsnittet Skins. Du kan välja en mall och stil för ditt formulär.

Du hittar modeller avsedda för former avEVENEMENTS, registrering och meddelande.

Så här ser undersökningsformen ut med Topaz-stilen med temat Twenty Fifteen.

3. Materialdesign för kontaktformulär

Dessa stilar är baserade på stilen på material design.

Detta plugin föreslår att du tar bort standardformuläret och använder dess kortkoder.

Här är ett exempel med Hestia-temat. Notera den flytande etiketten när pekaren flyttas till ett fält på formuläret.

Kontaktformulär 7 testa på vissa WordPress-teman

Kontaktformulär med ColorMag WordPress Theme

För det mesta kommer kontaktformulär 7 ärva stilen för ditt WordPress-tema. Detta är fallet med temat Coral Dark.

Kontaktformulär med WordPress ColorMag-tema

Här är formen utan anpassad stil. Han ärver färgen på den blå knappen ColorMag WordPress-tema.

Jag började med att ladda upp ett foto som ska användas som bakgrundsbild för formuläret och ändra koden för formulärets etiketter från grått till vitt med en blå skugga på texten.

Följande ändringar var att öka marginalerna mellan formuläretiketter och formulärfält, ändra subtraheringsknappen och lägga till en kant när pekaren anger fält i formuläret.

Visningen av fel- / framgångsmeddelanden när formuläret skickas bör också ändras så att de visas korrekt.

GIF-spinnningen när formuläret skickades visas inte korrekt, jag hittade ett alternativ till Loading.io och refererade till det med CSS.

Här är den resulterande formen:

Här är koden:

div.wpcf7 {margin: 0; vaddering: 1.5em; bakgrund: url ( 'your_background_image_url_here'); -webkit-gräns-radie: 3px; -moz-gränsen-radien: 3px; gränslinjen: 3px; } .Wpcf7 etikett .wpcf7-submit {färg: vit; text-shadow: 1px 1px 0px RGBA (40, 157, 204, 1); } .Wpcf7 .wpcf7-formen-kontroll {margin: 10px 0px 20 0; } .Wpcf7 .wpcf7-submit: hover {bakgrund: #186d8e; } .Wpcf7-formen-kontroll: fokus {kant: fast 2px #289dcc; } Div.wpcf7-respons-utgång {bakgrund: #F8F8F8; text-align: center; bredd: 92.5%; marginal: 1em 0em 1em 0em; -webkit-gräns-radie: 3px; -moz-gränsen-radien: 3px; gränslinjen: 3px; } Span.wpcf7-ej-valid-tip {bakgrund: #F8F8F8; display: inline-block; bredd: auto; vaddering: 1%; -webkit-gräns-radie: 3px; -moz-gränsen-radien: 3px; gränslinjen: 3px; } Div.wpcf7 .ajax-loader {background-image: url ( 'your_loading_image_url_here'); bredd: 50px; höjd: 50px; }

Om du inte behöver skriva in koden, föreslår vi att du tittar på vår 10 WordPress-plugins för att skapa ett kontaktformulär på din blogg

Upptäck också 3 premiumalternativ som hjälper dig att skapa dina kontaktformulär. 

1. W8 Kontaktformulär

W8 Contact Form är ett av plugins till kontakt~~POS=TRUNC formulär~~POS=HEADCOMP den mest populära på WordPress. Den erbjuder många funktioner som inlämning till flera mottagare, stöd för animeringar, obegränsad formgivning, olika stilar och ett brett utbud av ytterligare anpassningsalternativ.

Dessutom ger det din webbplats eller blogg ett professionellt system för att lättare komma i kontakt med dina kunder. Du kommer att kunna anpassa alla dina formulär efter dina behov och din smak.

Ladda ner | demo | webbhotell

2. Kontakta oss formulär

Contact Us Form är ett lyhörd WordPress-plugin och ett enkelt verktyg men rikt på anpassningsalternativ som gör att du kan visa en tydlig och uppmuntrande form som dina besökare kan kontakta dig genom att lämna sitt meddelande.

Du kommer att kunna definiera nödvändiga fält, välja den bästa layouten för fälten och anpassa dem helt för att uppmuntra dina kunder eller besökare att lämna sina förslag eller meddelanden.

Ställ bara in e-postadressen där du vill ta emot meddelandena och använd den för att växa ditt företag i den mest lönsamma riktningen.

Ladda ner | demo | webbhotell

3. Slick Popup Pro

Slick Popup Pro är en WordPress plugin ganska enkel och lätt som konverterar vilken form som helst som skapas av plugin Kontaktformulär 7 i en popup. Hon använder formuläret och omvandlar det till en vacker och perfekt mottagande popup.

Popupformuläret kan ha flera användningsområden, inklusive: ett informationsinsamlingsformulär, en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP, ett registreringsformulär, ett offertformulär, ett förslag / klagomålsformulär och andra.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Kolla in andra rekommenderade resurser som hjälper dig att bättre skapa och hantera kontaktformulär på din webbplats eller blogg. 

• 6 WordPress plugins för verifiering av CAPTCHA på dina blanketter
• Hur man lägger till ett kontaktformulär med Wordpress Kontaktformulär 7
• Så här skapar du GDPR-kompatibla formulär på WordPress

Slutsats

Voila! Det här är allt för den här tutorialen, jag hoppas att du har fler idéer för att anpassa ditt kontaktformulär. Tveka inte att dela med dina vänner på dina favorit sociala nätverk. 

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.

.