Jak zmienić wygląd formularza kontaktowego

15 stycznia 2016


Pewnie każdy z Was zna Bloggerowy formularz kontaktowy, kiedyś pojawiła się jedna instrukcja na temat tego gadżetu. Pokazywałam Wam w niej, jak wstawić formularz kontaktowy w podstronie. Teraz nadszedł czas na to, aby poprawić wygląd naszego gadżetu. Przyznacie chyba sami, że pierwotny wygląd tego gadżetu nie zachwyca.


To teraz czas na zmiany.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy poniższy kod:


.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; font-size: 14px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}

Analiza kodu: 

.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}

Kolor tła ramek imię, e-mail, wiadomość 
Styl obramowania ramek imię, e-mail, wiadomość 
Kolor obramowania ramek imię, e-mail, wiadomość 
Wysokość ramek imię, e-mail, wiadomość 
Rozmiar czcionki (chodzi o rozmiar czcionki, którą uzupełniamy nasze ramki)
Marginesy wewnętrzne 
Kolor tła, przycisku "wyślij" 
Wysokość przycisku "wyślij"
Szerokość przycisku "wyślij"
Wielkość i rodzaj czcionki przycisku "wyślij" 
Zaokrąglone rogi przycisku "wyślij"
Tło przycisku "wyślij" po najechaniu myszką 

To już wszystko. Szybko, łatwo i przyjemnie. Mam nadzieję, że komuś się ten kod przyda :) 

9 komentarzy:

  1. Przyda się na pewno!;) Pozdrawiam!

    OdpowiedzUsuń
  2. Dziekuje! Jak tylko bede miala dłuższą chwilę to to zrobie!;)

    OdpowiedzUsuń
  3. Super, muszę się za to kiedyś zabrać :) !! Albo najlepiej jakby jeszcze ktoś to zrobił za mnie :D

    OdpowiedzUsuń
  4. Nie mamy takie opcji ale na pewno nie jednej osobie spadniesz z nieba ;)

    OdpowiedzUsuń
  5. Świetny blog, inspirujesz do zmian :)

    OdpowiedzUsuń
  6. Super! Bardzo się cieszę, że instrukcja się przyda :)

    OdpowiedzUsuń
  7. Haha, no tak, ale niestety czasem trzeba samemu się pomęczyć :D

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona