Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

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.

Kontaktstilslista med 6

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 ".

Exempel på ett kontaktformulär för wordpress
2. Kontaktformulär 7 Skins

Att använda Skins Kontaktformulär 7, skapa ett nytt kontaktformulär och bläddra ner till avsnittet Skins. Du kan välja en mall och en stil för din form.

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

Kontaktformulärssida wordpressmall

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

Exempel på kontaktformulär 7 förfrågningsformulär

3. Materialdesign för kontaktformulär

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

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

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.

Materialform exempel kontaktformulär 7
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.

Kontaktform för korallmörk

Kontaktformulär med WordPress ColorMag-tema

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

Kontaktformulär med färgglatt 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.

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

Här är den resulterande formen:

Anpassningsresultat för ett kontaktformulär 7

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 de mest populära kontaktformulärsprogrammen på WordPress. Det erbjuder många funktioner som inlämning till flera mottagare, animationsstöd, obegränsad formskapande, olika stilar och ett brett utbud av ytterligare anpassningsalternativ.

W8 kontaktformulär wordpress kontaktformulär plugin

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

Kontakta oss Form är en Wordpress plugin responsivt och ett enkelt verktyg men rikt på anpassningsmöjligheter som låter dig visa ett tydligt och uppmuntrande formulär, där dina besökare kan kontakta dig genom att lämna sitt meddelande.

Kontakta oss formulär plugin för wordpress-kontaktformulär

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.Wordpress popup-plugin slick popup-pro

Popupformuläret kan ha flera användningsområden, inklusive: ett informationsinsamlingsformulär, ett kontaktformulär, 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. 

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.

.  

%d bloggare gillar denna sida: