Forminator는 사용이 쉬운 워드프레스 문의 폼 플러그인 중 하나로 현재 40만 개가 넘는 사이트에 설치되어 사용되고 있습니다. 이 플러그인을 사용하여 문의 양식을 만들 때 전화번호 필드를 3개로 분리하여 전화번호 데이터를 받아서 전달하는 방법에 대하여 살펴보겠습니다.
다음은 Forminator 개발자가 공개한 Forminator Pro 소개 영상입니다. Forminator 프로 버전을 사용하여 어떤 종류의 컨택트 폼을 만들 수 있는지 대략적으로 파악할 수 있을 것입니다.
워드프레스 Forminator 플러그인: 전화번호 필드를 3개로 분리하기
유료 워드프레스 컨택트 폼에서 전화번호 필드를 3개로 분리하는 방법에 대하여 "워드프레스 Quform 문의폼: 전화번호 필드를 3개로 분리하기"를 참고할 수 있습니다.
Quform에서는 자체 필드를 사용하여 쉽게 분리가 가능하지만, Forminator는 HTML 코드로 전화번호 필드를 3개로 분리하고, HTML 필드를 통해 받은 데이터를 실제 Forminator의 전화번호 필드로 전달하는 방식으로 진행할 수 있습니다.
Forminator의 필드를 사용할 경우 위와 그림과 같이 하나의 필드로 입력을 받을 수 있기 때문에, HTML 코드로 3개의 필드를 표시하여 데이터를 받아서 값을 실제 전화번호 필드로 넘겨줄 수 있습니다.
HTML 필드로 만든 입력 폼에 방문자가 정보를 입력해도 값이 직접 Forminator를 통해 이메일로 전달되지 않고 데이터베이스(DB)에도 저장되지 않기 때문에 이 필드에서 받은 값을 조합하여 Forminator 필드로 넘겨주면 전화번호 정보가 올바르게 전송됩니다.
이 경우 다음과 같은 JavaScript 코드를 사용하여 HTML 필드로부터 받은 전화번호 데이터를 Forminator의 해당 필드로 전달할 수 있습니다.
<script>
function setupPhoneFields() {
var element = document.getElementById('phone-1');
if (element) {
var parentElement = element.parentNode;
parentElement.style.display = 'none';
}
var element = document.querySelector('.phone-number3 .forminator-label');
if(element && !document.querySelector('#phone-number3 input')) {
element.innerHTML += ' <span class="forminator-required">*</span>';
var divContent = `<input type="text" id="phone1" value="010" maxlength="3" pattern="^01[0-9]{1}" required="required"/>
<input type="text" id="phone2" maxlength="4" pattern="[0-9]{4}" required="required"/>
<input type="text" id="phone3" maxlength="4" pattern="[0-9]{4}" required="required"/>`;
document.getElementById("phone-number3").innerHTML = divContent;
var phone1 = document.getElementById('phone1');
var phone2 = document.getElementById('phone2');
var phone3 = document.getElementById('phone3');
var targetField = document.querySelector('input[name="phone-1"]');
phone1.value = sessionStorage.getItem('phone1') || '010';
phone2.value = sessionStorage.getItem('phone2') || '';
phone3.value = sessionStorage.getItem('phone3') || '';
function updatePhone2Field() {
targetField.value = phone1.value + '-' + phone2.value + '-' + phone3.value;
}
function validateInput(e) {
var newValue = e.target.value;
if (!/^\d*$/.test(newValue)) {
e.target.value = newValue.slice(0, -1);
alert("숫자만 입력할 수 있습니다!");
}
sessionStorage.setItem(e.target.id, e.target.value);
}
phone1.addEventListener('input', updatePhone2Field);
phone1.addEventListener('input', validateInput);
phone2.addEventListener('input', updatePhone2Field);
phone2.addEventListener('input', validateInput);
phone3.addEventListener('input', updatePhone2Field);
phone3.addEventListener('input', validateInput);
function validatePhone1Field(e) {
var newValue = e.target.value;
if (!/^[\d-+ ]*$/.test(newValue)) {
e.target.value = newValue.slice(0, -1);
alert("숫자, 하이픈, +, 스페이스만 허용됩니다!");
}
}
targetField.addEventListener('input', validatePhone1Field);
updatePhone2Field(); // call this once after all setup to propagate the initial values
}
}
window.onload = function() {
setInterval(setupPhoneFields, 200);
};
</script>상기 스크립트에서 phone-1은 실제 필드 ID에 따라 적절히 변경하시기 바랍니다. 또한, HTML 필드에는 phone-number3 클래스를 추가하고 HTML 필드의 내용으로 다음 HTML 코드를 입력합니다.
<div="phone-number3"></div>Forminator에서는 필드에 데이터를 입력하고 다른 필드로 이동하면 HTML 필드가 사라지는 현상이 발생하여, 이에 대처하도록 코드가 작성되어 있습니다.
스타일은 CSS 코드를 통해 제어할 수 있습니다. 예시:
.forminator-label {padding:5px;}
.phone-numbers3 input, .input-field {
border-bottom: 1px solid #777771;
box-sizing : border-box;
color : black;
background-color: white;
}
#phone1, #phone2, #phone3 {
width: 30%;
border:none;
background-color:white;
border-bottom: 1px solid #777771;
}
.forminator-input {
background-color:white;
border-bottom: 1px solid #777771;
}
.forminator-textarea {
background-color:white;
border: 1px solid #777771;
}
#phone-number3 {
margin-top: -11px;
}
댓글 남기기