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