How to set up a customized 1C Bitrix feedback form?

Question

1C-Bitrix

Good evening.
After filling out the feedback form on the site, the following text is added to the page address: example.ru/?success=6792d9ccc84cf30f3d809e47410d4060&bxajaxid=95a1c17a7c5c43488d30dc20fc3c6615&AJAX_CALL=Y
The page itself is empty as in the photo:
Component code:

<?
if(!defined('B_PROLOG_INCLUDED')||B_PROLOG_INCLUDED !== true) die();
$frame = $this->createFrame()->begin();
?>
<form action="<?=$APPLICATION->GetCurPage()?>" method="POST" class="om__block">
  <?=bitrix_sessid_post()?>
  <?if($arResult['OK_MESSAGE']):?>
    <div class="ok-text center"><?=$arResult['OK_MESSAGE']?></div>
  <?else:?>
    <div class="label-text">Ваше имя <?if(in_array('NAME', $arParams['REQUIRED_FIELDS'])) echo ' *';?>:</div>
    <input type="text" name="user_name" class="input<?if($arResult['ERROR_MESSAGE']['NAME']) echo ' error';?>" value="<?=$arResult['FIELDS_VALUE']['AUTHOR']?>" />
    <div class="label-text">Ваш телефон <?if(in_array('EMAIL', $arParams['REQUIRED_FIELDS'])) echo ' *';?>:</div>
    <input type="text" name="phone" class="input<?if($arResult['ERROR_MESSAGE']['PHONE']) echo ' error';?>" value="<?=$arResult['FIELDS_VALUE']['PHONE']?>" />
        <div class="label-text">Ваш город <?if(in_array('CITY', $arParams['REQUIRED_FIELDS'])) echo ' *';?>:</div>
    <input type="text" name="city" class="input<?if($arResult['ERROR_MESSAGE']['CITY']) echo ' error';?>" value="<?=$arResult['FIELDS_VALUE']['CITY']?>" />
    <?/*if($arParams['USE_CAPTCHA'] == 'Y'):?>
      <div class="label-text">Текст с картинки *</div>
      <div class="captcha row">
        <input type="hidden" name="captcha_sid" value="<?=$arResult['capCode']?>">
        <input type="text" name="captcha_word" class="input<?if($arResult['ERROR_MESSAGE']['CAPTCHA']) echo ' error';?>" placeholder="" />
        <img src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult['capCode']?>">
      </div>
    <?endif;*/?>
    <?ReCaptcha::Display('captcha_callback');?>
    <div class="form-info center">* — Поля обязательны для заполнения</div>
    <div class="center">
      <input type="hidden" name="PARAMS_HASH" value="<?=$arResult['PARAMS_HASH']?>">
      <button name="submit" class="button gb" value="Y">Отправить</button>
    </div>
        <div class="form-info-policy">Нажимая на кнопку Отправить, вы подтверждаете свою дееспособность и согласие с <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a> в отношении обработки персональных данных.</div>
  <?endif;?>
</form>
<?
$frame->beginStub();
?>
<?
$frame->end();
?>

How to make the user stay on the same page, I don’t understand where to dig.

Answer 1

AJAX + jQuery dig
function

$.ajax({
 url: 'load.php',
 data: {"setting": value_setting},
 dataType: "html",
 success: function(date) {
 $('block selector').html(html);
}
})

Answer 2

You have a response for an AJAX request.
You can send this form via AJAX and insert the response into an element on the page or instead of the form.
And it’s not difficult to make a custom form, usually they make a custom script on infoblocks that accepts ajax requests.

Answer 3

Component code:

$APPLICATION->IncludeComponent(
  "otb:main.feedback", 
  "callback", 
  array(
    "COMPONENT_TEMPLATE" => "callback",
    "EMAIL_TO" => "",
    "EVENT_MESSAGE_ID" => array(
      0 => "8",
    ),
    "OK_TEXT" => "Спасибо, ваше сообщение принято.",
    "REQUIRED_FIELDS" => array(
      0 => "NAME",
      1 => "PHONE",
    ),
    "USE_CAPTCHA" => "Y",
    "AJAX_MODE" => "Y",
    "AJAX_OPTION_JUMP" => "N",
    "AJAX_OPTION_STYLE" => "N",
    "AJAX_OPTION_HISTORY" => "N",
    "AJAX_OPTION_ADDITIONAL" => "N"
  ),
  false
);