Obrazac za kontakt 7 je dodatak WordPress nevjerojatno popularan za izradu kontaktnih obrazaca. Omogućuje vam izradu obrazaca bez HTML kodiranja. ovi obrasci može ponuditi značajke poput KAPETAN, preuzimanje datoteka, anketna polja itd ...

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

To mijenja zadanu strukturu obrasca kako bi ga učinilo pristupačnijim. Također dodaje kratki kôd [odgovarajući] iznad obrasca, tako da ako postoji pogreška prilikom slanja obrasca, to će biti naznačeno na obrascu.

Ako nikada niste izradili WordPress web stranicu, saznajte Kako instalirati WordPress blog s FTP klijentom

Za standardni obrazac kod koji generira dodatak 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š predmet] Vaša poruka [textarea id vaše poruke: vaša poruka] [pošalji "Pošalji"]

Neki dodaci za prilagodbu obrasca Kontakt obrazac 7

1. Obrazac za kontakt 7 Style

plugin Obrazac za kontakt 7 Style ima nekoliko stilova koje možete odabrati.

Popis stilova za kontakt od 6Za korisnike teme Dvadeset petnaest postoji i kompatibilan stil.

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

Primjer wordpress kontaktnog obrasca2. Obrazac za kontakt 7

Koristiti Skinove od Kontaktirajte obrasca 7, stvoriti novi kontakt obrazac i pomaknite se prema dolje na stranici do odjeljka Skinovi. Možete odabrati predložak i stil za svoj obrazac.

Naći ćete modele posvećene oblicimaévénements, registracija i obavijest.

Wordpress predložak stranice obrasca za kontakt

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

Primjer obrasca za kontakt 7 obrasca za upit

3. Dizajn materijala za obrazac za kontakt

Ovi stilovi temelje se na stilu materijal dizajn.

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 naljepnicu kada se pokazivač premjesti u polje na obrascu.

Primjer dizajna materijala obrazac za kontakt 7Kontaktni obrazac 7 testirajte na nekima WordPress teme

Obrazac za kontakt s ColorMag WordPress temom

Većinu vremena Kontakt obrazac 7 naslijedit će stil vaše WordPress teme. To je slučaj s temom Dark Coral.

Koraljni tamni kontaktni obrazac

Obratite se obrascu za temu WordPress ColorMag

Ovdje je obrazac bez prilagođenog stila. On nasljeđuje boju plavog gumba ColorMag WordPress tema.

Obrazac za kontakt s temom colormagPočeo sam s prijenosom 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, izmijeniti gumb za oduzimanje i dodati obrub kada pokazivač uđe u polja obrasca.

Prikaz poruka o pogreškama / uspjehu prilikom predaje obrasca također treba promijeniti tako da se pravilno prikazuju.

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

Evo sljedećeg obrasca:

Rezultat prilagodbe kontakt obrasca 7Evo koda:

div.wpcf7 {margin: 0; padding: 1.5em; pozadina: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; granični radijus: 3px; } .wpcf7 oznaka, .wpcf7-submit {boja: bijela; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-oblik kontrole {10px 0 20px 0; } .wpcf7 .wpcf7-submit: lebdenje {pozadina: #186d8e; } .wpcf7-kontrola-oblika: fokus {border: 2px solid #289dcc; } div.wpcf7-odgovor-izlaz {pozadina: #F8F8F8; poravnavanje teksta: centar; širina: 92.5%; margina: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; granični radijus: 3px; } span.wpcf7-not-valid-tip {pozadina: #F8F8F8; prikaz: inline-blok; width: auto; padding: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; granični radijus: 3px; } div.wpcf7 .ajax-loader {pozadina-slika: url ('your_loading_image_url_here'); širina: 50px; visina: 50px; }

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

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

1. Obrazac za kontakt W8

W8 Kontakt obrazac jedan je od dodataka za kontakt obrazac najpopularniji na WordPressu. Nudi mnoštvo značajki kao što je slanje višestrukim primateljima, podrška za animacije, neograničeno stvaranje obrazaca, različiti stilovi i širok izbor dodatnih opcija prilagodbe.

W8 obrazac za kontakt wordpress dodatak za kontakt obrazac

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

Preuzmite | demo | Web hosting

2. Obratite nam se

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

Obratite nam se putem WordPress dodatka za kontakt obrasce

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 upotrijebite je za rast vašeg poslovanja u najprofitabilnijem smjeru.

Preuzmite | demo | Web hosting

3. Slick Popup Pro

Slick Popup Pro je WordPress proširenje prilično jednostavan i lagan koji pretvara bilo koji oblik stvoren pomoću dodatka Kontaktirajte obrasca 7 u skočnom prozoru. Ona koristi obrazac i pretvara ga u prekrasan i savršeno reagirajući popup.Wordpress skočni dodatak slick popup pro

Skočni obrazac može se koristiti u nekoliko svrha, uključujući: obrazac za prikupljanje podataka, a kontakt obrazac, obrazac za registraciju, obrazac za ponudu, obrazac za prijedlog / žalbu i drugo.

Preuzmite | demo | Web hosting

Preporučeni resursi

Pogledajte druge preporučene resurse koji će vam pomoći da bolje stvorite i upravljate obrascima za kontakt na svojoj web stranici ili blogu. 

Zaključak

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

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

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

...