Walidacja numeru telefonu w formularzach Onepage (onepage.io) bez potwierdzenia SMS.
699 PLN
Технічне завдання (ТЗ)
Проєкт: Валідація номера телефону у формах Onepage (onepage.io) без SMS-підтвердження
1) Контекст і проблема
Ми використовуємо конструктор лендингів/сайтів Onepage (onepage.io). На сайті є форма збору лідів, де користувач вводить номер телефону.
Поточна проблема: форма дозволяє відправити заявку з очевидно некоректними телефонами (наприклад, 0000000000, 12, 123, або будь-якою випадковою послідовністю цифр), навіть якщо обрано код країни +49 (Німеччина). Це призводить до “сміттєвих” лідів і марної роботи менеджерів.
Саппорт Onepage пропонує SMS-верифікацію як окрему платну функцію (підписка + оплата за кожну SMS). Для нашого сценарію (перший контакт, ринок Німеччини) це надто агресивно, погіршує конверсію та створює зайве тертя.
Нам потрібне НЕ підтвердження існування номера через SMS, а коректна технічна перевірка формату номера прямо у формі (client-side validation).
2) Ціль / Результат
Реалізувати перевірку (валідацію) номера телефону у формі Onepage так, щоб:
Неможливо було відправити форму з явно некоректним номером.
Користувач бачив зрозуміле повідомлення про помилку (DE/EN, бажано DE).
У разі помилки відправка форми блокується (submit prevent).
Рішення не повинно вимагати SMS-підтвердження.
3) Середовище / Платформа
Сервіс: Onepage (onepage.io)
Реалізація очікується через:
Custom Code / вставка власного JavaScript на сторінку (глобально або на конкретній сторінці), або
HTML embed / Custom Code-блок (якщо потрібно).
Доступу до backend Onepage немає. Потрібна клієнтська (front-end) валідація.
4) Обсяг робіт
4.1. Аналіз
Перевірити, як Onepage рендерить форму (HTML структура, селектори полів, submit button, події).
Визначити стабільний спосіб “підхопитися” на подію submit:
form.addEventListener('submit', ...)абоперехоплення кліку на кнопці submit, або
інші події, які реально працюють у Onepage.
4.2. Реалізація валідації
Потрібно реалізувати 2 рівні перевірки:
Рівень 1 — базова санітизація та довжина
Поле “Телефон” має приймати лише цифри, пробіли,
+,(,),-.Перед перевіркою прибрати всі символи, крім цифр та
+(для логіки).Заборонити введення очевидного сміття:
дуже короткі номери (наприклад < 10 цифр),
номер з одних нулів (наприклад
0000000000,+49 0000000000),повторювані патерни типу
1111111111,2222222222(опційно, але бажано).
Рівень 2 — перевірка формату телефонів для Німеччини
Цільова країна — Німеччина (+49).
Валідація має працювати в одному з форматів:
+49XXXXXXXXXX...(між 10 і 15 цифр загалом за E.164)0XXXXXXXXXX...(локальний формат)
Важливо: німецькі номери можуть мати різну довжину (мобільні/стаціонарні), тому логіка має бути адекватною, не “перерізати” реальні номери.
Рекомендований підхід (переважний):
використати бібліотеку Google libphonenumber або легшу обгортку/порт, яка дозволяє:
визначати валідність номера для регіону
DE,форматувати номер у E.164,
обробляти
+49та локальні0....
Альтернативний підхід (якщо бібліотеку неможливо підключити):
використати regex + правила довжини (але це менш надійно).
мінімум: довжина (10–15 цифр) + заборона all zeros + заборона “занадто коротко”.
4.3. UX-поведінка
Якщо номер невалідний:
блокувати submit,
показувати повідомлення біля поля або попап/inline alert.
Повідомлення (мінімум німецькою):
DE: „Bitte geben Sie eine gültige Telefonnummer ein.“
EN (опціонально): “Please enter a valid phone number.”
Підсвічування поля червоною рамкою (CSS клас або inline).
При виправленні номера — помилка зникає.
4.4. Додатково (бажано)
Маска вводу або “розумне поле” з країною:
Наприклад, через intl-tel-input (якщо реально інтегрується у Onepage без конфліктів).
Автоформатування:
приводити номер до E.164 перед відправкою (якщо можливо), або хоча б зберігати “чисті цифри”.
5) Вимоги до сумісності
Має працювати в актуальних браузерах: Chrome, Safari, Firefox, Edge.
Має працювати на мобільних (iOS/Android).
Не ламати інші поля/форми/скрипти на сторінці.
6) Обмеження та ризики (важливо врахувати)
Onepage може генерувати динамічні ID/класи. Потрібні стабільні селектори або логіка пошуку елемента:
по label тексту,
по placeholder,
по типу
input[type="tel"],або за структурою блоку.
Можлива наявність кількох форм на сторінці — потрібно чітко прив’язатись до потрібної.
Скрипт має коректно працювати навіть якщо форма завантажується асинхронно (може знадобитися
MutationObserverабо повторний пошук елементів).
7) Тест-кейси (Acceptance Tests)
Валідація повинна:
✅ Пропускати:
+49 151 234567890151 23456789реалістичні DE номери (мобільні/стаціонарні), якщо вони валідні за libphonenumber.
❌ Блокувати:
012123450000000000+49 0000000000+49 1111111111(бажано)довільний набір з 5–8 цифр.
8) Очікувані артефакти (що передати замовнику)
Готовий JS-код для вставки в Onepage (з інструкцією “куди вставити”).
Якщо використовуються бібліотеки:
посилання на CDN або файл(и),
інструкція підключення (порядок, залежності).
Інструкція налаштування:
де саме у Onepage вставити код (global/page/section),
як перевірити, що працює.
Короткий документ з селекторами, які використовуються, і логікою пошуку форми/поля.
(Опціонально) Мікро-CSS для стилів помилки.
9) Критерії приймання (Definition of Done)
Робота вважається виконаною, якщо:
неможливо відправити форму з номером
0000000000або 2–5 цифрами,коректні німецькі номери проходять,
користувач бачить зрозумілу помилку,
рішення працює стабільно на desktop і mobile,
є інструкція по впровадженню в Onepage.
10) Додаткова інформація
Лідів у місяць: до ~200.
SMS-верифікацію використовувати НЕ плануємо (через конверсію та чутливість ринку Німеччини).
Мета: мінімізувати сміттєві заявки без підвищення тертя.
11) Питання до виконавця (відповісти у пропозиції)
Чи маєте досвід інтеграцій в Onepage або подібні конструктори?
Який підхід пропонуєте: libphonenumber чи regex?
Чи зможете зробити так, щоб номер нормалізувався до E.164?
Як забезпечите стабільність при зміні DOM/оновленні Onepage?
-
1 dzień636 PLN1 dzień636 PLN
✋ Witaj! Jesteśmy firmą IT dZENcode.
Realizujemy walidację telefonów w Onepage bez SMS: libphonenumber, +49 i lokalny 0…, normalizacja w E.164, blokada submit i błędy DE, opierając się na doświadczeniu zespołu, najlepszych praktykach i własnych rozwiązaniach.
Czy można podać link do strony Onepage z formularzem?
Czy dopuszczalne jest podłączenie libphonenumber lub intl-tel-input przez CDN?
Szczegółowe informacje o naszych usługach i stawkach znajdziesz na stronie:
Freelancehunt.
Zobacz – potem omówimy szczegóły pracy, pisz, gdy będziesz gotowy.
…
Ostateczny koszt ustalany jest dopiero po wyjaśnieniu zakresu i wymagań.
___________________
Z poważaniem,
Menadżer dZENcode
Nasze mocne strony:
💎 10+ lat świadczymy usługi IT: Outsourcing, Outstaffing
🔥 90+ pracowników etatowych
🚀 Projekty „od zera” i na wsparcie
⚙️ SLA i wsparcie po produkcji
✅ Umowa z firmą, gwarantowany wynik!
🔥 250+ publicznych opinii od 2015 roku.
-
3 dni848 PLN3 dni848 PLN
Cześć. Jestem zainteresowany realizacją walidacji numerów telefonów dla formularzy na Onepage. To ważne zadanie, ponieważ poprawna walidacja zwiększy jakość leadów i zmniejszy obciążenie menedżerów. Mój sposób działania: wykorzystać bibliotekę libphonenumber dla dokładności, ponieważ dobrze działa z niemieckimi numerami. Również zrealizuję podstawową i dodatkową walidację, aby użytkownicy otrzymywali zrozumiałe komunikaty o błędach. Jeśli chodzi o integracje w Onepage, mam doświadczenie w pracy z podobnymi konstruktorami. Dla stabilności przy zmianach DOM wykorzystam podejścia, które nie zależą od dynamicznych selektorów. Oceniam projekt na 200 EUR, z terminami około 2-3 dni z uwzględnieniem bufora. Jakie masz pytania?
-
1 dzień636 PLN
265 1 dzień636 PLNDzień dobry.
Z podobnymi zadaniami pracowałem w Webflow, Tilda i innych konstruktorach, gdzie nie ma dostępu do backendu i wszystko rozwiązuje się przez logikę po stronie klienta. W Państwa przypadku zrobiłbym rozwiązanie przez libphonenumber w połączeniu z własną logiką przechwytywania submit, a nie przez prosty regex. Dla rynku niemieckiego da to znacznie dokładniejszą weryfikację, szczególnie z różną długością numerów.
Mogę zrealizować normalizację do E.164 przed wysłaniem formularza oraz zablokować submit z poprawnym komunikatem po niemiecku. Pole będzie podświetlane, błąd zniknie po poprawieniu. Jeśli to konieczne, dodamy lekką maskę lub intl-tel-input bez konfliktów ze skryptami Onepage.
Stabilność zapewnimy przez wyszukiwanie elementów według typu pola i kontekstu formularza, a nie według dynamicznych ID. W razie potrzeby użyjemy MutationObserver, aby skrypt poprawnie "przechwytywał" formularz nawet przy asynchronicznym renderowaniu.
Proszę powiedzieć, czy na stronie jest jeden formularz, czy kilka, i czy jest możliwość wstawienia kodu globalnie dla całej strony? To wpłynie na sposób powiązania.
-
1 dzień615 PLN
667 5 0 1 dzień615 PLNWitam! Zainteresował mnie Twój projekt dotyczący walidacji telefonu w formularzach na Onepage.
Mam doświadczenie w integracji niestandardowego JavaScriptu w kreatorach stron (przechwytywanie submit, praca z dynamicznym DOM, MutationObserver, cross-browserowość).
Proponuję rozwiązanie: Walidacja przez libphonenumber (dla Niemiec), blokowanie wysyłki przy niepoprawnym numerze, powiadomienia po niemiecku oraz podświetlenie pola, normalizacja numeru w formacie E.164 (+49…), filtrowanie 0000000000;
Rozwiązanie będzie działać bez SMS-ów, stabilnie na desktopie i urządzeniach mobilnych, bez konfliktów z innymi skryptami.
Jestem gotowy szybko zrealizować i dostarczyć instrukcję wdrożenia.
-
3 dni610 PLN
533 28 7 1 3 dni610 PLNGotowy do wykonania.
Doświadczenie w Web Developmentzie ponad 12+.
Przykłady prac https://koder.pp.ua/portfolio/
-
2 dni848 PLN
976 4 0 2 dni848 PLNDzień dobry!
Nazywam się Dmitro, firma King Kong Web.
Zapoznałem się z Twoim TZ dotyczącym Onepage. Możemy zrealizować walidację numeru telefonu bez SMS, aby formularz nie był wysyłany z "śmieciowymi" numerami, a użytkownik od razu widział błąd.
Zrealizujemy to poprzez wstawienie niestandardowego JavaScriptu do Onepage: podłączymy się do zdarzenia submit formularza, sprawdzimy numer na 2 poziomach (podstawowa walidacja + zasady dla DE/+49), w przypadku błędu zablokujemy wysyłkę i pokażemy komunikat po niemiecku. Dodamy również podświetlenie pola, a przy poprawieniu numeru błąd zniknie.
Co do podejścia: optymalnie wykorzystać libphonenumber (przez CDN), aby poprawnie walidować niemieckie numery i, w razie potrzeby, znormalizować je do formatu E.164 przed wysyłką. Jeśli Onepage nie pozwoli stabilnie podłączyć biblioteki — zrobimy niezawodny fallback na zasady długości/wzorców (regex + logika przeciwko 0000/zbyt krótko).
… Po wykonaniu przekażemy gotowy kod do wstawienia, krótką instrukcję, gdzie dokładnie dodać w Onepage, jakie selektory używamy i jak sprawdzić działanie na desktopie/mobilnie.
Jesteśmy gotowi do działania od razu. Jeśli to konieczne — prześlij link do strony z formularzem lub zrzut/strukturę HTML, aby szybko dobrać najstabilniejszy sposób podłączenia.
-
5 dni636 PLN
890 1 0 5 dni636 PLNDzień dobry, Walerio.
Wybieram libphonenumber zamiast regex.
To zapewni dokładną weryfikację niemieckich numerów (+49), normalizację do E.164 oraz blokowanie fałszywych numerów.
Zintegruję przez Custom Code, używając MutationObserver dla stabilności z dynamicznym DOM.
Użytkownicy zobaczą zrozumiałe komunikaty o błędach w języku niemieckim, a wysyłka będzie blokowana do momentu poprawienia danych.
Otrzymasz gotowy kod oraz instrukcję, która zapewni czystość bazy bez pogorszenia konwersji.
… Jestem gotów dostarczyć pełny kod oraz instrukcje do integracji w Onepage.
A także, zamiast podstawowej walidacji, proponuję rozszerzyć funkcjonalność do inteligentnej maski wprowadzania numeru telefonu (na podstawie intl-tel-input).
To znacznie poprawi UX, automatycznie formatując numer podczas wprowadzania i podświetlając poprawny format dla Niemiec.
Można również dodać automatyczne rozpoznawanie kraju na podstawie prefiksu, co ułatwi wprowadzanie dla użytkowników z innych krajów w przyszłości.
-
5 dni636 PLN
1309 6 1 5 dni636 PLNCześć,
Mogę zaimplementować walidację numeru telefonu dla Twoich formularzy Onepage. Mam doświadczenie w walidacji po stronie klienta w JavaScript, pracy z kreatorami formularzy oraz manipulacji DOM w dynamicznych środowiskach.
Stworzę skrypt walidacyjny, który zablokuje przesyłanie nieprawidłowych niemieckich numerów telefonów, takich jak 0000000000, numery krótkie i powtarzające się wzory, zweryfikuje zarówno formaty +49, jak i lokalny 0, korzystając z biblioteki Google libphonenumber dla dokładnej walidacji niemieckich numerów, wyświetli komunikaty o błędach w języku niemieckim z czerwonym obramowaniem, znormalizuje prawidłowe numery do formatu E.164 przed przesłaniem oraz będzie działać niezawodnie w przeglądarkach na komputerach stacjonarnych i urządzeniach mobilnych.
Jeśli chodzi o doświadczenie z Onepage.io, nie pracowałem bezpośrednio z Onepage.io, ale mam doświadczenie w integracji niestandardowego JavaScriptu w platformach takich jak Webflow i Wix, gdzie występują podobne wyzwania związane z dynamicznymi identyfikatorami i asynchronicznym ładowaniem formularzy. Podejście jest podobne, wykorzystując stabilne selektory, MutationObserver do asynchronicznego ładowania oraz delegację zdarzeń.
Zalecam użycie libphonenumber przez CDN w lekkiej wersji, takiej jak google libphonenumber js. Jest to bardziej niezawodne niż regex dla niemieckich numerów, które mają zmienną długość. Regex może działać jako rozwiązanie awaryjne, ale nie uchwyci wszystkich przypadków brzegowych.
…
W przypadku normalizacji E.164, libphonenumber może znormalizować prawidłowe numery do formatu E.164 przed przesłaniem formularza, co pomaga w spójności danych CRM.
Dla stabilności DOM użyję wielu selektorów awaryjnych, takich jak typ input tel, tekst podpowiedzi i tekst etykiety, oraz wdrożę MutationObserver, aby ponownie dołączyć walidację, jeśli formularz załadowany zostanie asynchronicznie. Przetestuję również wiele formularzy na stronie i skieruję się do właściwego.
Dostarczę gotowy do użycia kod JavaScript z linkami do biblioteki CDN, instrukcjami integracji, dokumentacją selektorów oraz opcjonalnym CSS do stylizacji błędów.
Czas realizacji: 1 tydzień
Koszt: 400 do 500 USD
Jestem dostępny, aby rozpocząć pracę natychmiast.
Youssef
-
2 dni636 PLN
314 2 dni636 PLNCześć, napisz na priv
-
2 dni636 PLN
95862 1272 1 10 2 dni636 PLNWitam. Pracuję z JavaScript od ponad 8 lat. Jestem gotowy do skonfigurowania walidacji inputu. Proszę o kontakt.
-
3 dni636 PLN
726 9 1 3 dni636 PLNCześć! Dokładnie przeanalizowałem twój projekt i jestem gotów do jego realizacji. Porozmawiajmy o szczegółach, aby jak najlepiej go wykonać.
-
2 dni636 PLN
1728 22 0 2 dni636 PLNDzień dobry. Podobne zadania robiłem, ale nie na onepage. Funkcja wstawiania własnego kodu jest dostępna w płatnych wersjach - dlatego nie mogę czegoś sprawdzić. Czy się uda, nie powiem. Ale doświadczenie w ogóle mam i osobiście muszę się rozgryźć "na miejscu". Pasuje - proszę o kontakt. Robiłem: Skrypt unifikacji numerów mobilnych - jest w portfolio.
-
1 dzień636 PLN
309 1 dzień636 PLNCześć, Valerii Shcherbakov.
Sprawdziłem twoje wymagania dokładniej.
Mogę w pełni zbudować sekcję używając biblioteki (libphonenumber lub innej) oraz kilku niestandardowych funkcji.
W tym przypadku nie muszę zmieniać DOM w tym celu.
Dodam tylko nową sekcję (na błąd).
Mam nadzieję na zawarcie umowy z tobą.
Dziękuję.
-
1 dzień636 PLN
12490 600 0 1 dzień636 PLNDobry wieczór. Wasze zadanie jest mi całkowicie zrozumiałe. Wiem, jak rozwiązać wasz problem, napiszę cały potrzebny funkcjonalność z odpowiednią walidacją. Numery będą poprawne, wszystko jak chcecie...
Zrobię dodatkowe sprawdzenia, będziecie bardzo zadowoleni z rezultatu!!!
Czekam na was w wiadomościach prywatnych.
-
1 dzień636 PLN
1082 7 0 1 dzień636 PLNGotowa wykonać to od razu, oddam kod za godzinę. Doświadczenie ponad 4 lata
odpowiedzi
1) Tak. Podejście, które stosuję, jest uniwersalne dla wszelkich konstruktorów no-code
2) Zdecydowanie libphonenumber-js jako główne podejście.
3) Tak, to możliwe
4) Kaskadowe selektory: skrypt szuka pola nie po jednym ID czy klasie, ale po łańcuchu z 7 selektorów (typ tel, atrybuty name, placeholder). Nawet jeśli Onepage zmieni jeden — zadziała inny.
p/s napisz w l.s., już mam gotowe rozwiązanie
-
1 dzień636 PLN
3475 32 0 1 dzień636 PLNDobry wieczór, wykonam zadanie w ciągu 1 godziny, jeśli jesteś zainteresowany, pisz, będę zadowolony ze współpracy
upd: już mam gotowy kod, tylko zintegrować go z twoim formularzem, potrzebny link
-
2 dni636 PLN
9972 117 0 2 dni636 PLNWitam.
Jestem gotowy się tym zająć. Pisz, omówimy.
1. Mam doświadczenie z konstruktorami.
2. Można spróbować przez regex.
3. Tak.
4. To pytanie wymaga bardziej szczegółowej odpowiedzi.
-
Підготувала скрипт, напишіть в лс, дам посилання на інструкції ua і de
-
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Wsparcie i rozwój strony internetowej firmy sprzątającej
75 PLN
Szukam programisty / webmastera do długoterminowego wsparcia i rozwoju strony internetowej firmy sprzątającej. Strona: https://donely.ca O projekcie DoneLy Home Services — firma świadcząca usługi sprzątania w Kanadzie, która aktywnie się rozwija i rozszerza zasięg działalności.… Javascript & Typescript, Programowanie stron internetowych ∙ 1 dzień 15 godzin temu ∙ 59 ofert |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 2 dni 16 godzin temu ∙ 27 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 4 dni 6 godzin temu ∙ 32 oferty |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 197 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 9 dni 13 godzin temu ∙ 119 ofert |
Animacje Gsap
82 PLN
Dzień dobry. Trzeba wprowadzić poprawki w bieżącym projekcie. Potrzebny specjalista, który dobrze pracuje na gsap/lenis Trzeba zrobić animację kart. Szczegółowe wymagania tutaj:… Javascript & Typescript, Programowanie stron internetowych ∙ 9 dni 19 godzin temu ∙ 21 ofert |
Niemcy