wordpress post, page에 form 집어 넣기 2 – Elementor Pro Plugin

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on print
Print

앞 서 글에서 외부 Plugin 없이 post, page에 form을 넣는 방법을 알아보았다. (필요한 경우 내 플러그인은 직접 만들기도 했다.) 다음으로 알아볼 내용은 Elementor 플러그인을 사용해서 Form 화면을 만들고, 거기에 action을 추가하는 방법이다.

Elementor Editor는 여러 Visual Editor 중에 가장 압도적이라고 생각한다. 다른 Visual Editor와 비교한 자료들은 인터넷에서 쉽게 찾아볼 수 있으므로 난 생략하고 넘어간다. 1

Elementor를 사용해서 post, page에 form을 넣는 방법은 다음의 강좌를 참고했다.
Video tutorial about how to use PHP and Elementor Pro forms, in order to create a registration form


1. Elementor를 사용해서 Form 만들기

elementor를 사용하면 정말 다양한 멋진 화면들을 만들 수 있다. 하지만 지금은 Elementor 사용법을 정리하려고 하는게 아니니 생략한다. 기본 template을 활용하여 아래와 같은 Form을 만들어보았다.

form을 만들면 반드시 submit button을 눌러서 제대로 동작하는지 확인한다. 2

https://bekseju9n.pe.kr/elementor-form-sample-2/


2. Elementor의 Form 과 관련된 API 알아보기

이제 위에서 만든 Form의 Submit 액션을 처리하는 코드를 어딘가에 추가해야 한다. 그전에 Elementor의 Form은 어떻게 접근되는지 Elementor의 API를 살펴보자.

Elementor의 Form API는 다음 문서에 설명되어 있다. https://developers.elementor.com/forms-api/

그런데 솔직히 뭐가 언제 호출된다는 지 잘 이해는 안된다. 구글링을 30분 정도 하고 삽질을 해야 했다. 일단 강좌에서 사용한 elementor_pro/forms/new_record를 사용해보도록 하자.


3. 플러그인에 Form Action 코드 구현하기

① 먼저 Action 코드를 담을 플러그인을 새로 만들고, Activate 시킨다.

사용하고 있는 theme의 functions.php 에 코드를 추가해도 관계없으나, 여기선 별도로 플러그인을 만들어 구현해보자. 여기에선 Study 용이기 때문에 앞서 wordpress post, page에 form 집어 넣기 에서 만들었던 sp-form-example 플러그인을 재활용해본다.

② elementor_pro/forms/new_record에 action을 추가해보자.

Form New Record Action : elementor_pro/forms/new_record

wp-content/plugins/sp-form-example/sp-form-example.php

<?php
/*
 * Plugin Name: Example Contact Form Plugin
 * Plugin URI: https://bekseju9n.pe.kr
 * Description: Simple non-bloated WordPress Contact Form
 * Version: 1.0
 * Author: bekseju
 * Author URI: https://bekseju9n.pe.kr
 */

add_action( 'elementor_pro/forms/new_record',  'myaction' , 10, 2 );
function myaction($record, $ajax_handler)
{
    $form_name = $record->get_form_settings('form_name');
    //Check that the form is the "sp form example 2" if not - stop and return;
    if ('elementor form example' !== $form_name) {
        return;
    }
    
    $form_data = $record->get_formatted_data();
    $firstname=$form_data['First Name']; 
    $lastname=$form_data['Last Name'];
    $name= sanitize_text_field($lastname . ' ' . $firstname);
    $email=sanitize_email($form_data['Email']);  
    
    date_default_timezone_set('Asia/Seoul');
    $message = 'test msg for elementor form. ' . date("Y-m-d H:i:s");
    $subject = 'test subject for elementor form';
    
    // get the blog administrator's email address
    $to = get_option( 'admin_email' );
    $headers = "From: $name <$email>" . "\r\n";

    // If email has been process for sending, display a success message
    if ( wp_mail( $to, $subject, $message, $headers ) ) {
        // do something
    } else {
        // do something
    }
    
}

4. 코딩 완료 ! 실행 ! Test !

https://bekseju9n.pe.kr/elementor-form-sample-2/

잘 동작한다.

이제 Elementor로 form 화면을 구성할 수 있게 되었다.


Footnotes

  1. Elementor는 특히 다양한 Template을 제공하고, 그 Template을 사용해서 직접 페이지를 만드는 강좌를 많이 올려놨는데 이중에서 가장 멋지다고 생각하는 강좌 몇 개를 적어본다.
    https://youtu.be/XjS-vPXblpk
    https://youtu.be/2WO-jAHNURA
  2. template에서 가져온 form은 기본적으로 actions after submit에 email이 설정되어 있는데, 이 설정 값 때문에 submit button 누를 때 error가 나오는 경우가 있다. action 코드를 한참 작성한 다음에 이 에러를 마주치고는 뭐가 잘못된건지 찾기 어려워 한참을 삽질을 해야 했다.

    어떻게 수정해야 하는지는 다음 문서를 참고한다.
    https://docs.elementor.com/article/202-form-server-error

    우선 action 코드 작성이 목적이니 actions after submit에서 email을 빼고 진행한다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다

  • 카테고리

  • Count per Day

    • 381This post:
    • 106609Total reads:
    • 60708Total visitors:
    • 24Reads today:
    • 24Visitors today:
    • 2019년 3월 10일Counter starts on: