エレメンターお問い合わせフォームと KBoard 掲示板連動

Last Updated: 2024 年 04 月 30 日 2のコメント

WordPress Element Proは独自の問い合わせフォームを提供するため、Contact Form 7やWPFormsなどの外部プラグインを使用する必要はありません。 Avada テーマでも独自のお問い合わせフォームを提供しています。

Elementor Proの問い合わせフォームから送信されたデータは、電子メールで送信するか、DBに保存して通知板で確認することができます。時々、エレメンタのお問い合わせフォームから提出されたデータ KBoard(Kboard)掲示板に登録が可能かどうかお問い合わせの方がいらっしゃいます。エレメント文書を見てみると、独自のフックを使って KBoard 掲示板に連動したり、カスタムDBテーブルに保存することが可能ですね。

Avada テーマを使用している場合、 Avadaが提供する問い合わせフォームから送信されたデータも同様に KBoard 掲示板に登録したり、カスタムDBテーブルに保存したりできます。

また、エレメンターお問い合わせフォームと Avada 問い合わせフォームから送信されたデータをカスタムDBテーブルに送信します。 wpDataTables プラグインと連動することも可能です。 wpDataTablesプラグインでテーブル形式で問い合わせフォームデータを表示したり、フロントエンドで編集することもできます。

エレメンターお問い合わせフォームと KBoard 掲示板連動

エレメントの問い合わせフォームウィジェット

エレメントプロは、独自の問い合わせフォーム機能を提供します。

エレメントの問い合わせフォームウィジェット

提出されたお問い合わせデータは WordPress お知らせパネルからすぐに確認が可能で、メールでも送信されるように設定できます。他にもリダイレクトされるようにしたり、Webhook、メールチムプなどでデータを送信することもできます。

エレメンタプロが提供するフックを使う

エレメントが提供するフックを使用して、ユーザーが問い合わせフォームを送信するときにデータを受け取り、他の方法で処理することができます。

具体的な方法はGitHubの elementor-form-additional-webhook.php ドキュメントで提示するコードを応用できます。そのコードは Elementor フォームに2番目のWebフックを追加する機能があります。

class Elementor_Form_Additional_Webhook {

    function hooks(){
        // 여기에 추가 웹훅을 등록합니다
        add_action( 'elementor_pro/forms/new_record', array( $this, 'manipulate_form_submission' ), 10, 2 );
    }

    function manipulate_form_submission( $record, $ajax_handler ) {

        $form_data = $record->get_formatted_data();

        // 서버로 전송하기 전에 필드 이름을 변경합니다
        $new_data = array(
            'First_Name' => $form_data['First Name'] ?? '',  // 이름
            'Last_Name'  => $form_data['Last Name'] ?? '',   // 성
            'URL'        => $form_data['Website'] ?? '',     // 웹사이트 URL
        );

        // 웹훅을 통해 데이터를 외부 API로 전송합니다
        $response = wp_remote_post( 'http://api.somewhere.com/', array( 'body' => $new_data ) );

        // 추가 웹훅의 실패로 인해 폼 제출에 문제가 발생하는 경우...
        if( is_wp_error( $response ) ) {
            $msg = '추가 웹훅에 문제가 발생했습니다.';
            $ajax_handler->add_error( 0, $msg );            // 에러 추가
            $ajax_handler->add_error_message( $msg );       // 에러 메시지 추가
            $ajax_handler->is_success = false;              // 성공 여부를 false로 설정
        }
    }
}
$elementor_webhook_239909870234 = new Elementor_Form_Additional_Webhook();
$elementor_webhook_239909870234->hooks();

上記のコードを適切に適用して、エレメントフォームを送信するときに必要な操作を実行することができます。

KBoard 連動コードは、次の記事で紹介するコードを参照できます。

キューフォームと KBoard 掲示板連動コードですが、原理を理解して上記のエレメンタプロが提供するフックにも活用できます。

Avada テーマの問い合わせフォームデータをwpDataTablesテーブル(表)と連動する

최근 Avadaから送信された問い合わせフォームデータ wpDataTablesプラグインを使用してテーブル(表)として表示し、フロントエンドで編集を可能にする作業を担当しました。

Avada テーマの問い合わせフォームデータをwpDataTablesテーブル(表)と連動する

このプラグインは299ドルで高価ですが、DBテーブルのデータをドラッグしてフィルタ可能なテーブルとして表示できるため、状況に応じて開発時間とコストを節約できます。

Quform から送信されたデータを wpDataTables で作成されたテーブルに表示する例を示します。

テーブルでは、ラベルなどを好きなように変更でき、表示する列を指定できます。また、フロントエンドで編集が可能になるかどうかも設定できます。

Quform뿐만아니라 Avada テーマのフォーム、エレメントプロのフォーム、およびWPFormsプロの問い合わせフォームを介して送信されたデータをwpDataTablesテーブルに表示するか、 KBoard などの掲示板に連動することも可能です。

これらの機能を実装するのに苦労したり、 WordPress 関連するトラブルシューティングが必要な場合 ここでサービス(有料)をご依頼することができます。

参照


2のコメント

コメント

カカオトーク相談 カトクサービス相談