基本機能(list)

    フォーム | 基本機能

    フォーム

    必須チェックのオンオフができるウェブフォームを設置できます。

    送付先は「アカウントに登録されたメールアドレス」から選択して設定できます。

    送信後にページ状にメッセージを表示。設置ページのURLが含まれた件名で管理者にメールが届きます。

    用意されている項目を自由に追加できます

    1. <div id="cc-m-12938766499" class="j-module n j-formnew ">
    2.   <form action="" method="post" id="cc-m-form-12938766499" class="cc-m-form cc-m-form-layout-0">
    3.     <div class="cc-m-form-loading"></div>
    4.     <div class="cc-m-form-view-sortable">
    5.       <div class="cc-m-form-view-element cc-m-form-text cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c00">
    6.         <div>名前</div>
    7.         </label>
    8.         <div class="cc-m-form-view-input-wrapper"> <input type="text" name="m1cf876fcbb6d25c00" value="" id="m1cf876fcbb6d25c00" style="width: 50%;"> </div>
    9.       </div>
    10.       <div class="cc-m-form-view-element cc-m-form-email cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c01">
    11.         <div>メールアドレス</div>
    12.         </label>
    13.         <div class="cc-m-form-view-input-wrapper"> <input type="email" autocorrect="off" autocapitalize="off" name="m1cf876fcbb6d25c01" value="" style="width: 50%;" id="m1cf876fcbb6d25c01"> </div>
    14.       </div>
    15.       <div class="cc-m-form-view-element cc-m-form-calendar cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c02">
    16.         <div>日付</div>
    17.         </label>
    18.         <div class="cc-m-form-view-input-wrapper"> <input type="date" name="m1cf876fcbb6d25c02" value="" style="width: 50%;" id="m1cf876fcbb6d25c02"> </div>
    19.       </div>
    20.       <div class="cc-m-form-view-element cc-m-form-textarea cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c03">
    21.         <div>メッセージ</div>
    22.         </label>
    23.         <div class="cc-m-form-view-input-wrapper"> <textarea name="m1cf876fcbb6d25c03" rows="6" style="width: 100%;" id="m1cf876fcbb6d25c03"></textarea> </div>
    24.       </div>
    25.       <div class="cc-m-form-view-element cc-m-form-number cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c04">
    26.         <div>数字</div>
    27.         </label>
    28.         <div class="cc-m-form-view-input-wrapper"> <label class="cc-m-ui-numeric">
    29.     
    30.     <div class="cc-m-input-wrapper">
    31.         
    32.         <div class="cc-m-input-numeric cc-spinner">
    33.             <div class="cc-spinner-input-wrapper">
    34.                 <input type="text" autocomplete="off" data-action="input" name="number" value="0" data-min-value="0" data-max-value="100" id="m1cf876fcbb6d25c04" class="cc-spinner-input" maxlength="3" style="width: 32px;">
    35.                 
    36.             </div>
    37.             <div class="cc-spinner-control">
    38.                 <a data-action="arrow" data-params="up" class="cc-spinner-plus" href="javascript:;" tabindex="-1"><span>+</span></a>
    39.                 <a data-action="arrow" data-params="down" class="cc-spinner-minus" href="javascript:;" tabindex="-1"><span>-</span></a>
    40.             </div>
    41.             
    42.         </div>
    43.     </div>
    44.     
    45. </label> </div>
    46.       </div>
    47.       <div class="cc-m-form-view-element cc-m-form-select cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c05">
    48.         <div>ドロップダウンリスト</div>
    49.         </label>
    50.         <div class="cc-m-form-view-input-wrapper"> <select name="m1cf876fcbb6d25c05" class="cc-m-form-element-input" id="m1cf876fcbb6d25c05">
    51.     <option value="選択肢１">選択肢１</option>
    52.     <option value="選択肢２">選択肢２</option>
    53. </select> </div>
    54.       </div>
    55.       <div class="cc-m-form-view-element cc-m-form-radio cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c06">
    56.         <div>ラジオボタン</div>
    57.         </label>
    58.         <div class="cc-m-form-view-input-wrapper">
    59.           <div class="cc-m-form-element-input cc-m-form-checkable-horizontal">
    60.             <div> <label>
    61.             <input type="radio" name="m1cf876fcbb6d25c06" value="選択肢１" id="m1cf876fcbb6d25c06">
    62.             <span>選択肢１</span>
    63.         </label> </div>
    64.             <div> <label>
    65.             <input type="radio" name="m1cf876fcbb6d25c06" value="選択肢２" id="m1cf876fcbb6d25c06">
    66.             <span>選択肢２</span>
    67.         </label> </div>
    68.           </div>
    69.         </div>
    70.       </div>
    71.       <div class="cc-m-form-view-element cc-m-form-check cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c07">
    72.         <div>シングルチェックボックス</div>
    73.         </label>
    74.         <div class="cc-m-form-view-input-wrapper"> <input type="checkbox" name="m1cf876fcbb6d25c07" value="1" id="m1cf876fcbb6d25c07"> </div>
    75.       </div>
    76.       <div class="cc-m-form-view-element cc-m-form-checkgroup cc-m-required" data-action="element"> <label for="m1cf876fcbb6d25c08">
    77.         <div>複数チェックボックス</div>
    78.         </label>
    79.         <div class="cc-m-form-view-input-wrapper">
    80.           <div class="cc-m-form-element-input cc-m-form-checkable-horizontal">
    81.             <div> <label>
    82.             <input type="checkbox" name="m1cf876fcbb6d25c08" value="選択肢１" accept="" id="m1cf876fcbb6d25c08">
    83.             <span>選択肢１</span>
    84.         </label> </div>
    85.             <div> <label>
    86.             <input type="checkbox" name="m1cf876fcbb6d25c08" value="選択肢２" accept="" id="m1cf876fcbb6d25c08">
    87.             <span>選択肢２</span>
    88.         </label> </div>
    89.           </div>
    90.         </div>
    91.       </div>
    92.       <div class="cc-m-form-view-element cc-m-form-subheading " data-action="element"> <label for="m1cf876fcbb6d25c09">
    93.         <div>カテゴリータイトル</div>
    94.         </label>
    95.         <div class="cc-m-form-view-input-wrapper"> </div>
    96.       </div>
    97.     </div>
    98.     <div class="cc-m-form-view-element cc-m-form-view-captcha"> <label></label>
    99.       <div class="cc-m-form-view-input-wrapper">
    100.         <div class="captcha"> <span class="character">
    101.         <img src="/app/common/captcha/index/captchaId/fe11504103746f050289cd4586f0aba1ebe5eb69" id="captchaImagefe11504103746f050289cd4586f0aba1ebe5eb69">
    102.     </span> <a class="refresh" href="javascript:void(0);" onclick="javascript:changeCaptcha('fe11504103746f050289cd4586f0aba1ebe5eb69');" title="新しいコードを生成する"></a>
    103.           <div class="bottom"> <span>
    104.             コードを入力してください。:
    105.             <input type="text" name="captcha"><br>
    106.         </span> </div>
    107.         </div>
    108.       </div>
    109.     </div>
    110.     <div class="cc-m-form-view-element cc-m-form-submit" data-action="element"> <label></label>
    111.       <div class="cc-m-form-view-input-wrapper">
    112.         <div> <label for="m1cf876fcbb6d25c0_dataprivacy">
    113.         <a href="/j/privacy" target="_blank">プライバシーポリシー</a>が適用されます。    </label> </div> <input type="submit" value="送信" data-action="formButton"> </div>
    114.     </div>
    115.     <p class="cc-m-form-note"> <strong>メモ:</strong> <span class="j-m-required">*</span> は入力必須項目です </p>
    116.   </form>
    117. </div>

    ▼このようなフォームが設置できます。

    このフォームは一部サンプルです。記入式の項目以外を掲載しています。

    必須項目はオンオフ可能。

    コードを入力してください。:

    メモ: * は入力必須項目です

    カテゴリ： 基本機能

    本サイトで公開している内容は予告なく変更となることがあります


    ジンドゥー | ユーザーポータル | AI ビルダーサポート | クリエイターサポート 
    公式 YouTube | Facebook | Twitter

    ジンドゥー by KDDIウェブコミュニケーションズ

    1 日本国内への配送に適用されます。その他の国についてはこちらをご参照ください
    プライバシーポリシー | Cookie ポリシー | サイトマップ
    (C)KDDIウェブコミュニケーションズ
    ログアウト | 編集