WordPress Quformの提出内容をフロントエンドに表示する方法（+ wpDataTablesプラグイン）

Last Updated: 2021 年 09 月 26 日 30のコメント
無料電子ブック AdSense ウェビナー

前へから Quformで提出した文章を KBoard スレッドに登録する方法について簡単に説明しました。 他の方法でwpDataTablesプラグインを使用してQuform問い合わせフォームデータをフロントエンドに表示することができます。

Quformコンテントゥフォームを介して提出した内容をフロントエンドに表示する方法

これらの方法ではなく、別の方法でフロントエンドに表示する方法で wpDataTablesというプラグインを使用することができそうです。 フロントエンドに表示する方法についてQuformでは、次のような方法を提示しています。

WordPress 伝言板で Quform> Form Builder> Settings> Databaseで提出した内容をカスタムデータベーステーブルに保存するように設定した後で、wpDataTablesを使用して、フロントエンドに表示することができます。

KBoardのような韓国型掲示板の使用が気にされる場合には、上記のように Quformで提示する方法を使用することを考慮してみることができます。

WordPress Quformの提出内容をフロントエンドに表示する方法

wpDataTablesについては、この記事では「wpDataTables - WordPressテーブル/チャートプラグイン「部分を参考にしてください。

次の映像ではWPFormsで作られたお問い合わせフォームを介して送信されたデータをフロントエンドに表形式で表示する例を示します。

Contact Form 7の場合、カスタムデータベースを直接作成Contact Form 7の提出内容が保存されるようにした後、上記の方法に従うと、と思われる。 （少しのプログラミングの知識が必要な作業です。ただQuformを使用する方が効率的になります。Contact Form 7は、セキュリティ上のもあまり良くないですね。）

Contact Form 7を使用している場合は、FlamingoプラグインとContact Form 7 Viewsプラグインをインストールして、フロントエンドにユーザーが送信したデータを表示できます。 詳しくは「WordPress Contact Form 7のデータを表示する「を参考にしてください。

ユーザーが自分のデータを表示して編集することができ、編集可能なテーブルを作成

wpDataTablesを使用して、ユーザーが自分のデータのみを編集（修正）することができるように、編集可能なテーブルを作成する方法を次の映像で確認することができます。

User IDは WordPressユーザーIDとして自動的に WordPressで取得ようです。

This is the ID of the user in wordpress。 （Given automatically from wordpress)

このプラグインは、DB処理が頻繁なユーザーが利用する時間を大幅に削減することができます。

を購入しました plugin and it works perfectly, exactly like i had hoped. Saved my IT team tons of time. If you need a table plugin with oomph, this is your plugin.

思うように設定するために困難を経験する場合、プラグイン販売者に連絡してください。 Codecanyonプラグインを購入すると、デフォルトの6ヶ月のサポートが提供され、サポート延長オプションを選択すると、12ヶ月の間サポートを受けることができます。 また、サポートが切れてもアップデートは継続することができます。 サポート終了後のサポートを受けるにはサポートを購入する必要があります。 （販売者に連絡する必要がない場合サポートを更新したり、購入する必要がありません。）

参照

30のコメント

コメント

  1. ;;;;;;;;;;;;ヨセ顧客側から WordPressで開発件を依頼しますね..私はデザイナーですが.. ログインユーザーが 1 つの quforms でフォームを作成します。 それを持ってwpdatatableと呼び、テーブルを作成します。 テーブル構成では、ログインユーザー名は必須になります。 クライアント側の要件 1. テーブルで自分が作成した内容だけを表示する必要があります。 2. 管理者は全体が見えなければならない。

    応答

    • こんにちは、チョン・ミンホ。 Quformデータ KBoardで登録するようにして、 KBoardでは、作者の文だけを見せるようにすれば良いのです。 この場合、ログインユーザーだけがQuformフォームを作成する必要があります。 QuformデータをKboardに送信するソースについては、次の記事を参照してください。

      https://www.thewordcracker.com/intermediate/quform%EA%B3%BC-%EC%BC%80%EC%9D%B4%EB%B3%B4%EB%93%9C-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%EC%86%8C%EC%8A%A4-%EC%BD%94%EB%93%9C/

      QuformでユーザーID KBoardに渡すようにしてください。

      応答

      • こういう方法が..お知らせいただいた方法にしましょう。
        いつもありがとうございます。

      • まず良い情報いつも感謝しています。
        返信いただいたアドバイスではなく幸い wpdatatableで本人が作成した文は本人が見ることができる機能があってそれで解決しましたが、他の問題がwpdatatableではログイン時の確認を整数でのみ確認します。 例えば、ホン・ギルドンという人が7番目に登録された会員であれば、dbに登録者のシーケンス7番目をホン・ギルドンと判断するのに説明よりはwpdatatablsでアップロードした映像を見た方が良いと思います。テーブルから新しいテーブルで作成すると、自動的にその順序を尋ねてくるのにuformsで作成する問題がいくつかありますね。
        問題： 1. ログイン後に quforms を作成して wpdatatable に渡す過程でログイン登録の順序が userid に渡ってこそ、作成したフォームがテーブルに表示されます。
        wp_usersにidの順序を渡す方法はありませんか？
        今、次善策としてID登録時にニックネームを値をid順にしようとしましたが、見た目はちょっとおかしいと思います。 フックや他の方法はありませんか？

      • wpDataTablesプラグインを使用して自分の投稿を表示できるようにするには、Quformでデータを渡すときにユーザーIDを渡す必要があるようです。

        Quform では、フィールド値を動的データで事前入力できます。 次の記事を参照してください。

        https://cafe.naver.com/wphomepage/14420

        ログインユーザーのデータとして
        - IPアドレス
        - ユーザーエージェント
        - Display Name (表示名
        - メール
        - Logon(ログオン)
        - User Metadata（ユーザーメタデータ）

        などの情報があります。

        Logonを選択したときにユーザーIDを渡すことを確認してください。

      • 解決しました。
        {user|ID} と任意の値を入れましたが、その値を呼び出しました。
        WordPress 情報パッケージのおかげでお取引先が欲しいものを作ってくれました。

  2. こんにちは。 しきりに気ヘッドしまい、申し訳ありません。 ㅠㅠ
    quformsでファイルのアップロードフォームを作成して画像ファイルをアップロードするときに画像サイズを強制的に減らす方法はありませんか？ 700日3枚の写真がアップロードするサイトを作っていますが…

    応答

    • こんにちは？ コメントは常に歓迎します。 気になる点がございましたら、いつでもコメントをあげてください。 ご不明な点がなくてもコメントを上げていただければ幸いです。 コメントが多いSEOにも役立ちます。笑

      お問い合わせの内容につきましては、いくつかのソリューションを考えてみることができるようになります。

      1.最も良いのは、画像をアップロードする前に、圧縮をして画像のサイズを減らすことです。 私は画像の圧縮サイトで画像を圧縮した後、アップロードしています。 あまりにも圧縮がされて画像が鮮明に出てこない場合が時折ありますが、サーバーのストレージ容量を削減する良い方法です。 Photoshopでウェブ画像として保存するオプションを通じて画像ファイル圧縮が可能です。

      2.画像​​をサーバーに保存する必要がなく、電子メールのみ受信する場合、ファイルをサーバーに保存するオプションをオフにすれば簡単に解決されています。

      3.第三の方法でファイルのアップロードサイズを制限することです。 Quformにはファイルのアップロードサイズ制限オプションがあるため、このオプションを使用してアップロード可能なファイルサイズを1 MB程度に下げ、この容量を超えると警告メッセージを表示できます。 また、サブラベルに'1MB以下のファイルのみアップロード可能です。 ファイルサイズがこれより大きい場合は、ファイルサイズを小さくしてください。」のようなガイドを表示することも可能です。

      4.もう一つの方法をより考えてみることができますよ。 この方法が機能するかをテストする必要があります。 必要に応じて作動しても、サーバーの容量を削減には効果がないこともあるようです。

      1）まず、WP Smushのようなイメージの最適化プラグインをインストールします。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-wp-smush/

      このようなプラグインをインストールして有効にすると、メディアファイルをアップロードする際に、圧縮をさせます。 しかし、無料版では、元のサイズを維持します。 有料版を使用する必要が元自体の大きさも軽減します。

      2)
      Quformでは、イメージをメディアライブラリに保存するオプションもあります。

      https://www.screencast.com/t/zOUPJn6SPsn

      メディアライブラリに保存するオプションを有効にすると、画像がメディアライブラリにアップロードされ、WP Smushなどのプラグインを介し圧縮になります。 しかし、有料版を使用する必要が元のサイズが変更されます。

      さらに、問題はメディアライブラリにアップロードされ、サムネイルファイルも一緒に生成される可能性があります。 /wp-content/uplaods/2021/...フォルダの下を見ると、同じ名前の画像ファイルが複数作成されていることを確認できます。

      https://www.thewordcracker.com/intermediate/too-many-image-files-in-wordpress/

      従ってこの方法は、むしろサーバーのストレージ容量をより占める可能性もあり、実効性がないこともあります。

      上記を考慮して適切な方法を選択してください。 個人的には、ファイルのアップロードサイズを制限し、「画像をアップロードする前に圧縮したり、画像サイズを小さくしてほしい」と要求する案内文を表示するのは大丈夫かと思います。

      応答

      • 迅速な回答ありがとうございます。 ところが、700枚の写真がコンピュータや既存の写真をアップロードするのがではなく、カメラで撮ってあげる方法です。 それnasに設置した WordPressを介してデータを受信します。 現在は、お客様から必要なものを実装は、試してみたサーバーの容量管理とトラフィックの問題が発生するように思えるアップロード時 WordPress 写真のアップロードのように自動的に削減する方法を探しています。 ㅠㅠ

      • もう少しサイト構成を申し上げると、フォームとして発注フォームを受け取ります。 発注様式に10～12枚で写真を受け取るのに発注を入れる方式がスマートフォンカメラを通じた発注です。 回答いただいた方法では実装が少し難しいようです。 、コメントありがとうございますが、すべてです...ㅠㅠ3〜4メガの写真を700日1枚740年にすると、約XNUMXギガという非常に美しい容量が出てきて...;;; もしquform hook機能やスクリプトコードを利用した自動容量削減方法はないのか、これがやわらかいので、さらっと怒っても方法を知りたいですね。

      • ええと…この場合、画像ファイルをPCにバックアップしてから定期的に（例えば、月に一度）削除するのはどうですか？

        Quformでファイルのアップロードフィールドを作成し確認してみる/ wp-content / uploads / quform / 2/2021形式のフォルダにファイルがアップロードなりますね。

        そして ファイルバードのような WordPress メディアライブラリフォルダのプラグインを使用すると、伝言板でもファイルを体系的に管理することができます。

  3. また、...ここに来るアドバイスを求めます。 ㅠㅠㅠㅠ
    quformsでselect menu項目をdbにある内容で入れたくググルシンに検索したら

    jQuery(function ($) {
    var calculate = function () {
    var total = 0;

    // A text input field with numeric value
    var
    val4 = $('.quform-field-3_7').val();
    val5 = $('.quform-field-3_8').val();
    if (val5 && val5.length && $.isNumeric(val5)) {
    total += parseFloat(val5*val4);
    }
    // Display the result to the user (optional)
    $('#form-total').text('Total:' + total+ '￦');

    // Set the value of the hidden field (optional)
    $('.quform-field-3_20').val(total).triggerHandler('change');
    $('.quform-field-3_10').val(total).triggerHandler('change');
    };

    // Calculate on page load
    calculate();

    // Recalculate when these text input fields are changed
    $('.quform-field-3_7').on('keyup blur', calculate);
    $('.quform-field-3_8').on('keyup blur', calculate);
    });

    というフレーズを教えてくださった主に私のコード自体が自動的になかろう。
    そして、コードが動作してもquforms> settings> Custom JavaScripでphpが動作するかもしれません...

    まとめるとwpdatatablesに作成したdbの中にrow項目一つをquforms select menu項目に入れたいのに..方法が何があるのでしょうか...

    応答

    • こんにちは？ このjqueryスクリプトは、ユーザーが選択または入力した値を計算して、他の Quform フィールドに自動的に入力されるようにする機能を行うことです。 例えば、計算値をquform-field-3_20に保存した場合、フォームを送信する際quform-field-3_20フィールドの値がカスタムテーブル内のレコードとして保存されるようにコードを作成してテーマ関数ファイルに入れでしょう？

      まとめるとwpdatatablesに作成したdbの中にrow項目一つをquforms select menu項目に入れたいのに..方法が何があるのでしょうか...

      =>この部分につきましては、正確にどのようにすることを望んで感が取れないですね。
      WpDataTablesで作成したカスタムDBにQuformを通じて渡されるデータを入れてから、WpDataTablesを使ってフロントエンドに表示する目的で活用できるようですが...

      応答

      • quformsで作られた記事のリストフォーム（例えば、記事名、記事の電話番号）を利用して入力されます。 その後、wpdatatablesを利用して二つの項目をdbテーブルを作成して保存します。 そして記事のリストの中から記事名が、他のフォームselectmenuに項目に自動的に記事の名前だけ呼んで来ることができように項目が作成されたものを作りたいと思います。 https://godblessc.com/table.jpg

      • 意図を理解しました。

        次のようなquformのフックを使用して目的の操作が可能になります。

        テーマの関数ファイルにコードを追加します。

        add_action('quform_pre_display_1', function (Quform_Form $form) {
        // Custom code
        });

        Custom code部分にDBからデータをドラッグして満たすコードを入れていただければされます。

        例として、次のようなコードを参照することができます。

        function my_load_booking_data（$ form）
        {
        グローバル$ wpdb;

        $id = isset($_GET['booking_id']) ? $_GET['booking_id'] : '';

        if（！$ id）{
        戻り値;
        }

        $result = $wpdb->get_row($wpdb->prepare("SELECT * FROM bookings WHERE id = '%s'", $id));

        if（is_object（$ result））{
        $startDate = '';
        if（$ result-> start_date）{
        $startDate = explode('-', $result->start_date);
        $startDate = array('day' => (int) $startDate[2], 'month' => (int) $startDate[1], 'year' => (int) $startDate[0]);
        }

        $endDate = '';
        if（$ result-> end_date）{
        $endDate = explode('-', $result->end_date);
        $endDate = array('day' => (int) $endDate[2], 'month' => (int) $endDate[1], 'year' => (int) $endDate[0]);
        }

        $ form-> setValues（array（
        'iphorm_2_4' => $result->id,
        'iphorm_2_1' => $result->name,
        'iphorm_2_2' => $result->email,
        'iphorm_2_3' => $result->message,
        'iphorm_2_5' => $startDate,
        'iphorm_2_6' => $endDate
        ））;
        }
        }
        add_filter（ 'iphorm_pre_display_2'、 'my_load_booking_data'）;

        上記のコードは、Form 1から送信されたデータをForm 2の特定のフィールドに入力する機能をすることQuformで提示しているコードです。 ただ参考だけハシゴヨ、実際のコードは、実際の状況に合わせて少し応用すると思われる。

        WordPressでカスタムDBからデータをドラッグするには https://wordpress.stackexchange.com/questions/51984/how-to-display-data-from-custom-table-in-wordpress-database 文を参照してみてください。

      • ああ、上記のコードは、間違ってコピーしました。
        jQuery（関数（$）{
        var $select1 = $('.quform-field-10_3'),
        $select2 = $('.quform-field-10_4');

        var data={
        'Toyota': [
        { text: 'Camry', value: 'camry' },
        { text: 'Corolla', value: 'corolla' },
        { text: 'RAV4', value: 'rav4' }
        ],
        'Ford': [
        { text: 'F-150', value: 'f-150' },
        { text: 'Focus', value: 'focus' },
        { text: 'Kuga', value: 'kuga' }
        ],
        'Volkswagen': [
        { text: 'Golf', value: 'golf' },
        { text: 'Polo', value: 'polo' },
        { text: 'Tiguan', value: 'tiguan' }
        ]
        };

        $select1.on('change', function() {
        var value = $ select1.val（）、
        options = [new Option('Please select', '')];

        if（data [value]）{
        for（var i = 0; i <data [value] .length; i ++）{
        options.push（new Option（data [value] [i] .text、data [value] [i] .value））;
        }
        }

        $ select2.html（options）.prop（「selectedIndex '、0）;
        }）。change（）;
        }）;

        このコードだ。;;; 他のコードを入れました。

      • お知らせいただいた方法で、今日一日前後に走ったが、やはりコーディング理解と応用能力がだめ現在は放棄をしました。 有料講義があれば聞いてみたい。ㅜㅜ;

      • こんにちは。 手間が多いです。 テストをしてみると思うように作成が容易ではないですね。ㅠこの方式を実装する方法を探してみる Gravity Formsプラグインのアドオンの中、このような機能を提供するプラグインがあるようです。 https://gravitywiz.com/documentation/gravity-forms-populate-anything/ サイトを参照してみてください。

        https://www.screencast.com/t/lW8z0BvA

        Quformはシンプルに使用するには良いが、開発が必要な場合には、Gravity Formsが機能面でより豊かなものになります。 Gravity Forms料金表を見てみるとBasicが年間59ドルで、毎年の費用が出るのでquformの割には費用負担がある方です。

        まずはアドオン、プラグイン開発者に必要に応じて実装が可能かどうか、一度お問い合わせ見ればいいようです。

    • 遅い時刻まで手間が多いです。 問題が解決されたことをうれしく思いですね。

      キュポムも自主的にDBテーブルを作成するので、カスタムテーブルを作成せずに、Quform DBテーブル内のレコードを呼んで来て、フロントエンドに表示する場合、管理者ページ内で変更する場合、フロントエンドにも反映されます。 しかし、Quformでwp_quform_entiriesとwp_quform_entry_dataというXNUMXつのDBのテーブルを作成し、テーブルの列構造が少し複雑でMySQLのJoinを使用して、必要なデータとして表示することができるようです。 wpDataTablesを活用すれば、Quform問い合わせフォームデータをプリントエンドに必要に応じて表示することができます。

      楽しい一週間過ごしてください。

      応答

  5. 迅速な回答ありがとうございます。 本文に添付してくれた映像見て修正するテーブルまでは作成しましたが、フロントエンドで修正するとDB側に修正したデータがコピーされ、新たに生じる問題が発生しました。 修正するたびに新しくなりました...

    応答

  6. mysqlでテーブル作成、quformsでdatabaseも作って、通常の入力はされたが、quforms> entriesで内容の変更をしたmysqlデートは修正がいけない。もし、この部分の解決策でしょう。;;;ㅜㅜ

    応答

    • こんにちは、ジョンミンホ様。 Quformでは、データをDBに保存するオプションを提供しています。 デフォルト値をそのまま使用する場合Quform問い合わせフォームを介して送信されるデータは、独自のDBテーブルに格納されてForms> Entriesで確認が可能です。 基本的にwp_quform_entry_dataテーブルに保存されており、entry_id、element_id、valueの3つの列で構成されています。

      Forms> Entriesで変更する場合wp_quform_entry_dataテーブル内のレコードが変更されます。

      カスタムテーブルを作成する場合wpDataTables> Create a TableでCreate a data table manuallyを選択して、新しいテーブルを造り、

      カラムを作成するときにUser IDカラムを一つ追加するようにします。 次にEditingタブでAllow front-end editing（フロントエンドの編集を許可）オプションを有効にすることができます。

      https://www.screencast.com/t/tJeQlvzGFNBf

      思うように実装するのは難しい場合 wpDataTables販売にサポートを要請してください。 このプラグインをうまく活用すれば、開発作業が容易になるでしょう。 このプラグインは有料プラグインであるため、目詰まり部分があれば支援を要請することができます。

      応答

      • 迅速でフレンドリーな回答ありがとうございます。 WPdatatableを購入し、答えてくださったように実装はしましたが、まさにその次の順序がどうしてもわかりません。 ㅠㅠ 最終はquaformsデータをフロントエンドに送り、内容を修正した時もフロントエンドで修正された内容が反映になるようにするのですが修正反​​映が部分が説明してくださるまで進行をしましたが…と同じ言葉だけ繰り返して申し訳ありません。 ㅜㅜ

      • 本文に「ユーザーが自分のデータを表示および編集できる編集可能なテーブルの作成」セクションを追加しました。 そのセクションに挿入されたYouTubeのビデオを参照してください。 思ったようにうまく実装されていない場合は、wpDataTablesプラグインの販売者に連絡して案内を受け取ることができます。

  7. こんにちはブログを頻繁に見ている WordPress 初心者です。
    国内で WordPress 資料を最もよく整理されたサイトだから、多くの助けになりますよ！
    ホームページを制作中quformで入力されたデータをwpDataTablesに受けてみたいのですが
    接続がだめよㅜㅜ
    もし該当の説明や資料お願い求めることができる？

    応答