WordpressのContact Form 7フォームにajaxzip3を入れる。（郵便番号自動入力）

更新日　12/02

こんにちわ、名古屋の花屋・丸の内フローラです。

11月末よりワードプレスを使い始めました。

まだまだインストールしたばかりで、何も始まっていません。

そもそもホームページビルダーでのローカル側作成で16年作っていた私にとって

ワードプレスは無知の領域で、すべてググりながらゆっくりと進めています。

固定ページってなんだー？

諸先輩方の参考ページで勉強しながら、ワードプレス3日の私がとりあえず
ajaxzip3を動かせるようになるまでの備忘録です。
※参照にさせていただいたサイトです※

■ワードプレスの中にお問い合わせフォームを付けてみる。
まだ作成段階中ですが、プラグインでContact Form 7というものを見つけました。

そもそも3日前のインストールで、初日にプラグインを覚えました。

①Contact Form 7をインストール
②FFFTPにてワードプレス内の自分の使用しているテーマのフォルダをクリック
wp-content →　themes　→　自分の使っているフォルダ　→　functions.php

③functions.phpをFFFTPでダウンロードして、テキストエディタで開き
一番最後に

function add_head_link() {
echo '<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>';
echo "
<script type=\"text/javascript\">
jQuery(function($){
$(\"#zip\").attr('onKeyUp', 'AjaxZip3.zip2addr(this,\'\',\'address\',\'address\');');
})";
echo '</script>';
}
add_action('wp_head', 'add_head_link');

上記ソースを貼り付けました

※追記※　外観　→　テーマの編集　→　functions.phpに追記・保存で良いみたい・・・
これも初心者なので仕方ありません。また勉強です。

④functions.phpをFFFTPで同じ場所にアップロード
⑤ワードプレスダッシュボード　→　外観　→テーマの編集　→　テーマヘッダー
<head></head>内に下記ソースを貼り付け

⑥ダッシュボード　→　お問い合わせ　→　Contact Form 7起動　新規フォーム追加
⑦下記ソースをフォームに貼り付け

<p>郵便番号<br />
[text zip 7/7 id:zip]</p>
<p>住所<br />
[text address 80/ id:address]</p>

⑧保存

携帯・PCなどで動作確認

以上。

初心者が次回以降の備忘録に書いて、自分自身がかろうじてわかる内容です。
が、いつか・・・私と同じくらい超初心者の方がこの日記で少しでも
救われたら本望です。

さて、試作は成功したのでclassやidなどをオリジナルに
変更させてフォームを完成させます。

お花屋さんのフォームはお届け日時から
注文主詳細・ご依頼主詳細・商品の選択・名札の内容など
記入項目が多いため、もしこのフォームを外注依頼されたら・・・
完成渡しまでワードプレスでも人工賃は2日分は欲しい。
とおもうと2日分は支払わないといけない金額。

トライアンドエラーを繰り返しとりあえずたどり着いた答えがでてほっとしています。

よっしゃ、次の課題が待っている。がんばるぞぅ！

名古屋の花屋・丸の内フローラ

↑このページトップへ	まるフロ日記
アクセス・地図	会社概要
特定商取法	プライバシーポリシー
表紙（トップ）	メール

Wordpressのフォームにajaxzip3を入れる。

丸の内フローラ　2016年の日記

Wordpressのフォームにajaxzip3を入れる。

丸の内フローラ 2016年の日記

丸の内フローラ　2016年の日記