Jak w bloggerze dostosować formularz kontaktowy

Jeśli chcesz, aby formularz kontaktowy wyświetlał się na konkretnej stronie, na przykład pod nazwą Kontakt tak jak tutaj, a nie na pasku bocznym, to szkolenie pokaże ci, jak to zrobić.

Jak w bloggerze przenieść standardowy formularz kontaktowy na osobną stronę

1. Pierwsze, co musisz zrobić to dodać do paska bocznego standardowy gadżet bloggera - formularz kontaktowy. (Później, w trakcie szkolenia ukryjemy formularz kontaktowy, ale najpierw musisz go dodać). Nie wiesz jak?

Jak w bloggerze dodać formularz kontaktowy

•  Wejdź w Bloggerze na swój blog, przejdź na zakładkę Układ i kliknij Dodaj gadżet.

• W kolumnie po lewej stronie wejdź na Więcej gadżetów, wyszukaj Formularz kontaktowy i dodaj do bloga.

2. Skopiuj poniższy kod

<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</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='Send'/>
<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>

3. Utwórz nową stronę na twoim blogu

4. Przejdź na HTML, wklej skopiowany kod, nazwij stronę, uniemożliwij komentowanie i opublikuj stronę.

5. Teraz przejdź do Szablonu w Edytuj kod HTML

Przejdź do widżetu ContactForm1

Rozszerz widget ContactForm1

Rozszerz main b:includable

Teraz usuń podświetlony poniżej kod

Na końcu kod ContactForm1 powinien wyglądać tak:

W tej chwili sprawiliśmy, że formularz kontaktowy nie będzie się wyświetlał na pasku bocznym. Pamiętaj, aby formularz  kontaktowy działał, nie możesz usunąć go z Układu twojego bloga.

Zapisz szablon.

6. Ostatnie, co musisz zrobić do dostosować formularz do twoich potrzeb np. zmienić wyświetlane nazwy. Możesz to zrobić na dwa sposoby.

• przejdź na Strona - Nowy post

• lub przejdź na kod HTML

Podmień tekst zaznaczony na zielono. W zależności od potrzeb podmień lub usuń tekst zaznaczony na czerwono.

<form name="contact-form">

<div>

Your Name : </div>

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />

<div>

Your Email: <i> (required) </i></div>

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />

<div>

Your Message: <i>(required) </i></div>

<br />

<br />

&nbsp;<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

<br />

<div style="max-width: 450px; text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>                            

Zaktualizuj stronę.

To już wszystko.

Przyjemnego blogowania!