フォーム

フォーム 【j-formnew 】

フォーム全体

<div class="n j-formnew ">

■フォームのクラス名

 j-formnew

 

<form action="" method="post" class="cc-m-form cc-m-form-layout-0">

■formHTMLに割り当てられたクラス名
cc-m-form
cc-m-form-layout-0

<div class="cc-m-form-loading"></div>

※おそらく管理メニュー用に用意されたローディングスタート位置のタグ
<div class="cc-m-form-view-sortable">


~ この中に追加されたフォームデータが入る ~

<div class="cc-m-form-view-element cc-m-form-submit">

■送信ボタンのクラス名
 cc-m-form-view-element  共通
 cc-m-form-submit     送信ボタン専用
<label></label>

<div class="cc-m-form-view-input-wrapper">

送信ボタン用ラッパー

<input type="submit" value="送信" data-action="formButton"/>

</div>

</div>

 

<p class="cc-m-form-note">

送信前のメッセージのクラス名

 cc-m-form-note

<strong>メモ:</strong>

<span class="j-m-required">*</span> は入力必須項目です

</p>

メモを変更したいのであれば
1)この部分を消して、送信ボタン側のラッパー内に、記述する。

2)javasucriptにて、この中を書き換えるしかなさそう。


</form>

 

JAVASCRIPT

 

<script id="cc-m-reg-12263254092">

// <![CDATA[

window.regModule("module_formnew", {

    "selector":"#cc-m-form-12263254092",

     "withinCms":false,

     "templates":[],

      "extraParams":

{

/* テキスト */

"text":{"width":{"type":"int","range":{"min":10,"max":100},"deflt":50}},

/* メール */

"email":{"width":{"type":"int","range":{"min":10,"max":100},"deflt":50}},

/* 日付 */

"calendar":{"width":{"type":"int","range":{"min":10,"max":100},"deflt":50}},

/* テキストエリア */

"textarea":{

    "rows":{

        "type":"int",

     "range":{

                "min":2,

                "max":20

        },"deflt":6

    },

    "width":{

    "type":"int",

     "range":{

               "min":10,

               "max":100

          },"deflt":100

    }

},

/* 数値 */

"number":{

     "minimum":{

            "type":"int",

            "deflt":0

       },

    "maximum":{

       "type":"int",

       "deflt":100

       }

},

/* たぶんセレクトボックスのことだと思う。。 */

"select":{ /* 複数選択の有無 初期値はなし */

     "multiple":{"type":"bool","deflt":0},

    "options":{"type":"list","deflt":["選択肢1","選択肢2"]}

},

/* ラジオボタン */

"radio":{"adjustment":{"type":"bool","deflt":"horizontal"},

"options":{

    "type":"list","deflt":["選択肢1","選択肢2"]}},

    "check":[], /*初期値はチェックを入れない */

    "checkgroup":{"adjustment":{"type":"bool","deflt":"horizontal"},

     "options":{"type":"list","deflt":["選択肢1","選択肢2"]}},"subheading":[],

     "submit":{"buttontext":{"type":"text","deflt":"送信"}}

},

 

■フォームの部品のそれぞれの構造について

"structure":[

{"type":"text","label":"名前","params":{"width":"50"},

"rules":{"required":"この項目 \"{label}\"は入力が必須です。"}

},

{

"type":"email",

"label":"メールアドレス",

"params":{"width":"50"},

"rules":{"required":"1"}

},

{

"type":"calendar",

"label":"日付",

"params":{"width":"50"},

"rules":{"required":"1"}

},

{

"type":"number",

"label":"数字",

"params":{"minimum":"0","maximum":"100"},

"rules":{"required":"1"}

},

{

"type":"select",

"label":"ドロップダウンリスト",

"params":{"multiple":"0","options":["リスト1","リスト2"]},

"rules":{"required":"1"}

},

{

"type":"radio",

"label":"ラジオボタン",

"params":{"adjustment":"horizontal","options":["選択肢1","選択肢2"]},

"rules":{"required":"1"}

},

{

"type":"check",

"label":"シングルチェックボックス",

"params":[],

"rules":{"required":"1"}

},

{

"type":"checkgroup",

"label":"複数チェックボックス",

"params":{"adjustment":"horizontal","options":["選択肢1","選択肢2"]},

"rules":{"required":"1"}

},

{

"type":"subheading",

"label":"カテゴリータイトル",

"params":[],

"rules":[]

},

{

"type":"textarea",

"label":"メッセージ",

"params":{"rows":"6","width":"100"},

"rules":{"required":"この項目 \"{label}\" は入力が必須です。"}

}

], //構造について終了

"moduleIdObfuscated":"mb4c540bdb3900099",

"websiteIdObfuscated":"scbb64fe79673531b",

"ruleMessages":{"required":"この項目 \"{label}\" は入力が必須です。",

"email":"有効なメールアドレスを入力してください"

},

"deflt":{

"type":"text",

"label":"新しい項目",

"params":{"width":50},

"rules":{"required":"この項目 \"{label}\" は入力が必須です。"}

},

"defltByType":{

"text":{"width":50},

"email":{"width":50},

"calendar":{"width":50},

"textarea":{"rows":6,"width":100},

"number":{"minimum":0,"maximum":100},

"select":{"multiple":0,"options":["選択肢1","選択肢2"]},

"radio":{"adjustment":"horizontal","options":["選択肢1","選択肢2"]},

"check":[],

"checkgroup":{"adjustment":"horizontal","options":["選択肢1","選択肢2"]},

"subheading":[],

"submit":{"buttontext":"送信"}

},

"elementsWithNoInput":["subheading","submit"],

"buttontext":"送信",

/* ラベル全体 */

"labels":{

"text":"テキストエリア",

"email":"メールアドレス",

"calendar":"日付",

"textarea":"メッセージエリア",

"number":"数字",

"select":"ドロップダウンリスト",

"radio":"ラジオボタン",

"check":"シングルチェックボックス",

"checkgroup":"複数チェックボックス",

"subheading":"カテゴリータイトル"

},

"id":01234567890 /* このフォームのID */

}

);

// ]]>

</script>

</div>

</div>

</div>

</div>

テキスト

<div class="cc-m-form-view-element cc-m-form-text cc-m-required">

cc-m-form-view-element 共通

cc-m-required       共通

<label><div>名前</div></label>

<div class="cc-m-form-view-input-wrapper"> 

<input type="text" value=""  style="width: 50%;"/>

※テキストフォームにはクラス名は当てていない

</div>

</div>

 

メールアドレス

<div class="cc-m-form-view-element cc-m-form-email cc-m-required">

<label><div>メールアドレス</div></label>

 <div class="cc-m-form-view-input-wrapper"> 共通

<input type="email" autocorrect="off" autocapitalize="off" value="" style="width: 50%;" />

※フォームには、クラス名はあたっていない。

■メールフォーム属性

type="email"      emailを指定

autocorrect="off"    autocorrectをオンにしたら候補が出てくるのだろうか?

autocapitalize="off"   文字の頭文字を大文字に変換しない

value=""        テキスト欄は空 

style="width: 50%;"  幅指定(ここでは50%)

</div>

</div>

 

日付

<div class="cc-m-form-view-element cc-m-form-calendar cc-m-required">

<label><div>日付</div></label>

<div class="cc-m-form-view-input-wrapper">

<input type="text"  value="" style="width: 50%;" />

※日付は、タイプ属性がtextだった。

</div>

</div>

 

数値

<div class="cc-m-form-view-element cc-m-form-number cc-m-required">

<label><div>数字</div></label>

 

<div class="cc-m-form-view-input-wrapper">

<label class="cc-m-ui-numeric">

<div class="cc-m-input-wrapper">

<div class="cc-m-input-numeric cc-spinner">

<div class="cc-spinner-input-wrapper">

<input type="text" autocomplete="off" name="number" value="0" data-min-value="0" data-max-value="100" class="cc-spinner-input"/>

</div>

<div class="cc-spinner-control">

<a data-action="arrow" data-params="up" class="cc-spinner-plus" href="javascript:;" tabindex="-1"><span>+</span></a>

<a data-action="arrow" data-params="down" class="cc-spinner-minus" href="javascript:;" tabindex="-1"><span>-</span></a>

</div>

</div>

</div>

</label>

</div>

</div>

ドロップダウンリスト

<div class="cc-m-form-view-element cc-m-form-select cc-m-required">

<label><div>ドロップダウンリスト</div></label>

<div class="cc-m-form-view-input-wrapper">

<select class="cc-m-form-element-input">

<option value="リスト1">リスト1</option>

<option value="リスト2">リスト2</option>

</select>

</div>

</div>

 

ラジオボタン

<div class="cc-m-form-view-element cc-m-form-radio cc-m-required">

<label><div>ラジオボタン</div></label>

 

<div class="cc-m-form-view-input-wrapper">

<div class="cc-m-form-element-input cc-m-form-checkable-horizontal">

<div>

<label>

<input type="radio" value="選択肢1"/><span>選択肢1</span>

</label>

</div>

 

<div>

<label>

<input type="radio" value="選択肢2"/><span>選択肢2</span>

</label>

</div>

 

</div>

</div>

</div>

シングルチェックボックス

<div class="cc-m-form-view-element cc-m-form-check cc-m-required">

<label><div>シングルチェックボックス</div></label>

<div class="cc-m-form-view-input-wrapper">

<input type="checkbox" value="1" />

</div>

</div>

複数チェックボックス

<div class="cc-m-form-view-element cc-m-form-checkgroup cc-m-required">

<label><div>複数チェックボックス</div></label>

<div class="cc-m-form-view-input-wrapper">

<div class="cc-m-form-element-input cc-m-form-checkable-horizontal">

 

<div>

<label>

<input type="checkbox"  value="選択肢1" accept="" /><span>選択肢1</span>

</label>

</div>

 

<div>

<label>

<input type="checkbox" value="選択肢2" accept="" /><span>選択肢2</span>

</label>

</div>

 

</div>

</div>

</div>

カテゴリタイトル

<div class="cc-m-form-view-element cc-m-form-subheading">

<label><div>カテゴリータイトル</div></label>

<div class="cc-m-form-view-input-wrapper"></div>

</div>

メッセージ

<div class="cc-m-form-view-element cc-m-form-textarea cc-m-required">

<label><div>メッセージ</div></label>

<div class="cc-m-form-view-input-wrapper">

<textarea rows="6" style="width: 100%;"></textarea>

</div>

</div>

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422