Joomla Radical Form callback mod_custom layout, Bootstrap 5, vanilia js

callbackform.php

<?php

/**
 * @link https://hika.su/rasshireniya/radical-form
 * @link https://github.com/Delo-Design/radicalform
 */

defined('_JEXEC') or die;

?>

<div id="contact_form_modal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="alert alert-success" style="display: none; text-align: center;">
            <!-- Здесь будет выведено сообщение о результате отправки --></div>
        <div class="modal-content">
            <div class="modal-header align-items-center">
                <p class="modal-title h3">&nbsp;</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="modal-subtitle mb-3 d-flex align-items-center text-muted">&nbsp;</div>
                <form class="needs-validation" novalidate>
                    <div class="form-group mb-4 contact_form_modal_name_group" style="display: none;"><label
                                for="contact_form_modal_name">Ваше имя</label> <input type="text"
                                                                                      name="name"
                                                                                      id="contact_form_modal_name"
                                                                                      class="form-control form-control-sm"
                                                                                      placeholder="Как к Вам обращаться?"
                                                                                      aria-describedby="NameHelp"/>
                    </div>
                    <div class="form-group mb-4 contact_form_modal_phone_group" style="display: none;"><label
                                for="contact_form_modal_phone">Ваш телефон</label> <input maxlength="18"
                                                                                          name="phone"
                                                                                          pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$"
                                                                                          type="tel"
                                                                                          id="contact_form_modal_phone"
                                                                                          class="form-control form-control-sm"
                                                                                          placeholder="+79999999999"
                                                                                          aria-describedby="PhoneHelp"/>
                        <div class="invalid-feedback">Это поле должно содержать телефонный номер не менее 5 и не более
                            18 цифр.
                        </div>
                        <small id="PhoneHelp" class="form-text text-muted">Наш менеджер перезвонит Вам для уточнения
                            деталей.</small></div>
                    <div class="form-group mb-4 contact_form_modal_email_group" style="display: none;"><label
                                for="contact_form_modal_email">Ваш email</label> <input name="email"
                                                                                        type="email"
                                                                                        id="contact_form_modal_email"
                                                                                        class="form-control form-control-sm"
                                                                                        placeholder="Ваш email"
                                                                                        aria-describedby="EmailHelp"/>
                        <div class="invalid-feedback">Это поле должно содержать верный адрес электронной почты.</div>
                    </div>
                    <div class="form-group mb-4 contact_form_modal_comments_group" style="display: none;"><label
                                for="contact_form_modal_comments">Сообщение *</label> <textarea name="comments"
                                                                                                id="contact_form_modal_comments"
                                                                                                class="form-control form-control-sm"
                                                                                                placeholder="Ваше сообщение"> </textarea>
                    </div>
                    <div class="custom-control custom-switch my-3"><input name="gdpr" required="" type="checkbox"
                                                                          id="agreement_gdpr"
                                                                          class="custom-control-input required"/> <label
                                for="agreement_gdpr" class="custom-control-label">Я принимаю <a
                                    href="politika"
                                    target="_blank" rel="noindex">политику обработки персональных данных</a>.</label>
                        <div class="invalid-feedback">Согласно Федеральному закону "О персональных данных" от 27.07.2006
                            №152-ФЗ перед отправкой своих данных Вы должны дать согласие с нашей политикой обработки
                            персональных данных.
                        </div>
                    </div>
                    <input name="rfSubject" type="hidden" value="Заказ обратного звонка"/>
                    <input name="rfTarget" value="1" type="hidden">
                    <button type="submit"
                            disabled="disabled"
                            class="btn btn-lg btn-primary rf-button-send" data-rf-call="12"><i
                                class="fa fa-paper-plane-o" aria-hidden="true"></i> Отправить
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const contactFormModal = document.getElementById('contact_form_modal');
        if (contactFormModal) {
            contactFormModal.addEventListener('show.bs.modal', event => {

                // Кнопка, вызвавшая модальное окно
                const button = event.relatedTarget;
                // Получаем инфу из  data-* атрибутов
                const formTitle = button.getAttribute('data-form-title');
                const formSubTitle = button.getAttribute('data-form-subtitle');


                // Обновляем информацию в модальном окне.
                // Устанавливаем заголовок модального окна
                const modalTitle = contactFormModal.querySelector('.modal-title');
                modalTitle.textContent = formTitle;
                // Устанавливаем тему письма для писем, отправляемых из формы.
                const rfSubject = contactFormModal.querySelector('.modal-body [name="rfSubject"]');
                rfSubject.value = formTitle;

                // Устанавливаем получателя
                const targetEmail = button.getAttribute('data-email-target');
                if (targetEmail) {
                    const rfTarget = contactFormModal.querySelector('.modal-body [name="rfTarget"]');
                    if (rfTarget) {
                        rfTarget.value = targetEmail;
                    }
                }

                let fields = button.getAttribute('data-fields');

                if (typeof fields !== 'undefined') {
                    fields = fields.split(',');
                    fields.forEach(index => {
                        let field = contactFormModal.querySelector('.contact_form_modal_' + index + '_group');
                        field.style.removeProperty('display');
                    });
                }
                let fieldsRequired = button.getAttribute('data-fields-required');
                if (typeof fieldsRequired !== 'undefined') {
                    fieldsRequired = fieldsRequired.split(',');

                    fieldsRequired.forEach(index => {
                        let field = contactFormModal.querySelector('.contact_form_modal_' + index + '_group .form-control');
                        field.setAttribute('required', 'required');
                    });
                }
            });

            let agreement = contactFormModal.querySelector('#contact_form_modal #agreement_gdpr');
            agreement.addEventListener('click', event => {
                const submitBtn = contactFormModal.querySelector('.rf-button-send');
                let checkbox = event.target;
                if (checkbox.checked) {
                    submitBtn.removeAttribute('disabled');
                } else {
                    submitBtn.setAttribute('disabled', 'disabled');
                }
            });
        }
    });
</script>