【コピペでOK】Contact Form 7 でのお問い合わせフォーム作成方法

「Contact Form 7を使って問い合わせフォームを作成したいけど、ショートコードとか難しい、、願わくばコピペで完結したい、、」

そんな方向けの記事です。

ランディングページ用の入力フォームをContact Form 7 で用意する

Contact Form 7 はWordPressユーザーに親しまれているプラグインです。サンクスページや分析ツールの導入も全て無料でその辺りもカバー出来るため、ビジネス目的だったり、しっかりランディングページ の計測をしたい方にもおすすめです。

またContact Form 7は決済システムも導入できるので、「LPから直で商品購入してもらう」と言ったことも可能です。

こんな感じの問い合わせフォームを作ることができます。

Contact Form 7 のフォーム

以下をコピーします。

[text* lastname placeholder "姓*" ]
[text* firstname placeholder "名*"]
[email* email placeholder "メールアドレス*"]
[text* company placeholder "会社名(個人の方は「個人」とご記載ください)*"]
[select* category first_as_label "お問い合わせ内容を選択してください*" "ホームページ制作について" "広告運用について" "Google上での掲載順位改善について" "ホームページでの集客数の改善について" "その他"]
[textarea* detail placeholder "お問い合わせ詳細をご記載ください*"]
<p id="privacypolicy">当サイトは、 お客様の個人情報について、お客様の承諾がない限り第三者に開示、提供を一切行いません。<br>ご提供いただいた個人情報を取り扱うにあたり管理責任者を置いて、適切な管理を行っております。</p>
[acceptance accept-this] <span id="accept-this">個人情報の取扱いについて、同意の上送信します。(確認画面は表示されません)</span>
[submit "送信"]

こんな感じでペーストして保存します。「メール」「メッセージ」は適宜テキストを変更、「その他の設定」は特にいじる必要なしです。

保存すると上部にショートコードが表示されるので、コピーします。

コピーしたら、貼り付けたいページの編集がめんを開き、そのまま貼り付けます。

すると以下のようにページには表示されます。まだスタイルを当ててないため、シンプルな見た目です。

Contact From 7 のデザインを整えるstyle.css を追加する

このままだとデザインが微妙なので、デザインを整えましょう。

あなたのPCのテキストエディタで新しくstyle-contactform7.css というファイルを作り、以下をコピペして保存して下さい。

.title {
    width: 1170px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    position: relative;
    /* padding: 20px 0; */
    height: 75px;
}
.title .logo, .subtitle { display: inline-block; }

.logo { float: left; margin-top: 8px; }

.logo img { width: 64px; }

.subtitle { position: relative; top: -5px; margin-left: 10px; }

.title .logo, .subtitle { display: inline-block; }

body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; letter-spacing: 1.5px; }

form.wpcf7-form { width: 100%; text-align: center; }

form.wpcf7-form input, form.wpcf7-form textarea, form.wpcf7-form select { width: 100%; height: 55px; border-radius: 5px; padding: 10px; margin-bottom: 25px; border: none; }

form.wpcf7-form input[type=checkbox] {width: 20px;}

option {color: rgb(195,195,195);}

form.wpcf7-form textarea { height: 100px; }

.contactform { background-color: #9da79f; padding: 40px 20%; text-align: center; }

.wpcf7 .wpcf7-submit { background-color: #387945; color: #fff; padding: 10px 80px; border-radius: 50px; font-size: 23px; font-weight: 600; }

.wpcf7-form input#OF_submit_btn1 { background-color: #387945; color: #fff; padding: 10px 80px; border-radius: 50px; font-size: 23px; font-weight: 600; border: none; display: block; margin: 10px auto;}

.wpcf7-list-item {margin: 0 !important; }

span.wpcf7-form-control-wrap.acceptance-442 { float: left; position:relative; margin-left: 15px; }

.acceptance { font-size: 15px; position: relative; top: 10px; }

body, p, h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; background: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased; }

h2, h3 { line-height: 40px; }

.txtl { font-size: 28px; font-weight: 600; }

.txtm { font-size: 20px; font-weight: 600; }

.txts { font-size: 16px; font-weight: 600; }

.txtxs { font-size: 14px; font-weight: 300; }

.subtitle p { font-weight: 600; margin-bottom: 0; }

.brsp { display: none; }

.brpc { display: block; }

.yellowtxt { color: #ebb94d; }

.whitetxt { color: #fff; }

ul { list-style: none; }

.container { overflow: hidden; }

.contactpc { cursor: pointer; position: absolute; right: 0px; top: 16px; color: #fff; padding: 11px 40px; background-color: #387945; border-radius: 25px; }

.contactpc p { margin: 0; }

#privacypolicy { font-size: 13px; margin: -20px 0; }

#accept-this { font-size: 16px; position: relative; top: -20px; }

/* JSで制御 */
.contactsp { display: none; }

作成したCSSを、サーバーのCSSを置いているディレクトリにアップします。デフォルトであれば以下のような場所にあります。

/wp-content/themes/使っているテーマの名前/css

例えば僕のブログのテーマはCocoonなので、こんな感じです。

/wp-content/themes/cocoon/css/style-contactform7.css

そしたらWordPressに戻り、テーマエディターを開きます。

header.php というファイルがあるので、そちらをクリック。

<?php get_header(); ?> という記述のすぐ下に以下をコピペしてください。

  <link href="<?php echo get_template_directory_uri(); ?>/css/style-contactform7.css" rel="stylesheet">

これで先ほどショートコードを貼り付けたページを更新してみましょう。以下のような見た目になると思います。

これで問い合わせフォームは完成です。お疲れ様でした!