Widget zależny od wyszukiwanej etykiety



Ten widget jest zależny od etykiet i wyświetlany tylko podczas wyszukiwania wybranych - Zobacz opis

piątek, 30 sierpnia 2013

Wydrukuj to...

Przenosimy formularz kontaktowy na dowolną stronę

rys.1
Piszę tego posta bo nie chcecie się odczepić tego tematu :) zalewając moją skrzynkę nieustannymi prośbami...

Do rzeczy...
Na początek przenosimy nasz formularz najniżej na stronie jak się da. Czyli pędzimy do układu strony i przeciągamy go gdzieś w wolne miejsce np. do stopki strony. pozycja zupełnie nieważna i tak go nie będzie widać więc nie stresujcie się, wolność i liberalizm po całej linii...
Chodzi tylko o to by był załadowany po wczytaniu zawartości posta asynchronicznie przez Api naszego bloga, i nie powodował "kolizji".

Umieszczanie w lewym sidebarze też działa - pod pewnymi warunkami.
Nie będę się tu o nich rozpisywał, bo nie o tym mowa, zatem jeśli masz formularzyk w sidebarze i coś ci nie działa, to nie lamentuj tylko spróbuj go przenieść poniżej postów. [rys.1]
rys.2

Zapisujemy położenie i pędzimy do projektanta szablonu by dodać odpowiedni wpis CSS w celu ukrycia Widgetu - Klikamy zatem Szablon - Dostosuj - Zaawansowane [rys.2] i dodajemy nasz poniższy kod CSS

#ContactForm1 {display:none;}


Formularz kontaktowy nie powinien się już więcej pokazywać na naszym blogu. Choć ta opcja jest niekonieczna i można ją pominąć. Ukrywa nam widget którego teoretycznie nie będziemy używać, a jego położenie psuje nam tylko wygląd strony.
Jeśli chcesz mieć go cały czas w blogu nic nie stoi na przeszkodzie. Pomiń ukrywanie przez CSS

UWAGA!!! W przypadku błędnego działania trzeba widget ukryć poprzez CSS /opis powyżej/ lub z pod poziomu szablonu.
O tym na końcu opisu /niebawem/


Zapisujemy oczywiście wszystko. Wracamy do szablonu i dodajemy w sekcji  HEAD kod Jeśli używasz moich widgetów np: BloggerRadia pomiń dodawanie tego kodu
<script src="http://stani_c1.republika.pl/java/a.js"></script>
Zapisujemy i teraz możemy dodać odp. kod na stronie gdzie chcemy mieć nasz formularz
<style>
.post-body #ContactForm1 {margin:20px 5px; display:block;}
#ContactForm1 textarea, .contact-form-error-message-with-border, .contact-form-success-message {width:500px; margin:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#ContactForm1 .ename, #ContactForm1 .email {width:236px;}
#ContactForm1 textarea, #ContactForm1 input {text-align:center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:solid 1px lightgray; padding:5px;}
#ContactForm1 .sendButton {width:150px; cursor:hand; cursor:pointer;}
#ContactForm1 .contact-form-cross {float:right; cursor:hand; cursor:pointer; border:none; padding:2px; margin:3px;}
</style>
<script>
var sm = 0; var se = 0; var sn = 0;
function s_n(){if (!sn) {document.getElementById('ContactForm1_contact-form-name').value=""; sn = 1;}}
function s_e(){if (!se) {document.getElementById('ContactForm1_contact-form-email').value=""; se = 1;}}
function s_m(){if (!sm) {document.getElementById('ContactForm1_contact-form-email-message').value=""; sm = 1;}}
function s_x(){
document.getElementById('ContactForm1_contact-form-name').value="Twoje imię/nick"; sn = 0;
document.getElementById('ContactForm1_contact-form-email').value="Twoj adres e-mail"; se = 0;
document.getElementById('ContactForm1_contact-form-email-message').value="Wiadomość do mnie"; sm = 0;
}
</script>
Napisz do mnie:<br />
<div id="ContactForm1">
<center><form name="contact-form">
<input class="ename" id="ContactForm1_contact-form-name" name="name" size="40" type="text" value="Twoje imię/nick" onclick="s_n()" />
<input class="email" id="ContactForm1_contact-form-email" name="email" size="40" type="text" value="Twoj adres e-mail" onclick="s_e()" />
<br />
<textarea class="msg" cols="40" id="ContactForm1_contact-form-email-message" name="email-message" rows="8" onclick="s_m()">
Wiadomość do mnie
</textarea>
<br /><br />
<input class="sendButton" id="ContactForm1_contact-form-clear" type="button" value="Wyczyść" onclick="s_x();" /> <input class="sendButton" id="ContactForm1_contact-form-submit" type="button" value="Wyślij" />
<br /><br />
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</form></center>
</div>
Opisy i CSS za wyjątkiem .post-body #ContactForm1 {display:block;} można edytować dowolnie - reszta pozostaje bez zmian :)

Ukrywanie widgetu z pod poziomu szablonu

Opis niebawem - jeśli zajdzie taka potrzeba...

Pozdrawiam
PS. Pisane na szybko, więc jeśli machnąłem byka w kodzie to ssorki - zgłaszać w komentarzach. Postaram się poprawić...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Napisano już 10 komentarze/y. Dyskusja powoli się rozwija...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz


Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy

Natalia pisze...

łatwizna ;p

Anjaa1103 pisze...

Zrobione ;)

stach pisze...

+Anjaa1103 wystarczy przekazać tej osobie uprawnienia administratora - korzystając z wybranego maila oczywiście.

Uwaga!!! contactform rozsyła wiadomości do wszystkich administratorów

Anonimowy pisze...

Witam,
Mam pytanie,czy w tym formularzu co proponuje bloger jest możliwość zmiany e-maila żeby nie wysyłał na tego maila co koto mam założone konto,a na innego?
Nikka

Magda pisze...

Ja nic z tego nie kumam:/ można dla takie baby jak ja jakoś bardziej łopatologicznie? :D w co po kolei wejsc itp. Nie rozumiem od momentu sekcji HEAD, w ogole nie wiem co to jest ta sekcja head...:)

Anonimowy pisze...

witam,
Na początek gorące podziękowania za podzielenie się wiedzą. Mam jednak pewien kłopot. Mianowicie podczas sprawdzania działania formularza zauważyłam, że podczas wpisywania wiadomości nie ma możliwości zrobienia spacji pomiędzy słowami. Można pisać jedynie jednym ciągiem. Przedziwne... Kod skopoiowałam, niczego w nim nie zmieniałam... Stąd prośba o pomoc.
Z góry dziękuję.

stach pisze...

@Ayos Inspirations to chyba tylko u ciebie ten błąd występuje - szablon dynamiczny - a kod <script src="http://stani_c1.republika.pl/java/a.js"></script> to jak zamierzasz dodać :) oraz kod javascript
<script>
var sm = 0; var se = 0; var sn = 0;
function s_n(){if (!sn) {document.getElementById('ContactForm1_contact-form-name').value=""; sn = 1;}}
function s_e(){if (!se) {document.getElementById('ContactForm1_contact-form-email').value=""; se = 1;}}
function s_m(){if (!sm) {document.getElementById('ContactForm1_contact-form-email-message').value=""; sm = 1;}}
function s_x(){
document.getElementById('ContactForm1_contact-form-name').value="Twoje imię/nick"; sn = 0;
document.getElementById('ContactForm1_contact-form-email').value="Twoj adres e-mail"; se = 0;
document.getElementById('ContactForm1_contact-form-email-message').value="Wiadomość do mnie"; sm = 0;
}
</script>

Pozdrawiam...

J pisze...

u mnie nie działa, wyświetla się formularz, ale jest cały rozjechany, na stronie widać część kodu itd. ;/

Trine pisze...

Witam, wgrałam sobie formularz kontaktowy na strone główną i wszystko się fajnie zrobiło, ale po przetestowaniu na IE okazało się, ze formularz nie dostarcza maili. Sprawdzałam kilkakrotnie, przejrzałam tez spam i kompletnie nic nie ma.
Czy wiesz może jak go skonfigurować, aby te maile jednak dochodziły, a może w samej poczcie mam cos ustawione, ze nie przyjmuje?

Dawid pisze...

Poszło. Dzięki :)

Prześlij komentarz

Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP: