2020年08月19日

-Elementor-お問い合わせフォームを簡単に作ろう

こんにちは、SeekNextの木谷です。前回Elementorの使用時に知っておきたいレイアウト設定についてご紹介しました。

今回は、HPに必須の「お問い合わせフォーム」の簡単な作り方をご紹介します。

有料版ではお問い合わせフォームのウィジェットが標準実装されているのですが、無料版でもプラグインを使えば簡単に実装が可能です。

こんな感じのフォームが一瞬で作れちゃいます!それでは早速いってみましょうー!

プラグイン「WPForms Lite」を有効化にする

このプラグインがElementorと相性いいんです!簡単に説明すると、

・HTMLの追加のみで表示

・日本語対応

・メール送信後、メッセージ表示か送信完了ページに遷移

・編集がとにかく簡単

・編集した内容がすぐ横のプレビュー画面に反映されていく

とりあえず、実際に触ってみましょう!

フォームの新規追加

今回は、「簡単なお問い合わせフォーム」を作成します。こんな感じの画面が出てきます。なんかElementorと似てますよね。

中身の編集は「フィールド」のところから可能です!今回は複数選択やドロップダウンも入れてみました。

ちなみに、「設定」のところから送信ボタンの編集などもできます。

完成したフォームを設置する

一覧に記載されているショートコードをコピーします。Elementorの「ショートコード」ウィジットを予めフォームを追加したい場所に入れておき、そこにペーストしてみると…

こんな感じになりました!

リダイレクト機能もあり

送信後、自動で送信完了ページに遷移するよう設定も可能です。その場合は「設定」の「確認」から設定ができます!

もちろん受信した場合はメールで通知が来ますよ。

どうでしたでしょうか?実際に試してみてくださいねー!次回もお楽しみにー!