Pull to refresh
0
0
Send message
По clip-path незаменимый инструмент — Clippy
Там всё блоку можно какую хочешь форму придать, удобно сделано
Всё намного проще. На самом деле, сообщение можно отправить прямо из JS на страничке. Не нужен node.js, не нужны запросы на сервер. Просто 20 коротких строк JS.
Понятно, что светить токен бота и чат айди — не кошерно. Однако, знать это всё равно неплохо.
При желании, функцию sendMsg (из этого скрипта) для отправки JSON данных методом POST по такой же схеме можно реализовать на php. Например, через curl.

const TOKEN = xxx; // токен от BotFather
const CHAT_ID = yyy; // chat_id для телеграм

var form = document.querySelector('.form'); // находим в DOM нашу лид-форму
form.addEventListener("submit", function (e) { // прослушиваем форму
    e.preventDefault(); // перехватываем стандартный ответ
    data = new FormData(this); // вместо serialize на jQuery
    sendMsg(data); // передаём данные из формы на отправку
})

function sendMsg(data) {
    var url = 'https://api.telegram.org/bot' + TOKEN + '/sendMessage'; // токен бота
    var body = JSON.stringify({ // склеиваем объект в JSON строку
        chat_id: CHAT_ID,
        parse_mode: 'Markdown', // разметка сообщений вкл (чтобы использовать *жирный текст*)
        text: '*Новый лид*\n' + data.get("title") + '\n\n*Имя:* ' + data.get("name") + '\n*Телефон:* ' + data.get("phone") + '\n*Откуда:* [' + window.location.href + '](' + window.location.href + ')'
    });
    var xhr = new XMLHttpRequest(); // инициализируем AJAX запрос
    xhr.open('POST', url, true); // отправляем наше сообщение методом POST на сервак телеги
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); // на всякий случай, оповестим телеграм, что отправили JSON
    xhr.send(body);
}

Разметка формы:
<form method="post" class="form">
    <input type="hidden" name="title" value="Есть вопросы?" />
    <input type="text" name="phone" placeholder="Телефон (+7 ...)"/>
    <input type="text" name="name" placeholder="Имя" />
    <button>БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ</button>
</form>
Во-первых, нет никаких оснований называть camelCase плохим только потому что так кажется автору.

Во-вторых, печатать конструкции вроде
.stick-man__feet
не самое приятное. И выделять их в тексте дабл кликом тоже.

В третьих, названия классов из 4-5 слов
stick-man__head--small
штука тоже сомнительная. Половина разметки потом состоит из классов.

Да и селекторы в css потом трёхэтажные
.big-city .baker-street-avenue .stick-man__head--small


Цель подобного использования атрибута rel заключается в том, чтобы указать на то, что элемент используется в JavaScript.
А почему вместо этого не добавлять таким элементам просто класс «js»?

Information

Rating
Does not participate
Registered
Activity