Як створити спливаючу форму з надсиланням без оновлення сторінки (Ajax). Наприклад, форма Зворотній дзвінок

Як створити спливну форму з відправкою без оновлення сторінки (Ajax)?

1. У редакторі форм натисніть "Додати форму".
   • Назва форми, наприклад "Зворотний дзвінок".
   • Method: POST
   • Enctype: multipart/form-data
   • Резултьтат при відправленні на внутрішню адресу: Надіслати результат на пошту
   • Адреса відправлення форми: #
   • Ім'я форми:form_callback_request
   • ID форми:form_callback_request < /li>
   • Заповніть інші дані за вашим побажанням, крім "Поля для форми", які ми заповнимо після збереження форми.
   
   Після збереження перейдіть до "Мої форми" та відкрийте створену форму для редагування.
   Поля для форми, Додати ще поле.
   Виберіть "Текстове поле", Додати ще поле.
   • Назва: "Телефон:"
   • Placeholder: "Ваш номер телефону"
   • Name: "callback_phone_name"
   • ID: "callback_phone_id"
   • Class: "callback_phone_class"
   < li>Maxlength: 15
   • Size: 20
   < li>Текст при помилці: "Ви не вказали номер телефону"
   • Заповнювати: Обов'язково для заповнення
   • Перевірка на відповідність: Номер телефону
   • Збережіть зміни
2. Додамо код для відкриття меню при натисканні на посилання. Для цього відкрийте "Керування меню", "Додати меню".
3. Положення меню: "Шапка сайту (Header)"
4. Введіть текст меню, відключивши HTML редактор:
   <img loading="lazy" alt="Як створити спливаючу форму з надсиланням без оновлення сторінки (Ajax). Наприклад, форма Зворотній дзвінок" src="/img/loading.gif"/ ></div>'); $(".hotengine-form_conts").animate({opacity: "hide"}, 400); var rel; var rel = $(this).attr("rel"); $.ajax({ type: "POST", dataType: "html", data: $("form.hot) form_conts").serialize(), url: "/codes/form/template_form_construct_ajax.php?form=", timeout: 20000, error: function(request,error) { if (error == "timeout") { jQuery.facebox("Request timeout. Please try again. </i> "); $(".loading").animate({opacity: "hide"}, 0); $(".hotengine-form_conts").show(); } else { jQuery.facebox("Помилка при виконанні Ajax запиту"); $(".loading").animate({opacity: "hide"}, 0); $(".hotengine-form_conts").show(); } }, beforeSend: function() { $(".loading").animate({opacity: "show"}, 400); }__D__ ".loading").animate({opacity: "hide"}, 300, function(){ $(".loading").hide("fast", function () { $(".loading")). remove(); $(".hotengine-form_conts").html(data); $(". /// Відправлення форми END // Дублюємо функцію відправки, у разі натискання клавіші ENTER замість кліка мишею по кнопці ВІДПРАВИТИ $(document).on("submit",".hoteng . { $(".hotengine-form_conts .hotengine-form_conts_submit_button").click(); }); }); // --> </script> /// Відправлення форми END // Дублюємо функцію відправки, у разі натискання клавіші ENTER замість кліка мишею по кнопці ВІДПРАВИТИ $(document).on("submit",".hoteng . { $(".hotengine-form_conts .hotengine-form_conts_submit_button").click(); }); }); // --> </script><span class="hidden"><meta itemprop="headline name" content="Як створити спливаючу форму з надсиланням без оновлення сторінки (Ajax). Наприклад, форма Зворотній дзвінок"/><meta itemprop="alternativeHeadline" content="Як створити спливаючу форму з надсиланням без оновлення сторінки (Ajax). Наприклад, форма Зворотній дзвінок"/><meta itemprop="datePublished" content="2026-08-08T08:52:55+00:00"/><meta itemprop="dateModified" content="2026-08-22T20:58:04+00:00"/><meta itemscope itemprop="mainEntityOfPage" itemtype="https://schema.org/WebPage" itemid="https://site.boostore.pro/ua/blog/news_ua/13036.htm"/></span><span class="hotengine-marking" data-hotengine-marking-type="blog_catalog_page" data-hotengine-marking-timestamp="1786179175" data-hotengine-marking-blog_cat_page_catid="2502" data-hotengine-marking-view="4" data-hotengine-marking-comments="0" data-hotengine-marking-rating="0" data-hotengine-marking-id="13036" data-hotengine-marking-name="" data-hotengine-marking-category-name="news_ua"></span></div> </div> <div class="footh"> </div> </div><div class="hotengine-read-other-article"><span class="hotengine-read-other-article-title"></span> <span><a href="https://boostore.pro/ua/blog/news_ua/12969.htm" title="Додано меню для прискореного доступу до деяких вкладених пунктів адмінцентру.">Додано меню для прискореного доступу до деяких вкладених пунктів адмінцентру.<br/></a><a href="https://boostore.pro/ua/blog/news_ua/13320.htm" title="Усі імена зображень товарів будуть перейменовані (зменшені) під час оновлення або імпорту товарів">Усі імена зображень товарів будуть перейменовані (зменшені) під час оновлення або імпорту товарів<br/></a><a href="https://boostore.pro/ua/blog/news_ua/13130.htm" title="Оновлені ID елементів Каталогу, Магазину, статей, новин - #page_content">Оновлені ID елементів Каталогу, Магазину, статей, новин - #page_content<br/></a></span></div></span></main> <!-- CONTENT --> </div><footer id="hotengine-footer"> <div class="footer_menus"> <span class="menu_position_footer menu_position_footer_38787"><script async src="/upload/catalog/6467/files/scripts/code_menu_38787.js?t=1787525371"></script></span> <footer class="hn-footer-main"> <div class="hn-footer-wrapper"> <div class="hn-footer-grid"> <div class="hn-footer-section"> <div class="hn-footer-h">Можливості</div> <nav class="hn-footer-nav"> <a href="https://boostore.pro/ua/#land_2">Основні модулі</a> <a href="https://boostore.pro/ua/blog/sitecreate_ua/boostore-pro-full-functionality.htm">Функціонал системи</a> <a href="https://boostore.pro/ua/automatization.html">Автоматизація магазину</a> <a href="https://boostore.pro/ua/blog/sitecreate_ua/how-to-make-booking-website-for-free.htm">Бронювання послуг (Booking)</a> <a href="https://boostore.pro/ua/review.html#hotengine-review6">Демонстрація редактора</a> <a href="https://boostore.pro/ua/page.php?p=submit_catalog_page&subpage&shop_catalog_payment_systems">Платіжні системи</a> <a href="https://boostore.pro/ua/delivery-services.html">Служби доставки</a> <a href="https://boostore.pro/ua/freestore.html" title="Створити інтернет-магазин безкоштовно">Безкоштовні можливості</a> <div class="hn-footer-sep"></div> <a href="https://templates.boostore.pro/ua/">Каталог шаблонів</a> <a href="https://boostore.pro/ua/templates_visual_blocks.html">Бібліотека блоків</a> </nav> </div> <div class="hn-footer-section"> <div class="hn-footer-h">Навчання</div> <nav class="hn-footer-nav"> <a href="https://boostore.pro/ua/docs/">База знань (Інструкції)</a> <a href="https://boostore.pro/ua/review.html">Огляд можливостей</a> <a href="https://boostore.pro/ua/blog/sitecreate_ua/how-to-create-online-store-step-by-step.htm">Покроковий гід</a> <a href="https://boostore.pro/ua/scripts_guide.html">Скрипти для сайтів</a> <div class="hn-footer-sep"></div> <a href="https://boostore.pro/ua/blog/sitecreate_ua/">Корисні статті</a> <a href="https://boostore.pro/ua/blog/news_ua/">Новини платформи</a> </nav> </div> <div class="hn-footer-section"> <div class="hn-footer-h">Сервіс</div> <nav class="hn-footer-nav"> <a href="javascript:void(0)" role="button" tabindex="0" aria-label="Замовити під ключ" class="hotengine-form-constructor button_popup_form" data-dialog-form_id="547" data-dialog-title="Замовити під ключ" data-dialog-buttontext="Відправити" data-dialog-width="400" data-dialog-min-width="300" data-dialog-min-height="530" data-mobile-width="320" data-dialog-form-hide-fields=".my_form_form_phone">Замовити під ключ</a> <a href="https://boostore.pro/ua/user_domains.html">Мої сайти</a> <div class="hn-footer-sep"></div> <a href="https://boostore.pro/ua/feedback.html?service_desk_type=7">Підключити домен</a> <a href="https://boostore.pro/ua/tools/">Безкоштовні інструменти</a> <a href="https://boostore.pro/ua/#prices">Тарифи</a> <a href="https://boostore.pro/ua/pay_hosting.html?PAYMENT_FORM">Оплатити хостинг</a> <a href="https://boostore.pro/ua/feedback.html?service_desk_type=8">Техпідтримка</a> <a href="https://boostore.pro/ua/feedback.html">Зворотній зв’язок</a> </nav> </div> <div class="hn-footer-section hn-footer-cta"> <div class="hn-footer-logo-container" graphical-objects> <a href="https://boostore.pro/ua/" class="hn-footer-logo" title="SaaS платформа для створення сайтів та інтернет-магазинів"> <span class="h-boo">Boo</span><span class="h-store">Store</span><span class="h-pro">.pro</span> </a> </div> <p>SaaS платформа для створення сайтів</p> <div class="hn-footer-actions"> <a href="https://boostore.pro/ua/submit_catalog_page.html?makeshop" class="hn-btn-primary">Створити сайт</a> <a href="/ua/admin/" class="hn-btn-outline">Увійти</a> </div> </div> </div> <div class="hn-footer-bottom"> <div class="hn-copyright">© 2026 BooStore — SaaS E-commerce Platform</div> <div class="hn-social-icons-wrap"> <a href="https://boostore.pro/url_ref.php?https://www.facebook.com/boostore.pro" target="_blank" rel="nofollow" title="Facebook" class="hn-soc-icon"> <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> </a> <a href="https://boostore.pro/url_ref.php?https://www.youtube.com/@BooStorePro" target="_blank" rel="nofollow" title="YouTube" class="hn-soc-icon"> <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> </a> </div> </div> </div> </footer><link rel="stylesheet" type="text/css" href="/templates/styles/css_hotengine_footer_menu.css?v3" media="all" /><div class="hotengine-footer-copyright" align="center" data-cat_page_id="6467" > <div class="hotengine-copyright-boostore-button" align="center"><a class="hotengine-copyright-boostore-href" title="Створити інтернет магазин безкоштовно BooStore.pro " alt="Платформа інтернет-магазину" href="https://boostore.pro/ua/">Powered by BooStore.pro<span class="hidden_abs"> Працює на SaaS платформі BooStore</span></a><span>Copyright 2010+</span></div></div> </div></footer></div><script async src="/modules/check_timezone/luxon.min.js" onload=" let luxon_userTimeZone = luxon.DateTime.local().zoneName; let tzName = Intl.DateTimeFormat().resolvedOptions().timeZone; let navlang = navigator.language || navigator.userLanguage; let d = new Date(); let tzOffset = -d.getTimezoneOffset() / 60; let dw = window.innerWidth; let xhr = new XMLHttpRequest(); xhr.open('POST', '/modules/check_timezone/ckeck_timezone.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); let params = 'tz=' + encodeURIComponent(tzOffset) + '&tzName=' + encodeURIComponent(tzName) + '&luxon_userTimeZone=' + encodeURIComponent(luxon_userTimeZone) + '&navlang=' + encodeURIComponent(navlang) + '&dw=' + encodeURIComponent(dw); xhr.send(params); "></script></body> </html>