Last Updated on 2025年11月09日 by ワードプレスの学校 学長 柳内郁文
会員制サイトでユーザーにログインしてもらう際、ワードプレスのログイン画面を出すのではなく、オリジナルのログイン画面を出したいと思ったことはありませんか？
今回はJetformbuilderでオリジナルのログインフォームを作っていきたいと思います。
オフィシャルの解説はこちらですが、分かりづらいのでキャプチャ付き、ステップバイステップで解説していきます。
Jetformbuilderについて
今回使うプラグインはJetformbuilderです。
Jetformbuilderは無料のプラグインですが、今回のログインフォームには有料版が必要です。
まだお持ちでない方はこちらから購入できます。
Jetformbuilderでログインフォームを作る
まず、Jetformbuilderでフォームを作ります。
Jetformbuilderはオフィシャルにありますので、検索すると出てきます。
ログイン用の「User Login Action」はJetformbuilderのマイページからダウンロードしたものをワードプレスプラグインのアップロードでインストールし有効化します。
準備ができましたら、新しくフォームを作ります。
フォームを作ると下図のテンプレートがでます。
赤で囲った「User Login」は有料版を入れるまではグレーで選択できませんので、ご注意ください。
せっかくなので、テンプレートから作っていきます。
「User Login」をクリックします。
しかし、このままでもログインできますが、機能が不十分なので、このログインフォームにパスワードリセットができるフォームに機能追加していこうと思います。
「User Login」のテンプレートで作られたログインID／パスワード／パスワードを保存／ログインボタンをConditionブロックの中に入れます。
ちなみにパスワードはそのままでも使えますが、Field Typeをパスワードに変更し、Show eye iconをONにしておくと良いでしょう。
Conditionsを設定します。これは意味がよくわからないのですが、とりあえず、設定していきます。
ConditionsのEditになっていますが、本当はAdd Newです。
そうしましたら、ポップアップが開きますので、FIELDは無視してOPERATORから「Is render state」を選択します。
RENDER STATEはプルダウンからDEFAULT.STATEを選択します。Updateをお忘れなく！
Jetformbuilderでパスワードリセットフォームを作る
次にパスワードリセットフォームを作っていきます。
resetで検索するとリセットパスワードフィールドとリセットパスワードボタンがでてきますので、この2つを使います。
2つのブロックをConditional Bolckに入れてShow current blockを設定します。
先ほどと同様、OPERATORでIs render stateを選択。
前はプルダウンから選びましたが、今度はプラスボタンを押下して新しいSTATEを追加します
ここで新しいSTATEを作成します。先ほどの「DEFOLTE.STATE.2」に設定して、RESET.PASSWOEFをプルダウンで選択して、Updateします。
パスワード変更画面を設定する
パスワードをリセットする手順は、(1)メールアドレスを送信、(2)メールのURLをクリック、(3)パスワード変更画面でパスワードを変える、という流れになります。
このパスワード変更URLを送信するメールとパスワード変更画面を設定していきます。
Reset Password Fieldsのクリックし、Edit StateをDefaultから「Reset」に切り替えます。
そうするとReset Password Fieldsがパスワードの変更画面に切り替わりますので、入力項目のタイトルとボタンの名称を変更してください。
次にパスワード変更が行わたときのアクションを設定します。
上の3箇所はデフォルトのままで大丈夫です。
ここではパスワード変更URLを送信するメールの設定をします。
そのままでも機能はしますが、メールの内容が英語ですので、変更を推奨します。
キャプチャはその下の赤枠です。その他の箇所も適宜変更してください。
ログインフォームとパスワードリセットフォームの切り替え
次にログインフォームに「パスワードを忘れた方は」というボタンでパスワードリセットフォームに、パスワードリセットフォームに「ログイン画面に戻る」というボタンでログインフォームに画面を切り替える設定していきます。
Conditional Bolckの切り替えは、アクションボタンを使います。
アクションボタンの種類は「Change Render State」を選びます。
また、SWITCH STATEで前に設定しておいたSTATEを選択します。
パスワードリセットにつける「ログイン画面に戻る」も同様です。
SWITCH STATEで選ぶのは「DEFOLTE.STATE」です。
最後の設定です。
この部分を設定していきます。
User Login の Conditions & Eventsを設定します。
Events matchのタブでON.DEFAULTS.STATEで設定します。
次にSend EmailのConditions & Eventsを設定します。
これはリセットパスワードのURLを送信するメールです。
今度はEvents matchのタブでON.DEFAULTS.STATE.2に設定します。
最後にReset Password のConditions & Eventsも設定していきます。
Events matchでON.DEFAULTS.STATE2とON.RESET.PASSWORDの2つを選択します。Updateもお忘れなく！
以下が最終系です。
自分の設定と合致しているか確認してください。
まとめ
最後にデザインを整えて終わりです。
以下のようなオリジナルのデザインを作ってみてください。
