お問い合わせフォーム用のWordPressプラグインTrust Formの設定!

公開日:2013年12月27日
最終更新日: 2014年12月26日

trust_form_photo_01

こんにちは!

皆さんは、お問い合わせフォーム用のWordPressプラグインは何を使用されていますか?

私は最近まで「inquiry form creator」を使用していました。しかし「inquiry form creator」の開発が終了してしまった為に、その後継である「Trust Form」を新たに設置してみましたので、備忘録として記事にしておきたいと思います。

目次!

1.手順!
2.Trust Formの設定!
3.Trust Formの使用方法!
4.管理画面からお問い合わせ内容の確認!

手順!

Trust Formプラグインを導入!

管理画面にログインし「プラグイン」⇒「新規追加」をクリックしてください。

trust_form_photo_02

プラグインのインストール画面が表示されますので検索ボックスに「Trust Form」を入力し「プラグインの検索」をクリックしてください。

trust_form_photo_03

プラグイン検索の一覧が表示されまので、その中の「Trust Form」の「いますぐインストール」をクリックしてください。

trust_form_photo_04

以下の様な確認画面が表示されますので「OK」をクリックしてください。

trust_form_photo_05

「Trust Form」がインストールされましたので「プラグインを有効化」をクリックしてください。

trust_form_photo_06

プラグインのトップに戻り「プラグインを有効化しました。」の表示と実際に「Trust Form」がインストールされプラグインが有効化されているのが確認できます。

trust_form_photo_07

Trust Formの設定!

まずはフォームの新規作成!

管理画面サイドメニューの「Trust Form」⇒「フォームの新規作成」をクリックしてください。

trust_form_photo_08

以下の画面が表示されます。こちらで「入力画面」「確認画面」「完了画面」の設定を行います。

trust_form_photo_09

最初にフォーム名を作成。今回の例では「お問い合わせ」にしています。

trust_form_photo_10

入力画面の設定!

入力画面に「フィールド」を設置します。

最初は「必須マーク」に設定するテキストを入力します。「必須マーク」⇒「Require Mark」の「必須マーク用テキスト」へ必須マークのテキストを入力します。今回の例では「必須」にしています。設定が完了したら「close」で閉じて下さい。

trust_form_photo_11

次に入力画面に必要な項目を「フィールド」から「フォーム要素をドラッグ・アンド・ドロップして下さい」へ移動させます。

今回は以下のような設定にします。

フィールド:テキストボックス
title:お名前
属性:sizeを40
入力チェック:必須をチェック

フィールド:メールアドレス
title:メールアドレス
属性:sizeを40
入力チェック:必須をチェック

フィールド:テキストエリア
title:お問い合わせ内容
属性:rowsを10、colsを50
入力チェック:必須をチェック

「お名前」のテキストボックスの設定。
「設定」ボタンをクリックすると、テキストボックスの設定画面が表示されます。

trust_form_photo_33

次に「メールアドレス」のテキストボックスの設定。「設定」ボタンをクリックすると、メールアドレスの設定画面が表示されます。

trust_form_photo_13

最後に「お問い合わせ内容」のテキストエリアの設定。「設定」ボタンをクリックすると、テキストエリアの設定画面が表示されます。

trust_form_photo_14

管理者宛メールの設定!

お問い合わせがあった時に管理者宛に届くメールの設定をします。

trust_form_photo_15

今回は以下のような設定にします。

From Name:サイトタイトル名を入力。
From:メールアドレスを入力。
to:メールアドレスを入力。
件名:件名を入力。

自動返信メールの設定!

まずは「自動返信メールを使用する」をチェックしてください。

trust_form_photo_16

お問い合わせがあった時にユーザー宛に届くメールの設定をします。

trust_form_photo_17

今回は以下のような設定にします。

From Name:サイトタイトル名を入力。
From:メールアドレスを入力。
件名:件名を入力。
本文:
お問い合わせありがとうございます。
追って担当者からご連絡差し上げます。

[FORM DATA]

—–
サイト名

確認画面の設定!

「確認画面」をクリックしてください。

trust_form_photo_18

「確認画面」にテキストを追加します。「テキストを入力して下さい」の部分をクリックするとテキストを入力できます。

今回は以下のテキストを確認画面に表示するようにしました。

下記内容に問題がなければ、送信ボタンをクリックして下さい。

trust_form_photo_19

完了画面の設定!

「完了画面」をクリックしてください。

trust_form_photo_20

「完了画面」にテキストを追加します。テキストボックスをクリックするとテキストを入力できます。

今回は以下のテキストを確認画面に表示するようにしました。

お問い合わせ頂きまして、誠に有難うございます。内容を確認後、早急にご返信させて頂きます。
もし数日中に返事が無い場合は、正しく受信できなかった可能性がありますので、恐れ入りますが再度のご連絡をお願い致します。

trust_form_photo_21

最後に更新!

一通り設定が完了したら「更新」ボタンをクリック。必ず「更新」ボタンをクリックして下さい。

trust_form_photo_22

これで「Trust Form」の設定が完了しました。次はこの作成したフォームを実際に使用してみます。

Trust Formの使用方法!

タグの取得!

「Trust Form」⇒「フォームの編集」をクリックしてください。

trust_form_photo_23

作成したフォームの一覧が表示されるので、該当のフォームの「編集」をクリックしてください。

trust_form_photo_24

タグをコピーして下さい。

trust_form_photo_25

コピーしたタグをページに貼り付ける!

「記事投稿ページ」もしくは「固定ページ」にコピーしたタグを貼り付けて下さい。必要事項を入力し最後に「公開」ボタンをクリックして下さい。

trust_form_photo_26

お問い合わせフォームの画面は以下のようになります(CSSで設定はしています)。

trust_form_photo_27

管理画面からお問い合わせ内容の確認!

お問い合わせがあった時に管理画面より、お問い合わせの内容を確認できます。

「Trust Form」⇒「お問い合わせ内容」をクリック。

trust_form_photo_28

該当のフォームを選択してください。

trust_form_photo_29

お問い合わせの一覧が表示されますので、確認したお問い合わせの「閲覧」をクリックしてください。

trust_form_photo_30

お問い合わせの内容が確認できます。メモを追記したり、既読に設定したり出来ます。

trust_form_photo_31

これで「お問い合わせフォーム用のWordPressプラグインTrust Form」の設定は完了です。

最後に!

実際にフォームを作成したら必ずテストはして下さい。画面が正常に遷移するかどうかや、入力の必須項目のチェックやお問い合わせ完了後にメールが届くかのチェックなどは必須です。

お問い合わせフォーム用のWordPressプラグインの中ではおすすめなので、一度試してみて下さい。

以上「お問い合わせフォーム用のWordPressプラグインTrust Formの設定!」でした!

それではまた。

【その他「Trust Form」関連の記事です】
ロリポップ!でWordPressプラグイン「Trust Form」の更新が出来ない場合の設定!

公開日:2013/12/27
最終更新日: 2014年12月26日
カテゴリー:WordPress

関連記事

新着記事

コメント/トラックバック (9件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS

  1. Trust Formで探してこちらに来ました。
    これデフォルトで作るとデザインがいまいち悪いですよね。CSSエディタを触りましたが正直よくわからなくて。
    そこでお願いなのですが、シンプルなデザインでいいのでコピペで使えるCSSエディタのテンプレートを作っていただけないでしょうか?

    私にはこれが限界でした。

    div.contact-form {
    height: auto;
    width:350px;
    text-align:left;
    }

    突然で申し訳ありませんが、もし可能であればよろしくお願いいたします。

  2. りん様

    コメント、有難うございます!
    当サイトのCSSを以下に貼り付けておきますので、一度、試してみてください。
    独自に設定しているCSSによって設定は変わってくると思います。

    /*——————————————————————-
     お問い合わせ
    ——————————————————————–*/
    #trust-form table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd5c4;
    padding: 10px 5px 10px 5px;
    }

    #trust-form table th {
    width: 30%;
    border: 1px solid #bbbbbb;
    padding: 10px 10px 10px 10px;
    background: #fafafa repeat left top;
    font-weight: normal;
    vertical-align: top;
    text-align: left;
    }

    #trust-form table td {
    width: 70%;
    border: 1px solid #bbbbbb;
    padding: 10px 10px 10px 10px;
    background: #ffffff;
    }

    #trust-form table td a {
    color: #716044;
    text-decoration: underline;
    background: #ffffff;
    }

    #trust-form table td a:hover {
    color: #d60208;
    text-decoration: none;
    background: #ffffff;
    }

    #trust-form table input[type="text"], #trust-form table select, #trust-form table textarea {
    border: 1px solid #dddddd;
    padding: 8px;
    border-radius: 5px;
    }

    /*————————————-
    送信確認ボタン
    ————————————–*/
    .check_btn, .submit_btn, .return_top, #trust-form input[type=submit][name="send-to-confirm"], #trust-form input[type=submit][name="send-to-finish"] {
    display: block;
    width: 200px;
    text-align: center;
    background: #b8993a;
    background: -webkit-gradient(linear, left top, left bottom, from(#b8993a), to(#8f772e));
    background: -moz-linear-gradient(top, #b8993a, #8f772e);
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 5px #cec4aa;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 0 #aaaaaa;
    margin: 30px auto;
    cursor: pointer;
    }

    #trust-form p#confirm-button input[type=submit][name="return-to-input"] {
    margin-left: 90px;
    }

    #trust-form input[type=submit][name="send-to-finish"], #trust-form input[type=submit][name="return-to-input"] {
    float: left;
    }

    #trust-form p#confirm-button input[type=submit][name="return-to-input"] {
    margin-right: 10px;
    }

    p.btn {
    width: 200px;
    padding-left: 205px;
    }

    p.btn a {
    text-decoration: none;
    border: none;
    }

    .check_btn:hover, .submit_btn:hover, .return_top:hover, .return:hover, #trust-form input[type=submit]:hover {
    text-decoration: none;
    filter: alpha(opacity=65);
    -moz-opacity: 0.65;
    opacity: 0.65;
    }

    /*————————————-
    戻るボタン
    ————————————–*/
    .return, #trust-form input[type=submit][name="return-to-input"] {
    display: block;
    width: 200px;
    text-align: center;
    background: #be161a;
    background: -webkit-gradient(linear, left top, left bottom, from(#ab0205), to(#be161a));
    background: -moz-linear-gradient(top, #ab0205, #be161a);
    border-radius: 5px;
    box-shadow: 0 0 5px #cec4aa;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0 #aaaaaa;
    margin: 30px auto;
    border: none;
    cursor: pointer;
    }

  3. ありがとうございます!シンプルですごくいいです。このまんま使わせていただきます(笑)
    wptouchでもうまく動きました。ありがとうございました!!(^-^)

  4. りん様

    上手くいって良かったです。
    今度とも宜しくお願いします。

  5. こんにちは。
    先日はCSSありがとうございました!
    しばらく使ったのですが、スマホでwidth300で表示すると見ると左のth部分が狭くなるのが気になっています。
    コンタクトフォームみたいにthを縦にする方法があったら教えてください。

  6. りんさま

    コメント有難うございます!

    すいません。ちょっと状況がよく分からないのですが、他のページで試したら、うまくいかないということでしょうか?

  7. […] 使い方はこちらでご確認ください。 http://wp-technique.com/wordpress-10/ […]

  8. […] フォーム – Trust Form http://wp-technique.com/wordpress-10/ […]

  9. […] お問い合わせフォーム用のWordPressプラグインTrust Formの設定! こんにちは!皆さんは、お問い合わせフォーム用のWordPressプラグインは何を使用されていますか?・・・【WordPressの実】 […]




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly