【Elementor】無料版でもお問い合わせフォームを導入する方法

WordPressのプラグインであるElementor。
これを使うことで、ノーコードで自在にホームページを作ることができます。

実際に僕が作ったポートフォリオページです。
https://portfolio.apo-po.com/

この中で、お問い合わせフォームを作りましたが、この導入方法について紹介します。

Pro版はウィジェットを配置するだけ

Pro版に課金した場合、フォームウィジェットを使用できるようになるので、配置するだけになります。

これだけでも、課金する価値はありますね。

無料版はContact Form 7を使う

無料版の場合は、Contact Form 7というプラグインを別途使用することで実装できます。

実装手順は、こちらの動画が参考になります。

Pro版と比べると手間ですが、それでもかなり簡単ですね。

フォーム自体のデザインをカスタマイズするのは難しいですが、これでも全然十分ですよね。

とはいうものの、僕は送信ボタンの小ささがどうしても気になりました。
そこで検索したところ、下記サイトの方法で解決しました。
https://pc-crea.com/pc/contactform/

CSSを追加することでボタンをデザインするようです。
といってもCSSをイチから書く必要はなく、このサイトでコピペすれば大丈夫です。

これでボタンが大きくなり、満足のいくお問い合わせフォームを作成できました。

--

ホームページを作る上で欠かせないお問い合わせフォームの導入方法。
参考になれば幸いです。