Jak dodać formularz kontaktowy w podstronie

11.02.2015


Formularz kontaktowy jest nam bardzo dobrze znany. Jeden z tych gadżetów, który jest bardzo przydatny, ponieważ można od razu nie wychodząc z bloga napisać wiadomość do autora. Osobiście wolę korzystać z formularza kontaktowego niż kopiować adres e-mail, otwierać pocztę i dopiero pisać wiadomość. W dzisiejszym tutorialu pokażę wam jak umieścić formularz kontaktowy w podstronie, tak jak się znajduje u mnie w zakładce kontakt, aby nie zawadzał nam na pasku bocznym i nie majaczył gdzieś w stopce bloga.

1. Wchodzimy w układ i wybieramy dodaj gadżet. Kiedy otworzy nam się nowe okno, klikamy na "dodaj więcej gadżetów" szukamy formularza kontaktowego. Kiedy znajdziemy nasz formularz, klikamy na plus,a następnie zapisz.




Obecnie nasz formularz kontaktowy znajduje się w pasku bocznym i niech tam zostanie, ewentualnie możemy przenieść go na sam dół naszej kolumny, w każdym razie formularz musi być umieszczony na blogu. 

2. Przechodzimy do strony, w której ma się pojawić nasz formularz kontaktowy - w moim przypadku jest to strona test, a następnie przechodzimy do edytora HTML. 



Wklejamy kod:

<form name='contact-form'>
<div>Twoje imię: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Twój adres e-mail: <em>(wymagane)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Wiadomość: <em>(wymagane)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Wyślij'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Kliknij opublikuj lub aktualizuj, to zależy od tego czy wasza strona dopiero powstała czy edytujecie już istniejącą stronę.

3. Przechodzimy do szablon - edytuj kod HTML, a następnie rozwijamy listę "Przejdź do widżetu" i zaznaczamy ContactForm1. 



Kiedy już się znajdziemy  w odpowiednim miejscu, to rozszerzamy nasz widżet, klikając na kropeczki, które są zaznaczone w ramce poniżej.


Powtarzamy tą czynność tym razem z <b:includable id='main'>...</b:includable> 



Kiedy już nam się wszystko rozwinie, to usuwamy tą cześć kodu, która jest zaznaczona poniżej. Sprawi to, że formularz kontaktowy zniknie z kolumny bocznej bloga, ale nie zniknie z naszej podstrony, do której go dodaliśmy.


Uwaga! nie można usunąć formularza kontaktowego z kolumny bocznej, ten gadżet musi pozostać! 

Oprócz tego pojawiły się małe zmiany na blogu, zakładka tutoriale została podzielona na tutoriale blogowe oraz te graficzne związane z GIMPem, PhotoScapem i inne oraz zakładka portfolio została podzielona na szablony, nagłówki oraz inne prace. Mam nadzieję, że to ułatwi wszystkim wyszukiwanie tego czego potrzebuje.

37 komentarzy:

  1. Myślę, że powinnam sie do ciebie zgłosic na prywatne lekce z informatyki:P znów kolejny przydatny post:))

    OdpowiedzUsuń
    Odpowiedzi
    1. Jak będę umiałam więcej niż teraz to zapraszam, a w zamian Ty mi dasz lekcje z gotowania ;p

      Usuń
  2. Super post :)
    Własnie postanowiłam zacząć ogarniać podstawy html :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Super! Fajnie, że się za to wzięłaś, ciekawa zabawa jest z HTMLem ;)

      Usuń
  3. Właśnie chciałam napisać post o tym :)

    OdpowiedzUsuń
  4. Genialny gadżet! Chyba sama go sobie dodam.
    Dzięki za wskazówki ;)

    Pozdrawiam, http://mojswiat9893.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie ma za co, korzystaj ile chcesz ;)

      Usuń
  5. O dziękuję za poradnik :)

    OdpowiedzUsuń
  6. bardzo przydatne informacje, pewnie niedługo skorzystam, jak zacznę porządkować swojego bloga, bo mam kilka pomysłów z nim związanych, ale to wymaga czasu, którego na razie nie mam za bardzo. ;)
    pozdrawiam.
    http://poprostumadusia.blogspot.com/

    OdpowiedzUsuń
  7. Super poradnik! Myślałam nad czymś takim na swoim blogu, teraz będę już wiedzieć jak to zrobić :)

    NOWY POST NA FABRYCE MIĘTY KLIK! :))

    OdpowiedzUsuń
  8. Niby kosmetyczna zmiana, a jednak zawsze to jakieś udogodnienie :)

    OdpowiedzUsuń
  9. na wstępie to fajny post :) akurat chyba jeden z jedynych działających metod jakie testowałem..

    natomiast chciał bym zwrócić uwagę na linijkę w kodzie:

    textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'

    odpowiada ona dokładnie (jak by ktoś nie widział) za element w który wpisujemy naszą wiadomość kontaktową.
    jeśli chcemy odblokować to pole żeby nie tylko w pionie się powiększało ale i w poziomie oraz zmienić jej domyślną szerokość to należy usunąć to:

    class='contact-form-email-message'

    no a dalsza edycja formularza wedle uznania :)

    pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. Osobiście o tym wiem, jednak nie pisałam o tym jak modyfikować formularz kontaktowy, bo wpis miał na celu pokazanie, że można takie coś zrobić :)
      Jednak jak będę pisała wpis o modyfikacji na pewno to uwzględnię.

      Pozdrawiam :)

      Usuń
    2. ty akurat może to wiesz bo widać po twoim blogu że spor czasu na to poświęcasz żeby wyglądał jak wygląda i żeby był ciekawy...
      osobiści dla mnie to pole psuje estetykę jak jest za wąskie dla tego chciałem o tym wspomnieć ;) ale wszystko to kwestia gustu :)

      Usuń
    3. Nie ukrywam, że rzeczywiście sporo czasu poświęcam właśnie na wygląd bloga, a i tak jest jeszcze parę rzeczy do zrobienia :)
      Oczywiście, że wszystko to kwestia gustu. Jak tylko wstawiłam ten formularz kontaktowy u siebie to bawiłam się nim trochę i właśnie zmieniałam wielkość pola do wpisywania wiadomości itd. Jednak jakoś mi nie pasowało, ale wiadomo kobieta zmienną jest, więc nie wiadomo co mi jeszcze strzeli do głowy ;)

      Usuń
  10. bawiłem się trochę tym formularzem kontaktowym i niestety nie sprawdza się on w IE oraz w wersji mobilnej. Nie chcą się z niego wysyłać wiadomości.. Może ja coś prze koloryzowałem ale wątpię...

    swoją drogą to i tak masz bardzo ciekawy blog.. aż chce się wracać...

    OdpowiedzUsuń
    Odpowiedzi
    1. Również dostrzegłam ten problem, ale - przyznam się bez bicia - nie mam pojęcia jak go rozwiązać. Inaczej by było jakby to był mój gadżet, a nie bloggerowy. Wtedy nie bałabym się większych zmian jak dostosowanie do danej przeglądarki czy wersji mobilnej.

      Cieszę się, że w jakimś stopniu spodobał Ci się mój blog.

      Usuń
  11. może i romansowałem trochę z HTML/CSS itp ale niestety bloger/blogspot to taki dziwny twór że nie mogę go ogarnąć do końca... u Ciebie jakoś 99% twoich porad do blogera idealnie się sprawdza i przede wszystkim działa.. - nie to co u konkuręci

    a wracając do formularza kontaktowego zawsze plik php - część która przetwarza cały formularz - można umieścić na zewnętrznym serwerze, a cały formularz normalnie na blogu html'u mieć... powinno za trybić bez problemów. blogerowy formularz kontaktowy jest bardzo prosto odtworzyć bo nie ma w nim nic szczególnie trudnego...

    a co do wersji mobilnej... to straszna kaszana jest jeśli chodzi o sam tryb mobilny blogera... :/ już lepiej go odpalić jak ktoś może klasycznie bo inaczej nie ma jak zobaczyć całego trudu pracy...

    OdpowiedzUsuń
    Odpowiedzi
    1. Szczerze mówiąc, do tej pory mam problem z ogarnięciem Bloggera. Nie raz ma swoje "humorki" i kod, który powinien zadziałać - nie działa, a na drugim blogu działa. Kiedyś, na samym początku jak tylko założyłam bloga i jeszcze nie miała nic wspólnego z projektowaniem stron, z tym całym kodowaniem, szukałam instrukcji po innych blogach i fakt, wiele z nich nie działało. Bardzo irytujące. Ja jak pisze instrukcje, to w tym samym momencie ją wykonuje na drugim blogu, aby sprawdzić czy na pewno mój tok rozumowania przy danej instrukcji jest dobry. Wiele blogów ma to do siebie, że owszem ma instrukcje, ale jest to zrobione zasadą kopiuj-wklej-opublikuj. Sama spotkałam się z sytuacją gdzie dziewczyna miała skopiowaną instrukcje ode mnie i pełno komentarzy, że nie działa - powód prosty, instrukcję od tego czasu zdążyłam zaktualizować, a poprzednia wersja rzeczywiście nie zawsze chciała "zaskoczyć".

      Muszę kiedyś spróbować. Fakt, bloggerowy formularz jest bardzo prosto stworzony, więc myślę, że nie powinno nic złego się z nim stać. Jak będę miała więcej czasu - na pewno ten sposób wypróbuje ;)

      Dla mnie wersja mobilna wygląda tak, jakby była zrobiona na odwal. Strasznie uboga, mam wrażenie, że jest niedopracowana. Wiele razy zastanawiałam się nad tym czy nie wyłączyć wersji mobilnej, bo rzeczywiście nie da się zobaczyć całej pracy jaką włożyliśmy w szablon i poszczególne elementy. Ja mam w planach przenieść się na swoje. Podpiąć pod WordPressa, własny hosting, domena, wtedy będę miała pewność, że wszystko będzie się prezentować jak należy. Na chwilę obecną, szkoda mi wydawać pieniędzy na Bloggera, bo wiem, że to nie będzie moje miejsce w sieci na stałe ;)

      Usuń
  12. Świetny artykuł. Zrobiłam krok po kroku i pięknie działa. Dziękuję

    OdpowiedzUsuń
  13. Hej mam mały problem po zastosowaniu tej metody- wszystko działa ok ale nie mogę zwiększyć szerokości pola na wiadomość- zmniejszyć się daje ale przy zwiększeniu nie. Masz pomysł jak to zrobić?

    OdpowiedzUsuń
  14. Zastosuj do tego instrukcje z tego wpisu http://blonparia.blogspot.com/2016/01/jak-zmienic-wyglad-formularza.html

    OdpowiedzUsuń
  15. Próbowałem ale nie chcę zmieniać całego wyglądu a tylko rozszerzyć pole wiadomości. Wygląda to tak




    Zamówienie: (wymagane)











    Zmiana width też nic nie pomaga bo nawet jak ustawiam np 800px to i tak zostaje małe okienko. Ale i tak dziękuję za odpowiedź ;-)

    OdpowiedzUsuń
  16. Potrzebowałabym linku do bloga, żeby coś więcej pomóc

    OdpowiedzUsuń
  17. http://swiatkropki.blogspot.com/p/zoz-zamowienie.html
    Jeśli coś Pani podpowie będę wdzięczny ;-)

    OdpowiedzUsuń
  18. Głupi błąd popełniłeś - nie ukryłeś formularza kontaktowego. Masz go cały czas w bocznej kolumnie. Powinieneś wykonać ten krok z wycięciem kodu HTML. Formularz nadal będzie w kolumnie bocznej (bo musi być), ale będzie ukryty ;)

    OdpowiedzUsuń
  19. No nie do końca bo ten z boku to formularz numer 2 a ten który jest w zakładce złóż zamówienie to formularz numer 1 ukryty bo znajdował się w foter
    . przy rozwijaniu widetow w zakładce edycji HTML tez są tak oznaczone jako 1 i 2 ( contakt form)

    OdpowiedzUsuń
  20. To nic, że jeden to jest formularz numer 1, a drugi 2 - one się ze sobą gryzą.

    OdpowiedzUsuń
  21. Czyli niestety muszę nauczyć się żyć z tym wąskim polem :-) ponieważ potrzebuje obu formularzy. Ale bardzo bardzo dziękuje za pomoc :-)

    OdpowiedzUsuń
  22. Jest jeszcze jedna opcja, którą możesz wypróbować, tylko, że to jest trochę bawienia się w kodzie. Znajdź zewnętrzny formularz kontaktowy. Bloggerowy zostaw w kolumnie bocznej, a zewnętrzny do podstrony. Musisz się pobawić trochę z HTMLem. Tzw. gotowców w internecie jest mnóstwo, ale to sam musisz posprawdzać, który by działał poprawnie, bo osobiście z nich nie korzystałam :)

    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