Prosty formularz e-mail - bez znajomości HTML i PHP

Dzisiaj chciałabym pokazać Wam, jak w prosty sposób bez znajomości HTMLa i PHP stworzyć działający formularz na stronę WWW. Tutorial będzie dotyczył dwóch stron - Response-O-Matic.com i EmailMeForm.com. Zaczynamy od tej pierwszej.

RESPONSE O MATIC

1. Wchodzimy na stronę https://www.response-o-matic.com/sys/user/signup

2. Wpisujemy kolejno:
Name - Imię lub Nick
Email - nasz aktualny i działający adres e-mail
Password - hasło. koniecznie "silne" - narzędzie do sprawdzania siły hasła: http://www.microsoft.com/poland/protect … ecker.mspx
Confirm Password - powtarzamy hasło. Musi być identyczne jak to wpisane w poprzednim okienku.

3. Kiedy wszystko wpiszemy, klikamy Sign Up.

4. Jeżeli wszystko poprawnie zrobiliśmy, pojawia się komunikat:
"Thank you for creating your account!

Before you can login, we need to quickly confirm your email address. We sent an email to twoj@email.pl explaining how."
Odbieramy pocztę w celu kliknięcia w link potwierdzający (aktywacyjny). Po kliknięciu w link jesteśmy automatycznie logowani i możemy zacząć tworzyć nasz formularz.

5. Rozpoczynamy edycję pól. W celu zmienienia nazwy, klikamy Edit.
UWAGA! Pole drugie jest polem przeznaczonym tylko i wyłącznie do wpisywania adresu e-mail!

6. Możemy również tworzyć nowe pola, klikając w odpowiednim miejscu "Add a Question". Objaśnienie opcji:
Short Answer - okienko na jedną linijkę do krótkich odpowiedzi (np. imię, adres mailowy, numer GG etc.)
Long Answer - okienko dłuższe, przeznaczone np. do wpisywania treści wiadomości.
Radio Buttons - przyciski wyboru umożliwiające zaznaczanie pojedynczych opcji.
Drop Down Box - lista rozwijana zawierająca opcje do wyboru.
Checkboxes - okienka służące do zaznaczania więcej niż jedna opcja.
Text Block - blok tekstu, pomocny kiedy chcemy napisać jakąś informację pod formularzem, nad nim lub pomiędzy poszczególnymi okienkami.

7. Kiedy już zeedytujemy nasz formularz, klikamy Save and Continue to Step 2.

8. Część druga. Musimy zaptaszkować (zaznaczyć ptaszkiem):

"Send them back to your website"

Pojawi nam się pole:

Your Website
http://___________________

Po http:// wpisujemy adres strony, może to być zarówno http://www.strona.pl/ jak i http://www.strona.pl/kontakt.html (czyli strona główna lub podstrona). Następnie klikamy Save and Continue to Step 3.

9. Mamy nasz kod html do wstawienia na stronę! Mój wygląda tak:

<!-- Begin Response-O-Matic Form -->
<!-- DO NOT EDIT YOUR FORM HERE, PLEASE LOG IN AND EDIT AT RESPONSE-O-MATIC.COM -->
<form enctype="multipart/form-data" method="post" action="http://www.response-o-matic.com/mail.php" accept-charset="UTF-8">
    <div>
        <input type="hidden" name="acctid" id="acctid" value="20n8hr9qfvj130f7" />
        <input type="hidden" name="formid" id="formid" value="715271" />
        <input type="hidden" name="required_vars" id="required_vars" value="name,email" />
    </div>
    <table cellspacing="5" cellpadding="5" border="0">
        <tr>
            <td valign="top">
                <strong>Name:</strong>
            </td>
            <td valign="top">
                <input type="text" name="name" id="name" size="40" value="" />
                
            </td>
        </tr>
        <tr>
            <td valign="top">
                <strong>Email Address:</strong>
            </td>
            <td valign="top">
                <input type="text" name="email" id="email" size="40" value="" />
                
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value=" Submit Form " />
            </td>
        </tr>
    </table>
</form>
<br><center><font face="Arial, Helvetica" size="1"><b>
This <a href="http://www.response-o-matic.com">contact form</a> was created by Freedback.
</b></font></center>
<!-- End Response-O-Matic Form -->

Kasujemy z niego:

<br><center><font face="Arial, Helvetica" size="1"><b>
This <a href="http://www.response-o-matic.com">contact form</a> was created by Freedback.
</b></font></center>

i zmieniamy "Submit Form" na "Wyślij"

<input type="submit" value="[b] Submit Form [/b]" />

Teraz możemy wkleić gotowy kod na naszą stronę www bądź bloga i cieszyć się funkcjonalnym formularzem!
Jeżeli będziemy chcieli edytować nasz formularz w przyszłości, musimy wejść na stronę https://www.response-o-matic.com/ i zalogować się (po lewej stronie). Widzimy teraz wszystkie nasze formularze, które możemy kasować, edytować etc.

EMAIL ME FORM

1. Wchodzimy na stronę http://www.emailmeform.com/v-signup.html

2. Wpisujemy kolejno:
First Name - imię
Last Name - nazwisko
Username - nick
Password - nasze hasło
Retype Password - powtarzamy hasło
Your email - nasz adres e-mail

3. Klikamy Sign Up.

4. Odbieramy pocztę e-mail i klikamy w link aktywacyjny. Otwiera nam się strona informująca o tym, że wszystko dobrze poszło Klikamy w zielony napis "here".

5. Ignorujemy nudny i długi tekst, w którym przewija się znaczek dolara i przenosimy nasz wzrok na stronę prawą. Uważnie obserwujemy panel i szukamy w nim zielonego plusika, obok którego napisane jest "Create a New Form". Klikamy w ten napis.

6. Objaśnienie funkcji:
Web form Name - nazwa formularza. Możemy zmienić, ale nie musimy.
Recipients Emails - odbiorca wiadomości. tutaj najlepiej nic nie zmieniać
Spam Email address - na ten adres e-mail będą wysyłane wiadomości zawierające spam. Możemy podać adres e-mail kolegi/koleżanki, którego/którą chcemy wkurzyć ]:> (czytaj: swój adres e-mail bądź specjalnie utworzony).
Thank you page - strona do której automatycznie wraca się po wysłaniu maila. Najlepiej podać adres stronki, na której znajduje się formularz (np. www.strona.pl/kontakt.html)
Number of fields - liczba pól. Domyślnie cztery (nick, e-mail, temat, treść). Może być więcej lub mniej.

7. Kiedy wszystko uzupełnimy, klikamy Next.

8. Mamy nasze pola! Zmieniamy ich nazwy na polskie (Field Name). Pozostałe kolumny to:
Typ pola (krótki tekst, długi itd. - opisywałam je przy Response-O-Matic)
Czy wymagane? Czyli wypełnienie jest konieczne czy nie?
Validation to mniej więcej dozwolone znaki, tylko cyfry (przydatne przy numerach GG), tylko litery (kiedy pole nie wymaga wpisywania cyfr), adres e-mail (wymagana @) oraz none - takie nic (wszystkie znaki dozwolone). Zostawiamy to przy nicku (imieniu), temacie i treści.

9. Klikamy Next dwa razy pod rząd. Mamy opcje wyglądu formularza. Czcionka, kolor tekstu, tła, opis formularza, (cztery kolejne pola zostawiamy puste), w Send Button Name wpisujemy Wyślij, w następnym polu wybieramy jego położenie (left - z lewej, middle - na środku, right - z prawej), kolejne pole to przycisk czyszczenia. Nazywamy go albo Reset, albo Wyczyść (lub coś innego wedle uznania). Anty spam - polecam None. Klikamy Next.

10. W "Retrieve Name from" wybieramy drugą opcję i klikamy ponownie Next.

11. Mamy nasz formularz! Tak wygląda. Super, no nie? Klikamy Finish, a następnie Get the HTML Code.

12. Widzimy nasz kodzik HTML. Wymaga niestety modyfikacji, którą teraz opiszę. Tak wygląda mój kod:

<form method="post" action="http://www.emailmeform.com/fid.php?formid=554271" enctype="multipart/form-data" accept-charset="UTF-8"><table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"><tr><td><font face="Verdana" size="2" color="#000000"></font> <div style="" id="mainmsg"> </div></td></tr></table><br><table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Name</font></td> <td><input type="text" name="FieldData0" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Email Address</font></td> <td><input type="text" name="FieldData1" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Subject</font></td> <td><input type="text" name="FieldData2" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Message</font></td> <td><textarea name="FieldData3" cols="60" rows="10"></textarea><br> </td></tr><tr> <td colspan="2"></td></tr><tr> <td> </td> <td align="right"><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit">    <input type="reset" class="btn" value="  Clear  " name="Clear"></td></tr><tr><td colspan=2 align="center"><br></td></tr></table></form>

Usuwamy z niego bgcolor="#kolor rgb" (uważnie poszukajcie i usuńcie wszystkie!). Kod wymaga tylko tej zmiany.

13. Kiedy będziemy chcieli edytować nasz formularz, wchodzimy na stronę http://www.emailmeform.com/ i logujemy się (z prawej strony). Aby edytować lub skasować nasz formularz, klikamy w "View Your Forms List" również z prawej strony. Później Edit.

Mam nadzieję, że mój cenny czas poświęcony na pisanie tego tutoriala nie został zmarnowany i komuś się ta instrukcja przyda

PS: tak nawiasem mówiąc, to osobiście bardziej polecam drugą stronę (EmailMeForm), jest dużo więcej opcji itd.

Ostatnio edytowany przez Soiree (2010-01-23 19:00:33)