【WordPress】お問い合わせフォーム作成してみた②

wordpress-logo-stacked-rgb

2012年06月28日(木)

  前回使用したinquiry-form-creatorでは、カスタマイズの部分で時間がかかりそうだったので、今回はcontact form 7を使ってみる事にした。 もちろん確認画面は必須機能で搭載させてみました。           前回使用したinquiry-form-creatorと比べて、 かなりカスタマイズ性が増します。 CSSでの制御がかなり楽になる印象です。 ただ、確認画面がないですよね。。。 これはこの記事の最後に記載しているので参考までに。   まずはいつものようにインストールをしよう! contact form 7と検索するとヒットします。   ダウンロードして有効化すれば完了! 以下画面が表示されます。                   1つデフォルトで作成されているので新しく作成してみましょう。 僕の場合は「お問い合わせ」という名前で作成してみました。                   次にカスタマイズを行います。     フォームの項目の追加ですね。 僕の場合は、 ・テキストボックス ・ラジオボタン ・ドロップダウンリスト ・テキストエリア を使用するので(ほぼすべて?)大抵のフォーム項目は網羅できるでしょう! 設定方法は、 「タグ生成」を押して記入項目に記入します。                 「このコードをコピーして、左のフォームにペーストしてください」に従い、 左のフォームのテキストエリアの任意の箇所にペーストします。                   この用量でどんどん追加していきます。 すべて追加したのが以下になります。                   はぁ。。はぁ。。。 これ結構つらい作業だな。 ただ、最初やっとけばあとは楽らしいから頑張ろう。     次は受信メールのフォーマット設定になります。 僕の場合は疲れたので適当に以下のように設定しました。                 これで一通りのフォーム作成と受信メールは受け取れる体制になったはず。 結構長いけどあとあと便利らしいから頑張ろう。(2回目ww)   さぁまだ終わりではないです!! 次は表示方法!! これは簡単っぽいですね!   以下画像の赤枠で記載されているコードを、 任意のページに貼り付けるだけです!! よっしゃーー!                 添付してみた結果は以下になります。 どうでしょうか?ww CSS施していないので不細工ですねwww                   では、CSSをかけてみましょう! どん!!                         ボタンに画像を参照させている方法は、 直接 <input type=”image” value=”送信” src=”通常のボタン画像のURL” onmouseover=”this.src=’マウスオーバー時のボタン画像のURL'” /> とか入力すればいけるようです!! あせった~。。。 ついでにフォームでの問い合わせ完了後の、 完了画面への遷移も実装してみましょう。   といいつつも疲れたので、   大体を書くと、 ・完了ページの固定ぺ時を作成 ・そのURLをコピー ・「お問い合わせ」の「その他の設定」箇所に on_sent_ok: “location.replace(‘さっきコピーしたURL’);” を張り付ければいいだけです。     ではまた! ※WordPress祭り継続中!!   あっ!確認画面わすれてた… これは別途記述する事にします。 とりあえずこの記事はつかれたのでいったんクローズとします。     以下参考になります! ありがとうございました! □参考 WordPressの Contact Form 7 でお問い合わせメールフォームを設置する方法 http://www.imaginationdesign.jp/blog/wordpress/581/ WordPressの Contact Form 7でお問い合わせ完了ページを新規に設置し、コンバージョンを設定する方法 http://www.imaginationdesign.jp/blog/wordpress/584/    

スポンサードリンク

運営サービスPR

スポンサードリンク

運営サービスPR