zapewnienie klientom prostych formularzy rejestracji i rejestracji na swojej stronie internetowej jest niezbędne do przechwytywania potencjalnych klientów, powiększania listy e-mailowej i zwiększenia ogólnej sprzedaży.
jest tylko jeden problem: HTML.
HTML5 to standardowy kod używany do pracy większości stron internetowych. To język Internetu. Ale jak każdy język programowania-od Javascript i jquery po PHP i CSS3-istnieje stroma krzywa uczenia się, zwłaszcza jeśli nigdy nie dotykałeś żadnego kodu.
nie bój się. Jesteśmy tu, by pomóc. Możemy być w stanie przekształcić cię w Billa Gatesa z dnia na dzień, ale z pomocą kilku przydatnych przykładów, pod koniec tego samouczka, będziesz gotowy do utworzenia podstawowego formularza rejestracyjnego za pomocą HTML w krótkim czasie.
Before zanim zaczniemy: chcesz uniknąć kłopotów związanych z używaniem HTML? Dzięki narzędziu do tworzenia formularzy, takim jak Paperform, możesz zaoszczędzić czas i stworzyć potężny, profesjonalny formularz rejestracyjny w ciągu kilku minut.
5 kroków do utworzenia formularza rejestracyjnego HTML
jesteś zajęty, wiemy. Jest bilion artykułów do przeczytania. Filmy Netflix do obejrzenia. Programy telewizyjne do binge. Przejdźmy więc od razu do pięciostopniowego przewodnika po tworzeniu formularza rejestracyjnego w HTML.
Krok 1. Wybierz Edytor HTML
podobnie jak potrzebujesz edytora tekstu do tworzenia dokumentu tekstowego, potrzebujesz edytora tekstu do tworzenia kodu HTML. Te narzędzia programistyczne konwertują dziwny i wspaniały kod, który wpisujesz do formularza rejestracyjnego.
na rynku dostępnych jest kilkadziesiąt (jeśli nie setki) edytorów HTML, z których większość oferuje podobne funkcje. Nie zanudzamy Cię szczegółami, ale jest kilka kluczowych rzeczy, które ułatwią Ci życie:
wykrywanie błędów: Automatycznie podświetl Błędy składniowe, aby ułatwić poprawki.
Autouzupełnianie: sugeruje odpowiednie elementy HTML na podstawie poprzednich zmian(oszczędza sporo czasu przy długim kodzie).
najważniejsze cechy składni: stosuje kolory do różnych znaczników HTML w oparciu o określone kategorie, aby ułatwić czytanie i sortowanie kodu.
Search and replace: Zlokalizuj i Nadpisz wszystkie wystąpienia konkretnego kodu, zamiast edytować każdą z nich osobno.
jeśli naprawdę wkraczasz w kodowanie, jest więcej funkcji, o które należy się martwić, ale to powinno cię pokryć w tym prostym formularzu rejestracyjnym.
wybór aplikacji jest kwestią osobistych preferencji. Chcesz czegoś, czego możesz użyć w swojej przeglądarce? Spróbuj Codepen. Barebones? Notepad++. Minimalistyczny interfejs użytkownika i intuicyjne pole wprowadzania? Wysublimowany tekst.
nasz współzałożyciel i rezydent code-geek, Dean, przysięga na VS Code.
” z nerdowskiego punktu widzenia VS Kod pasuje idealnie do stosu technologii Paperform i ma świetne wtyczki do zdalnego programowania, które uwielbiam. Jest również świetny do rzeczy HTML i super konfigurowalny, jeśli chcesz, aby Twoje narzędzia wyglądały ładnie, a jednocześnie miały wszystkie potrzebne funkcje.
nie ma potrzeby zbytnio się tym przejmować. Niestety, nie ma edytora HTML, który wygeneruje dla ciebie formularz rejestracyjny, bez względu na to, jak wielki może być. To wszystko twoja wina.
Krok 2. Utwórz plik HTML
następnym krokiem jest poinformowanie edytora tekstu, że zamierzasz utworzyć plik HTML. Zrób to, tworząc nowy plik, a następnie zapisując go za pomocą „.html” rozszerzenie.
na przykład „myform.html”. Po wskazaniu w edytorze, że tworzysz kod HTML, powinien on automatycznie wygenerować następujący kod:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Wskazówka: niektórzy edytorzy nie wypełniają automatycznie. W porządku. Wystarczy skopiować i wkleić powyższy kod i będzie to miało taki sam efekt.
Krok 3. Dodaj pola tekstowe i Utwórz formularz
Nadszedł czas, aby zacząć dodawać odpowiedni kod i przekształcić ten kod HTML barebones w Formularz rejestracyjny.
teraz, jeśli jesteś tu tylko po Kod, rozumiemy. Znajdziesz wszystko, czego potrzebujesz akapit lub dwa poniżej. Nie krępuj się. 👇
ale jeśli jesteś zainteresowany dowiedzieć się trochę o tym, co wprowadzasz faktycznie oznacza, pozwól nam szybki ogień HTML Tutorial interlude.
formularz HTML składa się z „elementów formularza”. Są to takie rzeczy, jak Pola tekstowe, przyciski radiowe, pola wyboru i rozwijane menu, które umożliwiają ludziom interakcję z Twoim aktywnym formularzem.
każdy element ma swój własny tag. Na przykład znacznik HTML <form>definiuje kod jako formularz, podczas gdy < textarea> może być użyty do zbierania danych wejściowych użytkownika.
te elementy są jak buty: zawsze przychodzą w parach. Wszystkie znaczniki, które chcesz umieścić w formularzu, muszą zostać wstawione pomiędzy znacznikami open< form > i closed< / form >.
dobra to są Sparknotes. Teraz dla kodu trzeba wprowadzić. Proszę.:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>ten (podstawowy) kod HTML wyświetli coś, co wygląda tak:
nie wygląda najlepiej na świecie, prawda? Ale hej, zapytałeś, jak utworzyć formularz rejestracyjny HTML. Nie strzelaj do posłańca.
znacznik < tr>mówi mu, aby uporządkował odpowiedzi w rzędzie, podczas gdy < td> (co oznacza dane tabeli) wskazuje, że chcesz uchwycić cokolwiek respondenci wpisują. W tym przypadku dodaliśmy dwa pola dla uproszczenia:
- wprowadź adres e-mail
- wprowadź hasła
nic nie stoi na przeszkodzie, aby dodać dodatkowe pola. Typy wprowadzania obejmują liczby i daty, kolory, a nawet obrazy. Wystarczy skopiować poniższy kod i wstawić żądany typ wejścia. W3Schools ma świetną listę, która cię poprowadzi.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Wskazówka: wybór właściwego typu wejścia ma kluczowe znaczenie. Informuje formularz, w jaki sposób tekst powinien być wyświetlany na ekranie. Na przykład, ostatnią rzeczą, jaką chcemy, to czyjeś hasło, aby było widoczne, gdy je wpisuje, więc używamy typu „password”, aby je ukryć.
Krok 4. Dodaj symbole zastępcze
symbol zastępczy to tekst wewnątrz pól formularza, który zachęca respondentów do udzielenia odpowiedzi w określony sposób. Jest używany głównie jako impuls we właściwym kierunku, ale jest również użyteczną strategią, aby Formy były bardziej angażujące.
Załóżmy na przykład, że dodajesz proste pole nazwy do formularza. Możesz wpisać ” insert name „i skończyć z tym, lub możesz poprawić rzeczy, pisząc” Bruce Wayne ” dla odrobiny stylu.
niezależnie od strategii, którą wybierzesz, dodanie symboli zastępczych do formularza rejestracyjnego HTML jest dość proste. Po wpisaniu typu wstaw „placeholder=” z tekstem, który chcesz wyświetlić.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>wpisanie tego kodu spowoduje utworzenie takiej formy:
ładne gołe kości. Ale to działa. Możesz utworzyć dodatkowe opcje dla klientów, aby wybrać ich dane demograficzne, takie jak wiek lub płeć, używając kodu podobnego do powyższego.
aby utworzyć pole płci, Wstaw następujące wartości do kodu (tuż nad ostatnim znacznikiem </table>). Dodamy również numer telefonu i rozwijaną opcję „temat”.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>spowoduje to zmianę pola danych w pola wyboru—jedno dla mężczyzny i jedno dla kobiety. Oto jak będzie wyglądać ostateczna wersja formularza rejestracyjnego HTML:
nie jest to dokładnie to, czego się spodziewałeś, prawda? Czy możesz sobie wyobrazić, że ktoś przeszukuje Twoją firmę w Google i spotyka się z tą stroną? Lub udostępnienie tego w mediach społecznościowych?
można śmiało powiedzieć, że tego rodzaju formularz logowania HTML nie zachęciłby nikogo do zarejestrowania się w Twojej firmie. Byłoby jedno przytłaczające jedno pytanie w ich głowach, które prawdopodobnie jest tym samym, co Ty. . .
Dlaczego mój formularz rejestracyjny HTML jest taki brzydki?
jak nie widać twój formularz HTML nie jest szczególnie atrakcyjny. To trochę brzydkie kaczątko. Co jest w porządku-nie wszyscy możemy być Margot Robbie – ale to nie do końca skłania ludzi do wypełnienia.
i w tym problem. Formularze HTML najczęściej są:
- nudny
- nudny
- trudny do dostosowania
- niezdarny do zarządzania
to wynika z prostej natury HTML. Jest to framework, który pomaga wypełnić niezbędne działania formularza, jednak na pewno nie zdobędzie żadnych nagród za wzornictwo.
łatwym rozwiązaniem tego problemu jest użycie dedykowanego narzędzia do tworzenia formularzy online, takiego jak Paperform, aby uniknąć ciężkiego podnoszenia HTML lub CSS. Możesz zbudować piękną rejestrację, formularze kontaktowe i pełne strony docelowe—wśród setek innych kreacji—w ciągu kilku minut bez jednej linii kodu.
ale może jesteś naprawdę nastawiony na całą sprawę z HTML (a może jesteś po prostu frajerem na karę). Tak czy inaczej, jeśli jesteś naprawdę zaangażowany w Formularz rejestracji HTML, możesz poprawić jego wygląd za pomocą CSS.
Krok 5: Edytuj formularz rejestracyjny HTML za pomocą CSS
CSS jest językiem programowania używanym do stylizowania dokumentu HTML. Dostosowuje sposób wyświetlania elementów HTML na ekranie i pozwala dostosować wszystko, od kolorów i krycia czcionek po dodanie obrazu tła lub połączenie z inną stroną ze znacznikiem <href>.
teraz byłabyś tu przez cały tydzień, gdybyśmy wymienili każdą właściwość CSS. Możemy to zrobić i spróbować zwiększyć SEO tej strony, ale to nie jest zabawa dla nikogo. Jeśli szukasz kompletnej listy, polecamy W3School ’ s CSS Reference list.
w trosce o nasz tutorial, damy nasz formularz rejestracji HTML szybki metamorfozę z CSS. Dostosujemy kolor tekstu, styl czcionki i dostosujemy marginesy, aby uzyskać wszechstronny (nieco) lepszy wygląd.
Tip Wskazówka: najczęstszym sposobem dodawania CSS do strony HTML jest zewnętrzny plik arkusza stylów połączony z elementem. Ten arkusz stylów jest tworzony w tym samym edytorze tekstu i zapisywany za pomocą „.css” rozszerzenie.
oto kod, którego użyjemy:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }i z tą magią stylizacji, twoja forma będzie wyglądać jak ta poniżej. To trochę jak uderzanie szminką w świnię, ale w niewielkim stopniu lepiej.
dlaczego formularz rejestracyjny HTML nie jest najlepszym rozwiązaniem
podczas nauki kodowania i tworzenia podstawowych formularzy rejestracyjnych jest zabawną umiejętnością do zdobycia, powinieneś poważnie rozważyć użycie ich do ważnych celów. Nie próbuj go bootstrap, to po prostu nie jest warte czasu, wysiłku i frustracji.
niezależnie od tego, czy potrzebujesz formularza kontaktowego dla swoich klientów, formularza logowania dla swojej firmy, czy formularza rejestracji uczniów na nowy rok szkolny, każde rozwiązanie przyklejone taśmą HTML i CSS będzie wyglądać matowo i nieprofesjonalnie-zwłaszcza jeśli nie masz żadnych wcześniejszych umiejętności kodowania.
na szczęście istnieje inny sposób tworzenia formularzy rejestracyjnych, który jest znacznie łatwiejszy, szybszy i bardziej intuicyjny: kreator formularzy online, taki jak Paperform. Dzięki naszej platformie easy możesz w ciągu kilku minut rozpocząć pracę z piękną, markową formą.
dzięki Paperform nie otrzymasz tylko podstawowego formularza HTML. Otrzymujesz dynamiczne doświadczenie, które umożliwia zbieranie dowolnego rodzaju danych, których potrzebujesz-od prostych danych kontaktowych po złożone obliczenia, a nawet przyjmowanie płatności. Nie potrzeba wiedzy projektowej.
ponadto dostosowanie jest łatwe. Dostosuj kolory i czcionki i Dostosuj interfejs użytkownika formularza za pomocą kilku kliknięć. Następnie, gdy będziesz zadowolony ze swojego nowego dzieła, możesz osadzić formularz na swojej stronie internetowej, hostować go online za darmo lub osadzić w swojej witrynie WordPress za pomocą naszej wtyczki WordPress.
aby pokazać, jakie to proste, przygotowaliśmy ciekawy formularz rejestracyjny:
nie masz ochoty na budowanie własnej kreacji? Do tego służy nasza biblioteka ponad 600 szablonów formularzy. Wybierz jeden z naszych szablonów rejestracji, dodaj go do swojego konta jednym kliknięciem i zacznij działać szybciej niż możesz wypić poranne espresso.
formularz rejestracyjny to dopiero początek tego, co możesz zrobić z Paperform. Wypróbuj go sam z naszym 14-dniowym bezpłatnym okresem próbnym—nie wymaga karty kredytowej.
formularz rejestracyjny w HTML FAQ
Czy mogę utworzyć formularz rejestracyjny w HTML bez CSS?
tak, ale to nie byłoby ładne. W rzeczywistości wyglądałoby to jak coś z pierwszych dni Microsoftu. Wcale nie.
Jak utworzyć formularz rejestracyjny HTML z przesłaniem obrazu?
aby dodać pole przesyłania obrazu, użyj typu wejściowego „plik”.
Czy mogę utworzyć formularz HTML bez użycia tabeli?
chociaż polecenie table pomaga w wyrównywaniu, łatwo jest utworzyć formularz bez niego. Wystarczy bezpośrednio wprowadzić dane wejściowe bez poleceń ” tr ” lub „td”.
czy istnieje możliwość skorzystania z formularza rejestracyjnego HTML do zakupów online
tak. Aby utworzyć formularz zakupów online, Dołącz pola zawierające dane kontaktowe, adres wysyłki, Identyfikator produktu i punkt dostawy. Pobieranie płatności staje się trudne, dlatego zalecamy proste formy płatności Paperform.
Jak utworzyć stronę logowania i rejestracji?
omówiliśmy, jak je utworzyć, ale odpowiedź jest z dużą ilością kodu i poprawek. O wiele łatwiej jest użyć dedykowanego kreatora formularzy online, takiego jak Paperform.