こんにちは、山田です。
どんどん、テクニックを公開しちゃいますよ!
webサイトから問い合わせとか、申し込みをカッコいいフォームから送信させる昨日って欲しくなりますよね?
でも、難しいタグは書けないし、知識もそんなにない...という方にはこれがオススメ!
contact foam 7
こちらです。
ワードプレスのプラグインなので、インストールして、少し加工するだけで、まぁまぁ使いやすいフォームになります。
なにより、実際に使っている方が多いと言うことは、ヘルプ記事なんかもたくさんありますので、ちょっと「こう言う場合はどうやればいいの?」って言う時、調べやすいです。
1.管理画面の「プラグイン」から導入
管理画面のプラグインをクリックしましょう。
すると、プラグイン(すでに導入しているもの)の一覧画面に移ります。
すでに導入している方以外は、そこにはまだありません。
そこに追加するために「新規追加」のボタンをクリックします。
2.「contact foam7」で検索
検索と言っても、プラグインの検索です。(念のため。)
キーワードで「contact foam７」と入れて検索してください。
すると富士山の絵が象徴的ですぐに候補に上がってきたのがわかると思います。
プラグインの右上に、初回は「今すぐインストール」というボタンがありますので、それをクリックします。
クリックすると、自動的にインストールされます。(まだ、この段階では、有効化されていません。)
※有効化する場合には、現行のテーマやWPのバージョンなどが適合して、正しく動作すること(問題ないこと)を確認してください。
3.有効化する
今回は、まだ有効化せずに、編集へ行きます。
もう一度プラグイン一覧へ戻ります。
すると、こんどは一覧に「contact foam7」が加わっていると思います。
「有効化」のボタンを押して、有効化します。
すると「有効化」→「設定」に変わります。
設定をクリックすると設定画面に移動します。
4.設定する
ここの一覧に出てきます。
最初に導入したばかりはデフォルト(初期設定)の「コンタクトフォーム１」という名前のものが1つある状態だと思います。
上にカーソルを合わせると、「編集」「削除」のボタンが出てきますので、「編集」ボタンか、名前をクリックすることで編集画面に移ります。
簡単に紹介しておくと、こんな感じです。
フォームの内容や、送信したときに相手に通知されるメール内容や、フォムの送信先、メッセージの設定や、エラー時のコメントまで細かく設定できます。
5.フォームを実際に設置する
5-1 設置コードのコピー
今回は設置の方法だけを解説しますので、細かな設定方法は別の記事を参考にしてください。
設置の方法は簡単です。各種の設定が済んだら、"カッコで囲われているコード"をコピペで設置したい場所に貼り付けるだけです。
コードはここに書いてあります。
Wクリックすると、コードがすべて選択された状態になります。
その状態で、「右クリック」をして「コピー」しましょう。
5-2 実際に設置する
コピーしたら、設置したいページ編集を開きます。
今回はサンプル用に「テストページ」を設けました。
わかりやすいように文を入れてみました。
これは編集ページです。
まだ、フォームは設置していないので、プレビューしても、ありません。
5-3フォームを設置する
もういちど編集ページに戻ります。
テキスト編集でも、ビジュアル編集でも、どちらに貼り付けても大丈夫です。
今回は、この位置に貼り付けてみます。
これで設置は完了です。簡単ですね。
プレビューでも、設置した場所にフォームが現れました。
みきれていますが、ちゃんと送信ボタンなども付いています。
まとめ
このように簡単にフォームが設置できるのが「contact foam７」のプラグインです。
もちろん、お問い合わせ用、申し込み用など、複数のフォームを追加できますので、使い分けると良いですね。
こまかな設定方法や活用法は、またお届けしていきますので、参考にしてください。
LINE@登録で最新情報が届く!
