Красива форма підписки розбираємо html коди сервісів justclick і smartresponder, створюємо сайти,

Красива форма підписки: розбираємо html коди сервісів Justclick і Smartresponder

У моїй попередній статті я розібрала html код форми, отриманої нами за допомогою генератора форм. Але це - якась абстрактна форма, поки не пов'язана ні з яким сервісом. Зараз ми розберемо коди форм підписки, що надаються популярними сервісами Justclick і Smartresponder і скопіюємо в нашу форму елементи, які зв'яжуть її з сервісом і перетворять в повноцінну працюючу форму підписки.

Почнемо з сервісу Smartresponder. Ось код форми підписки (я очистила його від стилів, які сервіс вставляє прямо в код, і які нам не потрібні, тому що у нас свої стилі).

Цей код, в принципі, схожий на код, який ми вже розбирали. У чому відмінності?

На початку коду ви бачите тег . Це - скрипт на мові Java (такі скрипти можна вставляти прямо в код html), який відповідає за валідацію форми. Валідація - це перевірка інформації, яку користувач ввів в поля форми, до відправки форми. Це - дуже важлива річ, тому що при відсутності валідації відвідувач сайту може відправити, наприклад, порожню форму, яку ви отримаєте, або форму з абракадаброю замість email. Погодьтеся, це зовсім не те, чого ми хотіли б.

Тепер перейдемо до форми, яка в моєму коді розташована нижче скрипта.

Перший тег -

, тут він виглядає так:

Далі йдуть поля форми:

У всіх цих полів є атрибут type = hidden. Це - приховані поля, вони передають в Smartresponder службову інформацію. Скопіюйте їх і вставте в вашу форму після тега . Значення, помічені у мене Х, візьміть з коду форми, який вам видав сервіс для вашої конкретної розсилки.

Те ж саме з email - замінюємо значення name на field_email.

І останнє поле - це кнопка відправки

Тут теж замінюємо значення поля name на SR_submitButton.

У наступній статті ми займемося стилями css для нашої форми. А зараз я ще покажу вам код форми підписки з сервісу Justclick (теж очищений мною від зайвих стилів і скриптів).

Тут все більш примітивно. Скрипта валідації немає, і валідація завжди відбувається на стороні сервісу. Так що просто відкриваємо результат відправки форми в новому вікні, щоб відвідувачеві було легше повернутися на ваш сайт (нагадаю, що за це відповідає атрибут тега form target = "_ blank". Також в тег form потрібно скопіювати атрибут action з форми, яку вам видав сервіс для вашої конкретної розсилки. Заодно вжахнетеся, скільки там понаписувано коду, від якого ми залишили 4 рядки.

Схожі статті