워드프레스에서 문의 폼을 제출한 후에 커스텀 자바스크립트(JavaScript)를 실행해야 하는 상황이 있을 수 있습니다. 사용하는 컨택트 폼 플러그인에서 제공하는 기능을 사용하여 커스텀 JS 코드 실행이 가능합니다.
워드프레스 문의 폼 제출 후 커스텀 자바스크립트 실행하기
Contact Form 7 플러그인
CF7 플러그인을 사용하는 경우 Calling a JavaScript function on Contact Form 7 submission 문서에서 제시하는 코드를 응용할 수 있습니다.
document.addEventListener( 'wpcf7submit', function( event ) {
if ( '123' == event.detail.contactFormId ) {
// Your code here
}
}, false );'123'은 폼 ID입니다. 적절히 변경하세요.
자바스크립트 로드하기
자바스크립트는 "워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법"을 참고하여 로드할 수 있습니다. 이 방법이 바람직하지만 번거롭다면 WPCode와 같은 플러그인을 사용하여 푸터 영역에 코드를 추가할 수도 있습니다. GeneratePress 테마를 사용하는 경우 GP 테마에서 제공하는 Elements 기능을 사용하여 푸터(wp_footer 후크)에 로드할 수 있습니다.
WPForms 플러그인
WPForms 플러그인을 사용하는 경우 Form Pages 애드온을 사용하여 커스텀 스크립트를 추가할 수 있습니다. 문의 폼을 만들고 설정 » 확인 (Confirmations)에서 텍스트 모드로 전환하여 HTML 코드를 추가하고, wpforms_form_pages_footer 후크를 통해 사용자 지정 스크립트를 실행할 수 있습니다.
살려보니 Form Pages 애드온은 WPForms Pro 플랜 이상에서 제공되네요. Form Pgaes 애드온에 대한 자세한 정보는 "WPForms Form Pages를 사용하여 워드프레스에서 쉽고 빠르게 Form 랜딩 페이지 만들기"를 참고해보세요.
사용하는 테마(차일드 테마를 만들어 작업)의 함수 파일에 다음과 같은 형식으로 스크립트를 추가할 수 있습니다.
function wpf_confetti_animation() {
?>
<script type="text/javascript">
//If the canvas ID does not exist on the page, this script will not run
if (document.querySelector( '#canvas' ) !== null) {
// Your code here
}
</script>
<?php
}
add_action( 'wpforms_form_pages_footer', 'wpf_confetti_animation', 1);Quform 플러그인
Quform을 사용하는 경우에는 quform:successStart라는 자바스크립트 훅을 사용할 수 있습니다.
jQuery(function ($) {
$('.quform-form-1').on('quform:successStart', function (e, form, confirmation) {
// Custom code
});
});상기와 같은 형식으로 커스텀 코드를 추가할 수 있습니다.
Formidable Forms 플러그인
Formidable Forms를 사용하는 경우에는 성공 메시지 표시 후에 콜백되는 frmFormComplete 이벤트를 활용할 수 있습니다. Formidable Forms에서 제시하는 기본적인 스크립트입니다:
<script>
jQuery(document).ready(function($){
$(document).on( 'frmFormComplete', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>상기 js 코드를 적절히 응용하시기 바랍니다.
댓글 남기기