質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

2508閲覧

【WP】コンタクトフォーム7のカスタマイズ(無限項目増加)

cat0138

総合スコア33

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2016/06/20 05:27

###前提・実現したいこと
コンタクトフォーム7で作成したメールフォームに、
ボタンを押すことで「項目を無限に増やしたい」と思っています。

まだ何も試しておらず、調べていてもめぼしい情報にたどり着けませんでした。
「Teratailなら何か情報を取得できるのではないか」と思い、投稿させていただいた次第です。

手段は問いません。どんな方法でもかまいませんので、
実装方法をご教授、ご教授いただけますと幸いです。

何か、ヒントになるようなことだけでも大歓迎ですので、
お手数ですが、よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「項目を無限に増やしたい」

増やしたい項目がどういった類の情報を入力させるためのものなのかがわからないのと、それらを別々のデータとして処理や管理しなければいけないのかどうかによってもだいぶ変わってくるかと思います。
もし後から作成したinputに入力された値が単にお問い合わせの内容やメールに記載されていればよいということであれば、

  1. あらかじめ追加される項目用のフィールド(仮にinput[name="addition"]とします)を作成しておく(フォームとしてはhiddenやdisplay:noneにするなどして表示しない)
  2. ボタンを押した際にJavaScriptで適当な位置にinputなどのフォームを追加する(仮にinput[class="add-input"]とします)
  3. お問い合わせの確定ボタンを押した際にJavaScriptで.add-inputの値を引っ張ってきてinput[name="addition"]のvalueに突っ込む

といった感じで、増減に対応した上で、あらかじめフィールドがわかっているのでメールなどにもその内容が記載された上で値を取得できるのではないかと思いました。(かなり力技感はありますが)
具体的には、

<input type="text" class="add-input" value=""/> // これが増えていく <input type="text" class="add-input" value=""/> ... <input type="hidden" name="addition" value=""/>
jQuery('.wpcf7c-btn-submit').click(function(){ var value = ''; jQuery.find('.add-input').each(function(){ // フォーマットが必要であればこの辺りでよきにしてください value += jQuery(this).val() }); jQuery.find('input[name="addition"]').val(value) });

と言った感じです。(JavaScriptと書きましたがjQuery使っています)
コードは最低限のもの&検証まではしていません。

投稿2016/06/20 06:44

編集2016/06/20 09:09
obi_yuta

総合スコア121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cat0138

2016/06/20 09:42

数少ない情報しか提示していなかったにもかかわらず、解答いただきありがとうございます。 まだ確認は出来ていないのですが(実は、ほかの人の作業なのです。。。)、回答いただいたことを参考に進めさせていただきます‼!!!!!! 御親切にどうもありがとうございます、ありがとうございます。
obi_yuta

2016/06/20 09:46

かなり少ない情報をもとになので、的を得ているか不安ですがご参考になればです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問