Прежде, чем приступать, рекомендую выключить упрощенный режим редактирования форм в настройках модуля Вебформы. И сохранить настройку, соответственно.
https://r-morozov.ru/bitrix/kak-sdelat-formu-v-bitriks-so-svoej-verstkoj-i-ajax-rezhimom/
Выключить простое редактирование формы
Сервис -> веб-формы -> создать
Заполнить вкладку свойства и во вкладке Шаблон формы галочка «Использовать шаблон формы по умолчанию»
Заполнить «Вопросы» (галочка активный в каждом), в параметры ответов добавить нужные классы и id прим. -class=»form__item» id=»input_phone»
Во вкладке «Статусы» добавить статус с заголовком «Default»
На странице инфоблок сервисы->заполнить веб-форму добавить
Скопировать шаблон компонента
Прописать следующий код в шаблоне:
<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
?>
<? if ($arResult["isFormNote"] === "Y"): ?>
Спасибо, ваша заявка принята!
<? else: ?>
<?=$arResult["FORM_HEADER"]?>
<input type="hidden" name="web_form_submit" value="Y">
<? if ($arResult["isFormErrors"] === "Y"): ?>
<div class="errors">
<?=$arResult["FORM_ERRORS_TEXT"]?>
</div>
<? endif; ?>
<?=$arResult["QUESTIONS"]['NAME']['CAPTION']?>
<?=($arResult["QUESTIONS"]['NAME']['REQUIRED'] === 'Y' ? ' *' : '')?>:
<?=$arResult["QUESTIONS"]['NAME']['HTML_CODE']?><br>
<?=$arResult["QUESTIONS"]['PHONE']['CAPTION']?>
<?=($arResult["QUESTIONS"]['PHONE']['REQUIRED'] === 'Y' ? ' *' : '')?>:
<?=$arResult["QUESTIONS"]['PHONE']['HTML_CODE']?><br>
<?=$arResult["QUESTIONS"]['MESSAGE']['CAPTION']?>
<?=($arResult["QUESTIONS"]['MESSAGE']['REQUIRED'] === 'Y' ? ' *' : '')?>:
<?=$arResult["QUESTIONS"]['MESSAGE']['HTML_CODE']?><br>
<input type="submit" value="<?=$arResult["arForm"]["BUTTON"]?>">
<?=$arResult["FORM_FOOTER"]?>
<? endif; ?>