当サイトには広告が含まれております

WordPressにログインしたユーザーだけがメールを送れるフォームを作る

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

メンターとして参加している「CoderDojo八王子」で、ある企画を進行中です。そのために必要な技術の確認をして「WordPressでログインしたユーザーにしか見えないページを作る方法 その1」など3つ記事を書きました。
この企画ではログインしたユーザーさんがお友達に作った作品を知らせるメールを送れるようなことを考えています。ログインした人だけが見られるページにメールを送れるようにプラグインのコンタクトフォーム7でフォームを設置しました。

記事をざっと見る

コンタクトフォーム7でログインした人が簡単に入力できるフォームを作る

最初メールを送ることを考えていたときにプログラムを新しく組まないとダメかなーと思っていました。しかし、時間がない…チェックが大変そう…と考えたときに「もしかして…コンタクトフォーム7が使えるんじゃないかな?」と思いました。

コンタクトフォーム7というと、Webサイトの管理者がWebに来た方からのメールを受け取るだけのイメージだったんですが、よく見ると宛先は自由に設定できるようでした。

コンタクトフォーム7ですが初めてインストールする場合は ダッシュボード プラグイン>新規追加 をクリックして

このように Contact Form 7 とスペースを2カ所いれて入力して検索してください。文字をくっつけた状態で検索するとなかなか見つけられません。

この富士山のマークが特徴的ですので確認して、 今すぐインストール をクリック

プラグインを有効化 をクリックします。

作りたいフォームはこれです!

作りたいフォームはこんな感じです。

ログインした人だけに見せるページなのであらかじめログインした人のニックネームとメールアドレスが入るようにします。

作品のIDは、Scratchの作品のURL

あわせて読みたい

このようになっていて、最後の 78792958 IDになっているのでそれを入力します。

コンタクトフォーム7でこのフォームを作ってみる

ダッシュボードで



お問い合わせ>新規追加
 をクリック

新規追加 をクリック

入力画面がでるので、

このように入力して、

右ブロックにある 保存 をクリック

メール タブをクリック

このようにして、

右ブロックにある 保存 をクリック

これで準備ができました。

上部に表示されているこのショートコードをコピーしておきます。

フォームを表示するページを固定ページで作る

このフォームを表示するページを固定ページで作ります。その前に、ログインしたメンバーだけが使えるようにします。「WordPressでログインしたユーザーにしか見えないページを作る方法 その1」の方法で、使っている子テーマにテンプレートを追加しておきます。

固定ページを作ります。ダッシュボード



固定ページ>新規追加
 をクリック

タイトル、説明の文章を入力して、先ほどコピーしたショートコードを貼り付けます。

そしてこの固定ページの

ページ属性 で

page-members.only を選びます。これでこの固定ページはログインしたユーザーにしか表示されなくなります。

これでOKなので、

公開 をクリックします。

ログインしていない状態だと、このページに行くと



トップページ
に移動してしまいますが、ログイン後だと

このようにフォームが表示されます。

実際にどのようなメールが送られるか?

このフォームからメールを送ってみます。

このように入力して 送信 をクリック

送信されたというメッセージが表示されます。メールを見てみると

こういうメールが届いていました。中身は、

こんな感じになっていて、URLをクリックすると、

Scratchの作品ページへリンクしました。

まとめ:実はコンタクトフォーム7の設定でちょっと失敗しました(^_^;

コンタクトフォーム7の設定で失敗しました。なぜかメールが

こんな風に、送信元が WordPress となってしまってます。このときの送信元の設定は

このようになっていました。他の問いあわせフォームは大丈夫なのに?と見比べてみたらこうではなくて、

このように、送信元の名前は < > を付けて指定しないと WordPress と表示されてしまうことが分かりました(^_^;。

あと、実際にCoderDojo八王子で企画しているものはもうちょっと違うものです。もうちょっと工夫をしないといけないのでそれが次回のDojoまでにできあがるかどうか、わからないのですががんばりたいと思います。
[amazon_searchlink search=”WordPressデザイン”]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る