よくあるご質問【技術編】

◆フォームの変更・カスタマイズについて

Q

フォームの項目を並び替えても大丈夫でしょうか?

A

はい、問題ありません。
管理画面で作成して頂いた順番通りでなくても大丈夫です。
管理画面から新しいフォームを作り直したり、並び順を変えて頂く必要はございません。


Q

フォームの項目を追加したいのですが、HTMLファイルを作り直す必要があるのでしょうか?

A

いいえ、HTMLを作り直して頂く必要はございません。
但し、追加する項目は、必ず、管理画面で項目の追加を行ってください。
管理画面に追加せず、HTMLファイルに単純に項目を追加しても動作致しません。
HTMLファイルの追加方法については、以下の説明をご覧ください。


Q

既にあるHTMLに組み込みたいのですが、どうしたら良いでしょうか?

A

以下の手順に従って、対象のHTMLファイルにコードを貼り付けてください。

管理画面からダウンロードしたHTMLを参照しながらカスタマイズを行うことをお奨め致します。

  • Javascript ファイルの読み込み設定
    <script src="/prototype.js" type="text/javascript"></script>
    <script src="/get_form_api.js" type="text/javascript"></script>
    <script src="/set_form_api.js" type="text/javascript"></script>

    対象の Javascript ファイルは、事前に管理画面よりZIPファイルをダウンロードした上で、 解凍後、対象のサーバーにアップロードしておいてください。

  • recopat 認証設定

    以下のどちらかの設定で、recopat 認証設定を行ってください。

    • bodyタグを変更できる場合

      <body onload="get_form_xml('https://formasp.r-ako.com/?sid=xxxxx=post&fid=xxxx','');">
    • bodyタグを変更できない場合

      <script type="text/javascript">
      get_form_xml('https://formasp.r-ako.com/?sid=xxxxx&sta=post&fid=xxxxx','');
      </script>

    xxxxxの部分は、管理画面よりダウンロードされたHTMLファイルに 記載されているものと置き換えてください。

    また、認証結果を取得するために以下にタグを body タグの内側に追加してください。

    <p id="statxml"></p>

  • recopat フォーム領域の設定

    フォーム全体を囲む div タグ等の id にallformを追加してください。
    form タグのアクションに https://formasp.r-ako.com/reg/を設定してください。
    メソッドは、POSTを設定してください。
    管理画面からダウンロードしてきたHTMLに記載されている hidden タグを全て、form タグの下にコピーしてください。

  • 入力画面領域の設定

    入力画面を表示させたい箇所を囲む div タグ等の id にallform_postを追加してください。

    標準機能の簡単設定フィールドを利用する場合は、以下のように設定してください。
    なお、全て1つのテキストフィールドtype="text"をご利用ください。

    標準機能の簡単設定フィールド

    タイプ input タグ を囲む div タグ等の id input タグ
    氏名 id="input_fix1_c" name="input_fix1" id="input_fix1"
    カタカナ id="input_fix2_c" name="input_fix2" id="input_fix2"
    郵便番号 id="input_fix3_c" name="input_fix3" id="input_fix3"
    住所 id="input_fix4_c" name="input_fix4" id="input_fix4"
    電話番号 id="input_fix5_c" name="input_fix5" id="input_fix5"
    メールアドレス id="input_fix6_c" name="input_fix6" id="input_fix6"
    メールアドレス確認用 id="input_fix6_cc" id="input_fix6-mailconf"

    必須項目の場合は、input タグ を囲む div タグ等に value="req" 、任意の場合は、 value="enq"を設定してください。

    追加フィールドの場合は、以下のように設定してください。

    • には追加した項目の番号を指定してください。
    • N には、設定した項目数を0から連番で追加してください。

    追加フィールド

    タイプ input タグ を囲む div タグ等の id input タグ、select、textarea
    text id="input_dynamic*_c" name="input_dynamic*" id="input_dynamic*"
    textarea id="input_dynamic*_c" name="input_dynamic*" id="input_dynamic*"
    checkbox id="input_dynamic*_c" name="input_dynamic*[cheackbox][]"
    id="input_dynamic*[cheackbox]N"
    radio id="input_dynamic*_c" name="input_dynamic*" id="input_dynamic*"
    select id="input_dynamic*_c" name="input_dynamic*" id="input_dynamic*"

    必須項目の場合は、input タグ を囲む div タグ等に value="req" 、任意の場合は、 value="enq"を設定してください。

    それぞれの入力項目に対するエラーメッセージを表示させるには、エラーメッセージを表示させたい div タグ等の id に以下のように設定してください。
    には追加した項目の番号を指定してください。

    エラーメッセージ

    タイプ エラーメッセージを表示させたい div タグ等の id
    氏名 id="name_err"
    カタカナ id="nickname_err"
    郵便番号 id="zipcode_err"
    住所 id="address_err"
    電話番号 id="tel_err"
    メールアドレス id="mail_err"
    追加フィールド id="input_dynamic*_e"
  • 確認画面領域の設定

    確認画面を表示させたい箇所を囲む div タグ等の id に allform_conf を追加してください。

    確認画面で、入力した内容を表示させるには、入力内容を表示させたい div タグ等の id に以下の設定を行ってください。
    には追加した項目の番号を指定してください。

    確認画面

    タイプ 入力内容を表示させたい div タグ等の id
    氏名 id="conf_name"
    カタカナ id="conf_nickname"
    郵便番号 id="conf_zipcode"
    住所 id="conf_address"
    電話番号 id="conf_tel"
    メールアドレス id="conf_mail"
    追加フィールド id="input_dynamic*_n"

    確認ボタンには、以下を設定してください。

    • id="send_c"
    • value="https://formasp.r-ako.com/reg/"
    • onClick="set_form_api('formtest', 'POST', 'https://formasp.r-ako.com/reg/index.php', true,'statxml'); return false;"
    • 設定例
      <button name="send" value="https://formasp.r-ako.com/reg/" id="send_c" onClick="set_form_api('formtest', 'POST', 'https://formasp.r-ako.com/reg/index.php', true,'statxml'); return false;">確認</button>

    戻るボタンには、以下を設定してください。

    • id="retune_c"
    • onClick="disabled_reall(); return false;"
    • 設定例
      <button type="button" name="ret" value="" id="retune_c" onClick="disabled_reall(); return false;">戻る</button>

    確認ボタン、戻るボタンには submitボタンは使用しないでください。

  • 完了画面領域の設定

    完了画面を表示させたい箇所を囲む div タグ等の id に allform_comp を追加してください。


Q

エラーメッセージの文言を変更したいのだけれど、どうしたら良いでしょうか?

A

set_form_api.jsの先頭にある設定から変更が可能です。

標準で用意しております以下の6つのフィールドに対するエラーメッセージを変更したい場合は、以下を変更ください。


//未入力エラーの文言------------------------------
Err_msg = new Array(30);
Err_msg[0] = "名前の入力が有りません";           //名前
Err_msg[1] = "カタカナの入力が有りません";       //カタカナ
Err_msg[2] = "郵便番号の入力が有りません";       //郵便番号
Err_msg[3] = "住所の入力が有りません";           //住所
Err_msg[4] = "電話番号の入力が有りません";       //電話番号
Err_msg[5] = "メールアドレスの入力が有りません"; //メールアドレス
            

各入力チェックに対するエラーメッセージを変更したい場合は、以下を変更ください。


//指定型式エラー文言-----------------------------
Err_type_msg = new Array(10);
Err_type_msg[0] = "未入力エラー";                       //未入力
Err_type_msg[1] = "正しいメールアドレスではありません"; //メール
Err_type_msg[2] = "正しいURLではありません";            //URL
Err_type_msg[3] = "正しい郵便番号ではありません";       //郵便番号
Err_type_msg[4] = "正しい電話番号ではありません";       //電話
Err_type_msg[5] = "[0ー9]で入力して下さい";             //半角数値
Err_type_msg[6] = "半角英字のみで入力して下さい";       //半角英字
Err_type_msg[7] = "半角英数のみで入力して下さい";       //半角英数
Err_type_msg[8] = "半角英数記号のみで入力して下さい";   //半角英数記号
Err_type_msg[9] = "全角のみで入力して下さい";           //全角
Err_type_msg[10] = "";                                  //予備
            

確認用メールアドレスに対するるエラーメッセージを変更したい場合は、以下を変更ください。


//メールアドレス確認不一致エラー-----------------
var Err_mailaddr_msg = "確認メールアドレスと合致しません。お確かめください。";
            


Q

確認ボタンの文言を変更したいのだけれど、確認ボタンから戻ると元に戻っちゃう。

A

申し訳ございません。
HTMLファイルのボタンの文言以外にset_form_api.jsの以下の場所( 最新版の736行目付近 )の文言も変更する必要があります。


//書き換え対象
var button = document.getElementById("send_c");
button.textContent = "確認";//ボタン名
            

変更対象の位置は、set_form_api.jsのバージョンによって、前後致します。


Q

送信ボタンの文言を変更したいのだけれど、送信ボタンがどこにもない。

A

申し訳ございません。
送信ボタンは、確認ボタンを流用して、使用しております。
そのため、送信ボタンの文言を変更したい場合は、set_form_api.jsの以下の場所( 最新版の767行目付近 )を変更する必要があります。


//書き換え対象
var button = document.getElementById("send_c");
button.textContent = "送信"; //ボタン名
          

変更対象の位置は、set_form_api.jsのバージョンによって、前後致します。





PAGE TOP