Сергей delphinpro

тут масса вариантов.

на фронте можно два поля выводить с логикой ИЛИ
одно из можно прятать, примерно так:

Ваш Email: ____________
Link: Войти по номеру телефона

Ваш телефон: ____________
Link: Войти по Email

При клике на ссылку поле для мыла прятать и показывать поле для телефона (каждое со своей маской). Текст ссылки соответственно тоже менять на "Войти по имейл"

На бэке как уже отметили использовать prepareForValidation. Номер телефона нормализовывать. Проще всего вырезать всё, кроме цифр и так хранить в базе. При выводе форматировать как нравится.
А чтобы юзер не забыл, что он вводил при регистрации, восьмерку или семерку, использовать вот эту продвинутую маску https://intl-tel-input.com/ Эта библиотечка, кстати, и нормализацию делает.

решение в лоб, самое простое

вывести поверх любой страницы сайт перекрывающий блок с этими кнопками.
кнопки скрывают блок, а синяя еще и музыку включает.

<li tabindex=0>

li:focus { background: red; }
li:not(:focus) .img2 { display: none; }
li:focus .img1 { display: none; }
li:focus .answer { display: block; }

Вот эту фигню уберите

Он так размещен только для того, чтобы оставаться в поле зрения, так как анимация проигрывается в соответствии со скроллом всей страницы. И это логично, иначе как вы увидите анимацию, когда этот элемент проскроллится за пределы экрана.
Если вы хотите проигрывать анимацию только ползунком, то и фиксированное положение вам не требуется.

format_string();
str_format();

только непонятно, что это за метод. Обертка на штатной функцией?