K&S PLAGEを支援する

Contact Form 7 郵便番号で住所を自動入力

この記事は約6分で読めます。

当店は販売商品の郵便振替・銀行振込・クレジット決済としてもContact Form 7を利用してます。

スポンサーリンク

AjaxZipを利用して郵便番号から自動住所入力

<!-- ajaxzip -->
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','pref','addr');
  })
})
</script>

上をコピーしテーマのheader.phpに貼り付けます。これだけです。とても簡単ですね。

Contact Form 7 コンタクトフォームを作成する

[response]

<table class="table table-bordered table-striped table-ctf7">
    <tr>
        <th>商品タイトル</th>
        <td>[text title] </td>
    </tr>
    <tr>
        <th>商品URL</th>
        <td>[text url] </td>
    </tr>
    <tr>
        <th><span class="requied">※必須</span> <span class="title-ctf7">お名前</span></th>
        <td>[text* your-name akismet:author watermark"例:山田 太郎"] </td>
    </tr>
    <tr>
        <th><span class="requied">※必須</span> <span class="title-ctf7">メールアドレス</span></th>
        <td>[email* your-email akismet:author_email watermark"例:×××@×××.com"]</td>
    </tr>
    <tr>
        <th><span class="requied">※必須</span> <span class="title-ctf7">郵便番号</span></th>
        <td>[text* zip id:zip watermark"例:000-0000"] </td>
    </tr>
    <tr>
        <th><span class="requied">※必須</span> <span class="title-ctf7">都道府県</span></th>
        <td>[text* pref id:pref watermark"例:〇〇県"]</td>
    </tr>
    <tr>
        <th><span class="requied">※必須</span> <span class="title-ctf7">ご住所</span></th>
        <td class="address-100">[text* addr id:addr watermark"例:〇〇市〇〇区〇〇町〇丁目〇-〇 〇号室"]</td>
    </tr>
    <tr>
        <th><span class="requied">※必須</span> <span class="title-ctf7">お電話番号</span></th>
        <td>[text* text-17 watermark"例:0000-00-0000"]</td>
    </tr>
    <tr>
        <th><span class="title-ctf7">メッセージ本文</span></th>
        <td class="message-100">[textarea your-message watermark"その他"]</td>
    </tr>
</table>

<p class="text-xs-center">[submit class:btn class:btn-success class:btn-lg "送信する"]</p>

メールフォーム承諾確認の作成方法

フォーム画面の承諾確認ボタンを押します。

  • 同意条件

    確認画面は表示されません。上記内容にて送信しますので宜しければチェックを入れて下さい。
  • オプション
    このチェックボックスをデフォルトで☑された状態にする
    (問い合わせされる方に確認の為チェックしてもらうようにするのか、チェックされた状態にするかを選択)
  • タグを投入ボタンを押す

下記画像のように承諾確認のタグが投入されます。

Contact Form 7 メール作成

商品タイトル 
[title]

商品URL
[url]

お電話番号
[text-17]

郵便番号/ご住所
[zip][pref][addr]

メッセージ本文:
[your-message]

style.cssに下記を追加

.table-ctf7 span.requied {
    font-size: 10px;
    color: red;
    font-weight: normal;
}

固定ページを作成する

固定ページの作成方法は下記をご参考下さい。

記事タイトルとURLを取得しフォームに自動で入れる
Contact Form 7 記事タイトルURLを取得しフォームに自動で入れる Conta...

完成画面

タイトル・URLの自動入力方法は下記ページをご覧ください。

スポンサーリンク
Contact Form 7 WordPress プラグイン
Follow Me
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。

国産ワードプレステーマ

DINA
クラブ・ライブハウス向けWordPressテーマ

OOPS!
ビジネス・店舗HP向けWordPressテーマ

「Welcart」対応WordPressテーマ

ICONIC
Welcart対応WordPressテーマ

GLAMOUR
Welcart対応WordPressテーマ

sao

田舎暮らしに憧れて東京から鹿児島へ。のんびり田舎暮らしとはいきませんが(*''▽'')この記事良かったよ~参考になったよ!などコメント頂けたらとても嬉しいです。また、wordpress設定・構築やウェルカートに関するご質問等もお気軽にご連絡下さい。
支援者募集中 tippin.me ほしい物リスト

Follow Me
K&S PLAGE

コメント

タイトルとURLをコピーしました