środa, 11 lutego 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.
Myślę, że powinnam sie do ciebie zgłosic na prywatne lekce z informatyki:P znów kolejny przydatny post:))
OdpowiedzUsuńJak będę umiałam więcej niż teraz to zapraszam, a w zamian Ty mi dasz lekcje z gotowania ;p
Usuńprzydatny post ;)
OdpowiedzUsuńO to w tym chodziło ;)
UsuńSuper post :)
OdpowiedzUsuńWłasnie postanowiłam zacząć ogarniać podstawy html :D
Super! Fajnie, że się za to wzięłaś, ciekawa zabawa jest z HTMLem ;)
Usuńoo, ciekawa opcja z tym formularzem :)
OdpowiedzUsuńhttp://exality.pl/
Właśnie chciałam napisać post o tym :)
OdpowiedzUsuńNo to zgrałyśmy się ;)
UsuńGenialny gadżet! Chyba sama go sobie dodam.
OdpowiedzUsuńDzięki za wskazówki ;)
Pozdrawiam, http://mojswiat9893.blogspot.com
Nie ma za co, korzystaj ile chcesz ;)
UsuńO dziękuję za poradnik :)
OdpowiedzUsuńProszę bardzo ;)
Usuń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. ;)
OdpowiedzUsuńpozdrawiam.
http://poprostumadusia.blogspot.com/
Przydatny post ;)
OdpowiedzUsuńSuper poradnik! Myślałam nad czymś takim na swoim blogu, teraz będę już wiedzieć jak to zrobić :)
OdpowiedzUsuńNOWY POST NA FABRYCE MIĘTY KLIK! :))
Niby kosmetyczna zmiana, a jednak zawsze to jakieś udogodnienie :)
OdpowiedzUsuńDokładnie tak :)
Usuńna wstępie to fajny post :) akurat chyba jeden z jedynych działających metod jakie testowałem..
OdpowiedzUsuń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
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ć :)
UsuńJednak jak będę pisała wpis o modyfikacji na pewno to uwzględnię.
Pozdrawiam :)
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...
Usuń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 :)
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 :)
Usuń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 ;)
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ę...
OdpowiedzUsuńswoją drogą to i tak masz bardzo ciekawy blog.. aż chce się wracać...
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.
UsuńCieszę się, że w jakimś stopniu spodobał Ci się mój blog.
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
OdpowiedzUsuń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...
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ć".
Usuń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 ;)
Świetny artykuł. Zrobiłam krok po kroku i pięknie działa. Dziękuję
OdpowiedzUsuń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ńZastosuj do tego instrukcje z tego wpisu http://blonparia.blogspot.com/2016/01/jak-zmienic-wyglad-formularza.html
OdpowiedzUsuńPróbowałem ale nie chcę zmieniać całego wyglądu a tylko rozszerzyć pole wiadomości. Wygląda to tak
OdpowiedzUsuń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ź ;-)
Potrzebowałabym linku do bloga, żeby coś więcej pomóc
OdpowiedzUsuńhttp://swiatkropki.blogspot.com/p/zoz-zamowienie.html
OdpowiedzUsuńJeśli coś Pani podpowie będę wdzięczny ;-)
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ń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
OdpowiedzUsuń. przy rozwijaniu widetow w zakładce edycji HTML tez są tak oznaczone jako 1 i 2 ( contakt form)
To nic, że jeden to jest formularz numer 1, a drugi 2 - one się ze sobą gryzą.
OdpowiedzUsuńCzyli niestety muszę nauczyć się żyć z tym wąskim polem :-) ponieważ potrzebuje obu formularzy. Ale bardzo bardzo dziękuje za pomoc :-)
OdpowiedzUsuń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ńPrzeniosłem, chyba wszystko działa. Super dzięki, odciążyłem też tym trochę sam szablon, bo wszędzie bez sensu to ładować.
OdpowiedzUsuń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ć :)
Ogólnie nie jest źle - jest przejrzyście, ale unowocześniłabym trochę Twojego bloga :)
OdpowiedzUsuńObecnie ma wygląd trochę jak te jedne z pierwszych blogów, które pojawiły się na Bloggerze ;)
Nie mogę sobie poradzić z usunięciem formularza kontaktowego z boku strony, ktoś może pomóc?
OdpowiedzUsuńJeśli nie został usunięty prawidłowo cały kod to tak się może dziać
OdpowiedzUsuń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ń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ńW ustawieniach (zaplecze naszego bloga) trzeba wpisać adres e-mail z którym blog ma być połączony
OdpowiedzUsuń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ńWyzej masz odpowiedź :) nie ważny jaki masz mail
OdpowiedzUsuń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:
OdpowiedzUsuń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.
Ustawienia - e-mail - E-mail z powiadomieniem o komentarzu (tutaj wpisujemy e-mail, jaki chcemy aby był połączony z blogiem)
OdpowiedzUsuń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ń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ń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ńTego właśnie szukałem! Wszystko działa tak jak trzeba :) Dzięki!
OdpowiedzUsuńZapraszam na www.pojedziemy.pl
Adres bloga to zakatek-enfleurage.blogspot.com
OdpowiedzUsuńUpdate - udało się usunąć formularz z panelu bocznego, ale nadal jest problem taki, że jak klikam na stronę "Kontakt" to się ona w ogóle nie wyświetla - nadal widać stronę główną.
OdpowiedzUsuńZrobiłam dokładnie krok po kroku, jak opisałaś. W podglądzie roboczym strony "Kontakt" formularz się pojawiał, ale wyrzucało mi całą kolumnę boczną pod główne pole tej strony. A potem jak w szablonie usunęłam to co pokazałaś, to formularz nie zniknął z bocznego panelu głównej strony, a jak przełączałam się pomiędzy stronami w ogóle nie otwierała mi się strona "KONTAKT". Co robię źle? Dodam też, że próbowałam zaimplementować na stronie kontakt formularz wykreowany za pomocą strony foxyform.com i też nie działało. Jestem w kropce.
OdpowiedzUsuńZ tym problemem proszę pisać na maila. Rozwiązywanie problemów tego typu w komentarzach mija się z celem ;) Więc proszę o napisanie maila. Problem będę mogła najwcześniej rozwiązać jutro rano, ponieważ obecnie nie mam jak się tym zająć ;)
OdpowiedzUsuńSuper! Wszystko działa jak potrzeba. Dziękuję!
OdpowiedzUsuńsuper! Wszystko działa jak trzeba! Dziękuję
OdpowiedzUsuń