Shifter で Contact Form 7 を利用する

2019年2月13日

Shifterで作られる静的なサイトに入力フォームを設置する

静的なファイルを出力するため、WordPressの入力フォームはそのまま利用することができません。WordPressのプラグインと外部サービスを組み合わせて実現することができます。今回は、WP Serverless Forms、Basin、Contract Form 7 を組み合わせて利用する方法が公開されていました。

https://support.getshifter.io/contact-forms-on-shifter/using-wp-serverless-forms-wordpress-plugin-with-basin

Basin

Basin は入力フォームのバックエンドとして受け付けてくれるサービスです。

https://usebasin.com/

 

フォームの作成

アカウントを作成後にろぐいんすると、フォームを作成することができます。

 

名前(name)を入力し、Create form をクリックします。

エンドポイントURLのコピー

フォームが作成されたら、上のメニューからSetupをクリックします。URLが表示されますので、コピーします。

 

WP Serverless Forms

WP Serverless Forms は、IFTTT、Basin、FormKeep、Formspree などと連携することができる、Sifterから公開されているWordPressプラグインです。

WP Serverless Formのインストール

通常のWordPressプラグインのインストール方法となります。プラグイン>新規追加をクリックします。

WP Serverless Formを検索し、インストール、有効化します。

設定>WP Serverless Formsをクリックします。

BasinのエンドポイントURLを入力

basinでコピーしたURLを入力し、変更を保存します。

Contract Form 7

Contract Form 7のインストール

WP Serverless Formsと同様に、Contract Form 7のプラグインを検索します。

ショートコードのコピー

メニューから、お問い合わせをクリックします。コンタクトフォームのショートコードが表示されますのでコピーします。

ショートコードの貼り付け

固定ページなどにショートコードを貼り付けます。

以上で、コンタクトフォームを追加することができます。入力されたデータはBasin経由でメールで通知されるようになります。