собрал две формы

assets/css/gp-style-core.css

@@ -488,7 +488,6 @@ button{
 
   display: block;
 }
-
 .form-input__error{
   margin-top: 4px;
 
@@ -500,11 +499,15 @@ button{
   color: #f60909;
 
   display: none;
+
+  position: relative;
 }
 .form-input__error--absolute{
   position: absolute;
-  top: 50px;
+  bottom: -19.95px;
   left: 0;
+
+  width: 100%;
 }
 .modal-form__content.check .form__input:invalid{
   border-color: #f60909;
@@ -515,6 +518,19 @@ button{
 .modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
   display: block;
 }
+.modal-form__content.check .form-input-phone__input:invalid + .form-input__error--absolute::before{
+  content: '';
+
+  position: absolute;
+  top: -53px;
+  left: -1px;
+
+  width: 100%;
+  height: 48px;
+
+  border-radius: 20px;
+  border: 1px solid #f60909;
+}
 .form-input__phone{
   padding: 12px 16px 12px ;
 
@@ -820,6 +836,8 @@ button{
   overflow: hidden;
 
   transition: height .2s ease-out;
+
+  z-index: 10;
 }
 .form-input-list__block-content.active{
   border: 1px solid var(--background-black);
@@ -1360,9 +1378,11 @@ button{
   transition: opacity .2s ease-out;
   pointer-events: none;
 
-  display: flex;
+  /* display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; */
+
+  overflow-y: auto;
 }
 .modal.active{
   opacity: 1;
@@ -1631,6 +1651,8 @@ button{
 }
 
 .modal-form{
+  margin: auto;
+
   width: 600px;
 
   padding: 24px;
@@ -1739,12 +1761,25 @@ button{
   display: flex;
   justify-content: space-between;
 }
+.modal-form-content-line__element{
+  position: relative;
+}
 .modal-form-content__line--two .modal-form-content-line__element{
   width: calc(50% - 12px);
 }
 .modal-form__buttons{
   margin-top: 32px;
 }
+.modal-form__buttons--two{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-form__buttons--two button,
+.modal-form__buttons--two input{
+  width: calc(50% - 20px);
+}
 /* modal */
 
 /* toggle */

assets/js/gp-form.js

@@ -1,5 +1,6 @@
 'use strict';
 
+
 inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
 
 function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
@@ -22,7 +23,8 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon,
             let newIcon = e.querySelector(selectIcon),
                 newCode = e.querySelector(selectCode);
 
-            e.onclick = function () {
+            e.onclick = function (event) {
+                event.preventDefault();
                 thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
                 thisMainCode.textContent = newCode.textContent;
                 
@@ -36,7 +38,9 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon,
     })
 }
 
-checkPhone('.form-input-phone__input');
+if (document.querySelector('.form-input-phone__input')) {
+    checkPhone('.form-input-phone__input');
+}
 
 function checkPhone(input) {
     document.querySelector(input).addEventListener('input', function(event) {
@@ -69,7 +73,9 @@ function inputTwo(inputTwo, button, oval, input) {
             thisMain = e;
 
         thisButtons.forEach(button => {
-            button.onclick = function () {
+            button.onclick = function (event) {
+                event.preventDefault();
+
                 let newLeft = button.clientWidth;
                 let newValue = button.textContent;
 
@@ -99,7 +105,9 @@ function inputRadio(main ,item, textClass, input) {
         items.forEach(radio => {
             let thisText = radio.querySelector(textClass).textContent;
 
-            radio.onclick = function () {
+            radio.onclick = function (event) {
+                event.preventDefault();
+
                 if (inputRadio.querySelector(`${item}.active`)) {
                     inputRadio.querySelector(`${item}.active`).classList.remove('active');
                 }
@@ -127,7 +135,8 @@ function listInputRadio(main ,item, textClass, input, content, block) {
         }
 
         items.forEach(item => {
-            item.onclick = function () {
+            item.onclick = function (event) {
+                event.preventDefault();
                 let newText = item.querySelector(textClass).textContent;
 
                 thisInput.value = newText;
@@ -143,4 +152,4 @@ function listInputRadio(main ,item, textClass, input, content, block) {
             }
         })
     })
-}
+}