Kontakt obrazac 7 je dodatak WordPress nevjerovatno popularan za izradu kontaktnih obrazaca. Omogućuje vam izradu obrazaca bez HTML kodiranja. ove forme može ponuditi funkcije poput CAPTCHA, preuzimanje datoteka, polja za istraživanje itd ...

Iako je zadani 7 obrazac kontakta dovoljan za većinu osnovnih obrazaca za kontakt, često ga morate promijeniti.

To mijenja zadanu strukturu obrasca kako bi je učinilo dostupnijom. Takođe dodaje Shortcodes [odgovarajući] iznad obrasca, tako da ako postoji greška prilikom slanja obrasca, to će biti naznačeno na obrascu.

Ako nikada niste kreirali WordPress web lokaciju, saznajte Kako instalirati WordPress blog sa FTP klijentom

Za standardni oblik, kod generiran dodatkom je:

[odgovor] Vaše ime (obavezno) [tekst * ime vašeg imena: vaše ime] Vaša adresa e-pošte (obavezno) [adresa e-pošte * vaš e-mail id: vaša adresa e-pošte] Vaša tema [tekst ime vašeg subjekta: vaš subjekt] Vaša poruka [textarea id vaše poruke: vaša poruka] [pošalji "Pošalji"]

Neki dodaci za prilagođavanje obliku Kontakt 7

1. Kontakt obrazac 7 Style

plugin Kontakt obrazac 7 Style ima nekoliko stilova koje možete odabrati.

Za korisnike teme Dvadeset petnaest postoji i kompatibilan stil.

Da biste primijenili stil, idite na " Kontaktirajte Stilovi> Brzo uređivanje Provjerite obrazac u kojem želite primijeniti stil, a zatim kliknite na " Update ".

2. Obrazac za kontakt 7

Da biste koristili Skins Kontakt 7, kreirajte novi kontakt formular i skrolujte dole do odeljka Skinovi. Možete odabrati predložak i stil za svoj obrazac.

Naći ćete modele posvećene oblicimadogađaji, registracija i obavijest.

Ovako izgleda obrazac za anketu sa stilom Topaz koristeći temu Dvadeset petnaest.

3. Dizajn materijala za obrazac za kontakt

Ovi stilovi su zasnovani na stil Material Design.

Ovaj dodatak predlaže da izbrišete zadani obrazac i koristite njegove kratke kodove.

Evo primjera s temom Hestia. Obratite pažnju na plutajuću oznaku kada se pokazivač premjesti u polje na obrascu.

Kontakt obrazac 7 testira na nekima WordPress teme

Obrazac za kontakt s ColorMag WordPress temom

Većinom vremena, obrazac za kontakt 7 naslijedit će stil vaše WordPress teme. To je slučaj s temom Coral Dark.

Obratite se obrascu za temu WordPress ColorMag

Evo obrasca bez prilagođenog stila. On nasljeđuje boju plavog dugmeta ColorMag WordPress tema.

Počeo sam s prenosom fotografije koja se koristi kao pozadinska slika obrasca i promjenom koda naljepnica obrasca iz sive u bijelu s plavom sjenom na tekstu.

Sljedeće promjene trebale su povećati margine između oznaka obrasca i polja obrasca, promijeniti dugme za oduzimanje i dodati obrub kada pokazivač unese polja u obrazac.

Prikaz poruka o greškama / uspjehu kada se obrazac predaje također treba promijeniti tako da se pravilno prikažu.

GIF koji se rotira kad se obrazac pošalje nije se ispravno prikazao, pronašao sam alternativu za Loading.io i referencirao ga sa CSS-om.

Evo sledećeg obrasca:

Evo koda:

div.wpcf7 {margin: 0; padding: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wpcf7 label, .wpcf7-submit {boja: bijela; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-Form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {pozadina: #186d8e; } .wpcf7-oblik-kontrola: fokus {border: 2px solid #289dcc; } div.wpcf7-response-output {pozadina: #F8F8F8; text-align: centar; širina: 92.5%; margin: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {pozadina: #F8F8F8; displej: inline-blok; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); width: 50px; height: 50px; }

Ako ne trebate škrabati kod, predlažemo da pogledate naš 10 WordPress dodaci za kreiranje obrasca za kontakt na vašem blogu

Otkrijte i 3 premium alternative koje će vam pomoći u kreiranju obrazaca za kontakt. 

1. W8 kontakt formular

W8 Kontakt obrazac je jedan od dodataka kontakt formular najpopularniji na WordPress-u. Nudi mnogo funkcija kao što su podnošenje više primatelja, podrška za animacije, neograničeno kreiranje obrazaca, različite stilove i širok izbor dodatnih opcija prilagođavanja.

Uz to, vašoj web stranici ili blogu daje profesionalni sistem koji olakšava kontakt sa svojim kupcima. Moći ćete prilagoditi sve svoje obrasce prema svojim potrebama i svom ukusu.

download | Demo | web hosting

2. Obratite nam se

Obrazac za kontaktiranje je responzivni WordPress dodatak i jednostavan alat, ali bogat opcijama prilagođavanja koji vam omogućava prikaz jasnog i ohrabrujućeg obrasca na kojem vas posjetitelji mogu kontaktirati ostavljajući svoju poruku.

Moći ćete definirati potrebna polja, odabrati najbolji izgled polja i potpuno ga prilagoditi kako biste potaknuli svoje kupce ili posjetitelje da ostave svoje prijedloge ili poruke.

Jednostavno postavite adresu e-pošte na koju želite primati poruke i koristite je za rast vašeg poslovanja u najprofitabilnijem smjeru.

download | Demo | web hosting

3. Slick Popup Pro

Slick Popup Pro je a WordPress ekstenzija prilično jednostavan i lagan koji pretvara bilo koji oblik kreiran uz pomoć dodatka Kontakt 7 u popup-u. Ona koristi formu i pretvara je u prekrasan i savršeno reagirajući popup.

Iskačući obrazac može se koristiti na više načina, uključujući: obrazac za prikupljanje podataka, a kontakt formular, obrazac za registraciju, obrazac za ponudu, obrazac za prijedlog / žalbu i drugo.

download | Demo | web hosting

Preporučeni resursi

Pogledajte druge preporučene resurse koji će vam pomoći da bolje kreirate i upravljate obrascima za kontakt na vašoj web lokaciji ili blogu. 

• 6 WordPress plugins za provjeru CAPTCHA na vašim obrascima
• Kako dodati kontakt formu u WordPress-u sa kontakt formom 7
• Kako kreirati formulare koji ispunjavaju GDPR na WordPressu

zaključak

Voila! To je sve za ovaj tutorial, nadam se da ćete imati više ideja da prilagodite obrazac za kontakt. Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama. 

Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada WordPress bloga

Ali, u međuvremenu, recite nam nešto o svom komentari i prijedloge u posebnom odjeljku.

...