Responsive Mailformの項目を無理やり増やすやり方をご説明します。繰り返しますが私はプログラミング全然できませんので、不具合とかあっても知りません。
やりたいこと
- name欄をひとマスだけにしたい
- 入力項目を増やしたい、です。
スポンサードリンク
名前をひとますだけにする
まずmailform.jsを開きます。80行目くらいにある
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if( $('form#mail_form dd.required').length ){ if( $('.required').children('input#name_1').length ){ var element = $('.required').children('input#name_1'); var element_2 = $('.required').children('input#name_2'); if( element.val() == '' && element_2.val() == '' ){ var dt = element.parents('dd').prev('dt'); var dt_name = slice_method(dt); element.nextAll('span').text(dt_name +'が入力されていません。'); error++; scroll_point = compare_method(scroll_point, element.offset().top); }else{ element.nextAll('span').text(''); } } |
をいじります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if( $('form#mail_form dd.required').length ){ if( $('.required').children('input#name_1').length ){ var element = $('.required').children('input#name_1'); var element_2 = $('.required').children('input#name_1'); if( element.val() == '' && element_2.val() == '' ){ var dt = element.parents('dd').prev('dt'); var dt_name = slice_method(dt); element.nextAll('span').text(dt_name +'お名前が入力されていません。'); error++; scroll_point = compare_method(scroll_point, element.offset().top); }else{ element.nextAll('span').text(''); } } |
五行目のinput#name2’をinput#name1’とするだけです。こうしておかないとname1単体では使用できません。使おうとすると空欄の時アラートが表示されなくなります。input#name1とinput#name_2に両方情報が入っているかの判定をしているんだと思います。 これで入力欄を一つにすることができました。
項目を増やす
同じくmailform.jsをいじります。 read_1を編集しましょう。先ほど編集nameの下にあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if( $('.required').children('input#read_1').length ){ var element = $('.required').children('input#read_1'); var element_2 = $('.required').children('input#read_1'); if( element.val() == '' && element_2.val() == '' ){ var dt = element.parents('dd').prev('dt'); var dt_name = slice_method(dt); element.nextAll('span').text(dt_name +'が入力されていません。'); error++; scroll_point = compare_method(scroll_point, element.offset().top); }else{ element.nextAll('span').text(''); } } |
nameと同じように#read2を#read1にします。 こちらを流用することで、項目を一つだけ増やすことができます。（ふりがな欄をなくすので増えてないかも）
HTML
htmlは以下の感じで貼ればいいでしょう。 ふりがな欄を会社名として流用しているだけです。
|
1 2 3 4 5 |
<dt>お名前<span class="red">必須</span></dt> <dd class="required"><input type="text" id="name_1" name="name_1" value="" /></dd> <dt>会社名<span class="red">必須</span></dt> <dd class="required"><input type="text" id="read_1" name="read_1" value="" /></dd> |
ふりがなライブラリはコメントアウトで切っておきましょう。
|
1 2 3 |
<!-- フリガナ自動入力ライブラリここから <script type="text/javascript" src="js/jquery.autoKana.js"></script> --> |
config-2.php
config-2.phpを開きます。以下のようにします。
|
1 2 |
名前：{$name_1} 会社名：{$read_1} |
おしまい
ということで、プログラミングができない人間が無理やりカスタマイズしたメールフォームでした。 真似すんなよ！