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.

51 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ń
  23. Przeniosłem, chyba wszystko działa. Super dzięki, odciążyłem też tym trochę sam szablon, bo wszędzie bez sensu to ładować.
    Może zerkniesz na mojego bloga http://antyhaczyk.blogspot.com i mi coś zasugerujesz jakby go można było jeszcze odciążyć, bo zamula przy ładowaniu.
    Jeszcze raz dzięki za ten opis krok po kroku jak to zrobić :)

    OdpowiedzUsuń
  24. Ogólnie nie jest źle - jest przejrzyście, ale unowocześniłabym trochę Twojego bloga :)
    Obecnie ma wygląd trochę jak te jedne z pierwszych blogów, które pojawiły się na Bloggerze ;)

    OdpowiedzUsuń
  25. Nie mogę sobie poradzić z usunięciem formularza kontaktowego z boku strony, ktoś może pomóc?

    OdpowiedzUsuń
  26. Jeśli nie został usunięty prawidłowo cały kod to tak się może dziać

    OdpowiedzUsuń
  27. Udało mi się usunąć formularz, ale chyba nie do końca mi to wyszło, bo jak go usunąłem to trochę popsuł mi się układ (w taki sposób, że całe menu układu się tak jakby się przesunęło na lewą stronę i nic praktycznie nie widać). Wiesz może jak to naprawić?

    OdpowiedzUsuń
  28. Chyba udało mi się wszystko opanować. Została mi ostatnia rzecz, jak zrobić, żeby wiadomość z formularzu kontaktowego przysyłana była na konkretny adres e-mail?

    OdpowiedzUsuń
  29. W ustawieniach (zaplecze naszego bloga) trzeba wpisać adres e-mail z którym blog ma być połączony

    OdpowiedzUsuń
  30. A czy da się tak zrobić, żeby adres email do formularza był inny niż ten, który jest powiązany z kontem google czy raczej nie bardzo?

    OdpowiedzUsuń
  31. Wyzej masz odpowiedź :) nie ważny jaki masz mail

    OdpowiedzUsuń
  32. A możesz mi dokładniej powiedzieć w którym miejscu to jest, bo nie mogę znaleźć :/. Wchodzę w ustawienia, e-mail i są 3 opcje:
    1. Publikowanie przez e-maila
    2. E-mail z powiadomieniem o komentarzu
    3. Wyślij posty e-mailem do

    I nie ma nic więcej, a to chyba nie jest żadna z tych.

    OdpowiedzUsuń
  33. Ustawienia - e-mail - E-mail z powiadomieniem o komentarzu (tutaj wpisujemy e-mail, jaki chcemy aby był połączony z blogiem)

    OdpowiedzUsuń
  34. Wcześniej własnie go tam wpisywałem, tylko stwierdziłem jednak, że to nie to, bo jak podaje tam email (z serwisu o2), to nie dostaje na niego żadnej wiadomości.

    OdpowiedzUsuń
  35. Jeśli w tym samym czasie, co jesteś zalogowany na swoje konto Google, na którym masz bloga wysyłasz sam do siebie wiadomość to może nie dojść. W przypadku kiedy jesteś wylogowany, powinno być wszystko ok. Ewentualnie może Ci wiadomość trafiać do spamu. Jeśli nawet tam jej nie ma, to widocznie, Blogger po ostatniej aktualizacji wprowadził zmiany i w tej kwestii i zewnętrznego maila podpiąć nie można. Jakiś czas temu jeszcze się to dało zrobić (sama miałam osobisty mail na g-mailu, a blogowy na onecie, obecnie oba mama na g-mail i drugi adres e-mail z g-maila mam podłączony)

    OdpowiedzUsuń
  36. Najwidoczniej jest tak, że już nie można, bo sprawdziłem te opcje, które mi podałaś. Tak czy siak, dziękuje ślicznie za pomoc i poświęcony czas :). Pozdrawiam!

    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

Copyright © Szablon wykonany przez Blonparia