開発情報・ナレッジ

投稿者: SPIRERS ナレッジ向上チーム 2025年9月22日 (月)

フォーム設定画面で変更したページソースの内容を、カスタムマイページのページソースに反映させる

通常、フォームはマイエリアのデザイン設定から出力してカスタムページに貼り付けますが、変更のたびに編集が必要で自動反映はできません。
ただし、自動POST転送を使えば、マイページ経由でフォーム設定を反映できます。

解決方法:フォームの自動POST転送

マイページのカスタムページ側に直接フォームコードを埋め込むのではなく、設定フォームのURLにPOSTで自動転送する仕組みを導入することで、常に最新のフォーム設定を反映させることができます。

以下は、その実装例です。

登録フォームの場合
<form id="redirectForm" method="POST" action=" https://www.pi-pe.co.jp/regist/is?SMPFORM=XXXXXXXXXXXX ">
    %SMPAREA%
</form>

<script>
    document.getElementById('redirectForm').submit();
</script>
注意
・DBに登録されているデータや、ログイン中のユーザー情報を画面に表示させたい場合は、<form> </form>内に次のコードを必ず追加してください。
 <input type="hidden" name="XXXXX" value="%val:XXXXX%">
※ XXXXXの部分は表示させたい項目の差替えキーワードに置き換えてください。
・表示する項目を変更したい場合は、上記コードを必要に応じて追加・削除してください。
更新・削除フォームの場合
<form id="redirectForm" method="POST" action="https://www.pi-pe.co.jp/regist/is?SMPFORM=XXXXXXXXXXXX"
    style="display: none;">
    %SMPAREA%
    <!-- 項目の値 -->
    <input type="hidden" name="email" value="%val:usr:email%">
    <input type="hidden" name="name" value="%val:usr:name%">
    <input type="hidden" name="password" value="%val:usr:password:val%">
    <!-- 電話番号 -->
    <input type="hidden" name="telephone" value="%val:usr:telephone%">
    <!-- マルチセレクト -->
    <input type="hidden" name="multi_select" value="%val:usr:multi_select:id%">
    <!-- セレクト -->
    <input type="hidden" name="select" value="%val:usr:select:id%">

    <!-- フォームのタイトル -->
    <input type="hidden" name="SMPFORM" value="%smpform:XXXXX%">
    <!-- 識別キー -->
    <input type="hidden" name="id" value="%val:sys:id%">

</form>

<script>
    window.onload = function () {
        document.getElementById("redirectForm").submit();
    };
</script>
注意
・DBに登録されているデータや、ログイン中のユーザー情報を画面に表示させたい場合は、<form> </form>内に次のコードを必ず追加してください。
 <input type="hidden" name="XXXXX" value="%val:XXXXX%">
※ XXXXXの部分は表示させたい項目の差替えキーワードに置き換えてください。
・表示する項目を変更したい場合は、上記コードを必要に応じて追加・削除してください。
・更新/削除フォームで「識別キー」や「認証キー」を利用している場合は、それぞれに対応する上記コードを必ず設定してください。
(例:識別キーや認証キーをhidenに入れることで、どのデータを更新/削除するか確定できます)

解説

action属性には、フォーム設定画面のURL(SMPFORM ID付き)を指定します。
hidden 要素として %SMPAREA% を埋め込むことで、マイページ側の情報を適切に引き継ぎます。
ページ読み込み時にscriptタグによりフォームが即座にPOST送信され、ユーザーは設定済みフォームへ自動遷移します。

メリット

・フォーム設定画面での変更が即座にマイページにあるカスタムページにも反映される
・ソースの二重管理が不要になり、保守性が向上
・ユーザーごとに適切な情報を引き継いだフォーム表示が可能

まとめ

マイページのカスタムページと設定フォームの内容を常に同期させたい場合、
自動POST転送の仕組みを活用することで、管理コストを抑えながら最新の状態を保つことができます。

直接HTMLを複製・編集するのではなく、転送先のフォームを一元管理するアプローチに切り替えることで、
フォーム運用の効率と安定性が大きく向上します。

解決しない場合はこちら コンテンツに関しての
要望はこちら