Validation of phone number in Onepage forms (onepage.io) without SMS confirmation
Технічне завдання (ТЗ)
Проєкт: Валідація номера телефону у формах 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 day172 USD1 day172 USD
✋ Hello! We are the IT company dZENcode.
We implement phone validation in Onepage without SMS: libphonenumber, +49 and local 0..., normalization in E.164, blocking submit and errors DE, based on the team's experience, best practices, and our own developments.
Can you provide a link to the Onepage with the form?
Is it acceptable to connect libphonenumber or intl-tel-input via CDN?
You can find detailed information about our services and rates on the website:Freelancehunt.
Take a look – we will discuss the details of the work further, write when you are ready.
…
The final cost is formed only after clarifying the volume and requirements.
___________________
Best regards,
Manager of dZENcode
Our strengths:
💎 10+ years providing IT services: Outsourcing, Outstaffing
🔥 90+ in-house specialists
🚀 Projects "from scratch" and for support
⚙️ SLA and post-production support
✅ Contract with the company, guaranteed result!
🔥 250+ public reviews since 2015.
-
3 days229 USD3 days229 USD
Hello. I am interested in implementing phone number validation for forms on Onepage. This is an important task, as proper validation will improve lead quality and reduce the workload on managers. My approach: to use the libphonenumber library for accuracy, as it works well with German numbers. Additionally, I will implement primary and secondary validation so that users receive clear error messages. Regarding integrations in Onepage, I have experience working with similar builders. For stability during DOM changes, I will use approaches that do not rely on dynamic selectors. I estimate the project at 200 EUR, with a timeline of about 2-3 days considering a buffer. What questions do you have?
-
1 day172 USD
265 1 day172 USDGood day.
I have worked on similar tasks in Webflow, Tilda, and other builders where there is no access to the backend and everything is resolved through client-side logic. In your case, I would implement a solution using libphonenumber in conjunction with my own submit interception logic, rather than using a simple regex. For the German market, this will provide a much more accurate validation, especially with varying lengths of numbers.
I can implement normalization to E.164 before form submission and block the submit with a correct message in German. The field will be highlighted, and the error will disappear after correction. If needed, we can add a light mask or intl-tel-input without conflicts with Onepage scripts.
We will ensure stability by searching for elements by field type and form context, rather than by dynamic IDs. If necessary, we will use MutationObserver to ensure the script correctly "catches" the form even during asynchronous rendering.
Please let me know if there is one form on the page or several, and if there is a possibility to insert the code globally for the entire site? This will affect the binding method.
-
1 day166 USD
667 5 0 1 day166 USDHello! I am interested in your project for phone validation in forms on Onepage.
I have experience integrating custom JavaScript into website builders (intercepting submit, working with dynamic DOM, MutationObserver, cross-browser compatibility).
I propose a solution: Validation through libphonenumber (for Germany), blocking submission for incorrect numbers, notifications in German and highlighting the field, normalizing the number to E.164 format (+49…), filtering 0000000000;
The solution will work without SMS, reliably on desktop and mobile, without conflicts with other scripts.
I am ready to implement it quickly and provide instructions for integration.
-
3 days165 USD
533 28 7 1 3 days165 USDReady to perform.
Experience in Web Development over 12+.
Examples of work https://koder.pp.ua/portfolio/
-
2 days229 USD
976 4 0 2 days229 USDGood day!
My name is Dmytro, from King Kong Web.
I have reviewed your technical specifications for Onepage. We can implement client-side validation of the phone number without SMS, so that the form is not submitted with "junk" numbers, and the user immediately sees an error.
We will achieve this by inserting custom JavaScript into Onepage: we will hook into the form's submit event, check the number at two levels (basic validation + rules for DE/+49), and in case of an error, we will block the submission and show a message in German. We will also add highlighting to the field, and when the number is corrected, the error will disappear.
Regarding the approach: it is optimal to use libphonenumber (via CDN) to correctly validate German numbers and, if necessary, normalize them to E.164 format before submission. If Onepage does not allow for stable integration of the library, we will implement a reliable fallback based on length/pattern rules (regex + logic against 0000/too short).
… After completion, we will provide the ready code for insertion, a brief instruction on where exactly to add it in Onepage, which selectors we are using, and how to check the functionality on desktop/mobile.
We are ready to start immediately. If needed, please send a link to the page with the form or a screenshot/HTML structure to quickly determine the most stable way to connect.
-
5 days172 USD
893 1 0 5 days172 USDGood day, Valery.
I choose libphonenumber instead of regex. This will ensure accurate verification of German numbers (+49), normalization to E.164, and blocking of fakes. I will integrate it through Custom Code, using MutationObserver for stability with the dynamic DOM.
Users will see clear error messages in German, and submission will be blocked until the data is corrected. You will receive the finished code and instructions that guarantee the cleanliness of the database without degrading conversion.
I am ready to provide the complete code and instructions for integration into Onepage.
Additionally, instead of basic validation, I suggest expanding the functionality to an intelligent input mask for the phone number (based on intl-tel-input). This will significantly improve UX by automatically formatting the number during input and highlighting the correct format for Germany. It is also possible to add automatic country detection by prefix, which will simplify input for users from other countries in the future.
-
5 days172 USD
1309 6 1 5 days172 USDHi,
I can implement phone number validation for your Onepage forms. I have experience with JavaScript client side validation, working with form builders, and DOM manipulation for dynamic environments.
I will create a validation script that blocks submission of invalid German phone numbers like 0000000000, short numbers, and repeated patterns, validates both +49 and local 0 formats using Google libphonenumber library for accurate German number validation, shows error messages in German with red border highlighting, normalizes valid numbers to E.164 format before submission, and works reliably on desktop and mobile browsers.
Regarding Onepage.io experience, I haven't worked directly with Onepage.io but I have experience integrating custom JavaScript into platforms like Webflow and Wix where similar challenges exist with dynamic IDs and async form loading. The approach is similar using stable selectors, MutationObserver for async loading, and event delegation.
For the approach I recommend using libphonenumber via CDN lightweight version like google libphonenumber js. This is more reliable than regex for German numbers which have variable length. Regex can work as fallback but won't catch all edge cases.
…
For E.164 normalization, libphonenumber can normalize valid numbers to E.164 format before form submission which helps with CRM data consistency.
For DOM stability I'll use multiple fallback selectors like input type tel, placeholder text, and label text, and implement MutationObserver to reattach validation if the form reloads asynchronously. I'll also test for multiple forms on the page and target the correct one.
I will deliver ready to use JavaScript code with CDN library links, integration instructions, selector documentation, and optional CSS for error styling.
Timeline: 1 week
Cost: $400 to $500 USD
I am available to start working immediately.
Youssef
-
2 days172 USD
314 2 days172 USDHello, write to me in private messages.
-
2 days172 USD
96304 1273 1 10 2 days172 USDHello. I have been working with JavaScript for over 8+ years. I am ready to set up input validation. Feel free to contact me.
-
3 days172 USD
726 9 1 3 days172 USDHello! I have carefully studied your project and am ready to start its implementation. Let's discuss the details for the best execution.
-
2 days172 USD
1728 22 0 2 days172 USDGood day. I have done similar tasks, but not on onepage. The function to insert your own code is available in paid versions - so I cannot check something. I cannot say whether it will work or not. But I do have experience overall, and I personally need to figure it out "on the spot." If it suits you, please reach out. I have done: Script for unifying mobile numbers - it is in my portfolio.
-
1 day172 USD
309 1 day172 USDHello, Valerii Shcherbakov.
I've checked your requirements more carefully.
I can fully build the section using library(libphonenumber or other) and a few custom functions.
In this case, I don't need to change DOM for this.
I will add new section(for error) only.
I hope to make contract with you.
Thank you.
-
1 day172 USD
12437 600 0 1 day172 USDGood evening. Your task is completely clear to me. I know how to solve your problem, I will write all the necessary functionality with the required validation. The numbers will be correct, everything as you want...
I will do additional checks, you will be very satisfied with the result!!!
I am waiting for you in personal messages.
-
1 day172 USD
1082 7 0 1 day172 USDReady to execute right now, I will deliver the code in an hour. Experience of more than 4 years.
Responses:
1) Yes. The approach I use is universal for any no-code builders.
2) Definitely libphonenumber-js as the main approach.
3) Yes, it is possible.
4) Cascade selectors: the script searches for the field not by a single ID or class, but by a chain of 7 selectors (type tel, attributes name, placeholder). Even if Onepage changes one — another will work.
P.S. Write to me in private messages, I already have a ready solution.
-
1 day172 USD
3475 32 0 1 day172 USDGood evening, I will complete the task in 1 hour, if you are interested, write to me, I will be happy to collaborate.
upd: I already have the ready code, just need to integrate it into your form, a link is needed.
-
2 days172 USD
9944 117 0 2 days172 USDHello.
I am ready to take it on. Write to me, we will discuss.
1. I have experience with constructors.
2. We can try using regex.
3. Yes.
4. This question requires a more detailed answer.
-
Підготувала скрипт, напишіть в лс, дам посилання на інструкції ua і de
-
Current freelance projects in the category Javascript and Typescript
Layout of a React/Tailwind component for printing an A4 formNeed to fix the UI/UX design and geometry of one React component (template for a clinical chart for printing in PDF) All functionality, data arrays, and logic are already written and working — only cosmetic changes are needed, correct margins and positioning of elements using… HTML & CSS, Javascript and Typescript ∙ 8 hours 4 minutes back ∙ 46 proposals |
I am looking for an experienced Full Stack developer to create a SaaS service for online stores.Service idea: The client uploads a link to their product feed (XML or CSV). The service automatically retrieves the products, takes their photos, and creates new advertising images based on ready-made templates: price, discount, logo, promotional tags, etc. There should also be… Javascript and Typescript, Web Programming ∙ 1 day 5 hours back ∙ 75 proposals |
Development of a WebGL/Three.js scene with generation and export of 3D (snapshot) from an animated shaderObject Description:The project is a designer table shaped like a realistic, deep whirlpool (a central vortex that smoothly transitions from a wide horizontal tabletop to a thin elegant leg). Task Essence:A WebGL / Creative Coding developer is required to create an interactive 3D… Javascript and Typescript, Web Programming ∙ 2 days 1 hour back ∙ 29 proposals |
Support and development of the cleaning company's website
20 USD
I'm looking for a web developer/webmaster for long-term support and development of a cleaning company's website. Website: https://donely.ca About the project DoneLy Home Services is a cleaning service company in Canada that is actively growing and expanding its geographical… Javascript and Typescript, Web Programming ∙ 4 days 3 hours back ∙ 63 proposals |
Development of a website according to the specifications on FramerYou need to create a website based on the parameters in the technical specification. https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Please provide your actual rate based on this design. HTML & CSS, Javascript and Typescript ∙ 5 days 4 hours back ∙ 28 proposals |