# Форма "Захват телефона"

<figure><img src="/files/8U5SenrvwLaclp1o1hUa" alt=""><figcaption><p>Форма "Захват телефона"</p></figcaption></figure>

В некоторых случаях есть необходимость запрашивать номер телефона на сайте, мы разработали для этого код, благодаря ему телефон будет попадать сразу в списки контакта пользователя, который запустил бота.

**Пример использования:**

На сайте запрашиваете телефон у клиента, а затем при нажатии на кнопку его перебрасывает в бот, номер телефона будет сохранен с список контакта пользователя платформы CleverApp.

Ниже представлен Html код, который можно установить на любой сайт, а так же на мини-лендинги созданные на нашей платформе CleverApp

```html
<html>
<body>
<style>

    #widget-form-phone {
        display: flex;
        padding: 3em;
        box-sizing: border-box;
        justify-content: center;
    }

    #widget-input-form-phone {
        color: rgb(0, 0, 0);
        border: 1px solid rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
        font-size: 16px;
        font-weight: 400;
        height: 50px;
        font-family: 'TildaSans', Arial, sans-serif;
        margin: 0;
        padding: 0 20px;
        line-height: 1.33;
        width: 300px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        -webkit-appearance: none;
        border-radius: 0;
    }

    #widget-button-form-phone {
        padding: 0px 15px;
        display: block;
        width: 250px;
        font-weight: 500;
        height: 50px;
        color: #fff;
        border-radius: 0px;
        border: none;
        font-size: 20px;
        font-family: 'TildaSans', Arial, sans-serif;
        cursor: pointer;
        background-color: #0056d3;
        outline: none;
        position: relative;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Add media query for screen width smaller than 600px */
    @media (max-width: 600px) {
        #widget-form-phone {
            flex-direction: column; /* Change flex direction to stack elements vertically */
            align-items: center; /* Center elements in the column */
        }

        #widget-input-form-phone {
            width: 100%; /* Full width for input in smaller screens */
            margin-bottom: 10px; /* Add some spacing between the input and button */
        }

        #widget-button-form-phone {
            width: 100%; /* Full width for button in smaller screens */
        }
    }

</style>
<form id="widget-form-phone" onsubmit="display()">
    <input id="widget-input-form-phone" type="text" placeholder="+7(000)000-00-00"
           pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$"
           autocomplete="off" title="Номер телефона только цифрами" required>
    <button id="widget-button-form-phone">
        <div style="display: none; position: relative; top: 1px; margin-right: 5px;" id="widget-telegram-svg-icone">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-telegram"
                 viewBox="0 0 16 16">
                <path
                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
            </svg>
        </div>
        <span style="vertical-align: top;">Забрать чек-лист</span>
    </button>
</form>
<script src="https://unpkg.com/imask"></script>
<script>
    var settings = {
        link: 'https://app.cleverapp.pro/w/D0i',
        telegram_icon: true,
    };

    var element = document.getElementById('widget-input-form-phone');
    var maskOptions = {
        mask: '+7 (000) 000-00-00',
        lazy: false
    }
    var mask = new IMask(element, maskOptions);

    function display() {
        var phone = document.getElementById("widget-input-form-phone").value;

        if (phone) {
            phone = cleanPhoneString(phone);

            var currentUrl = window.location.href;

            var paramsObject = getUtmParameters(currentUrl);

            if (paramsObject) {
                paramsObject = '&' + paramsObject;
            }

            var url = settings.link + '?' + "__phone__=" + phone + paramsObject;

            window.location.replace(url);
        }

        event.preventDefault();
    }

    function getUtmParameters(url) {
        var query = url.split('?')[1];
        if (!query) return '';

        var keyValuePairs = query.split('&');

        var utmParams = {};

        keyValuePairs.forEach(function (keyValue) {
            var keyValuePair = keyValue.split('=');
            var key = keyValuePair[0];
            var value = keyValuePair[1];
            if (key.startsWith('utm_')) {
                utmParams[key] = value;
            }
        });

        var utmParamsArray = Object.keys(utmParams).map(function (key) {
            return key + '=' + utmParams[key];
        });

        var utmParamsString = utmParamsArray.join('&');

        return utmParamsString ? utmParamsString : '';
    }

    function cleanPhoneString(phone)
    {
        phone = phone.replaceAll('(', '');
        phone = phone.replaceAll(')', '');
        phone = phone.replaceAll(' ', '');
        phone = phone.replaceAll('-', '');

        return phone;
    }
</script>
</body>
</html>
```

Изменить текст кнопки и ссылку на бота можно легло в самом коде, смотрите фото ниже

<figure><img src="/files/4W65c7hNXunnSMDQPrgY" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.cleverapp.pro/forma-zakhvat-telefona.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
