クライアントから取得したフォームタグをHTML内に複数回使用したが、idが設定されている場合

Question

前提・実現したいこと

ランディングページを制作しています。
ページ内にメールアドレス入力フォームが複数回登場するため、
クライアントからいただいたフォームタグをそのまま複数回コピペしようとしたら、
タグ内にidが設定されておりエラーが出ました。

基本的なhtml/css知識しかなく、困っています。

このような場合、どのようにコーディングすれば良いでしょうか？

ご教示いただけますと幸いです。

発生している問題・エラーメッセージ

the id value [UserItemForm]must be unique.
the id value [Usermail]must be unique.
the id value [server_url]must be unique.

該当のソースコード

<div class="content_form">
    <form action="https〜" enctype="multipart/form-data" id="UserItemForm" class="myForm" method="post" accept-charset="utf-8">
        <input type="hidden" name="_method" value="POST"/>
        <!-- メールアドレス -->
        <div class="input text input_unit ">
            <div class="my_column my_left">
                <div class="label_frame">
                    <label for="Usermail" class="form_input_label ">メールアドレス</label>
                </div>
            </div>
            <div class="my_column my_right">
                <input name="data[User][mail]" id="Usermail" value="" class="" type="text" required="required"/>
            </div>
        </div>
        <!-- 画像認証 -->
        <!-- 確認ボタン -->
        <div class="submit form_input_submit">
            <input type="submit" value="登録する"/>
        </div>
        <input type="hidden" id="server_url" value="https://〜>
        
    <!-- ▼リファラ -->
    <input type="hidden" name="data[User][referer_form_url]" value="" class="UserRefererFormUrl"/>
    <input type="hidden" name="data[User][referer_url]" value="" class="UserRefererUrl"/>

    <script type="text/javascript">
//<!--
    if (document.referrer.length !=0 ){
        if (document.getElementsByClassName("UserRefererUrl"))
        {
        var user_referer_url = document.getElementsByClassName("UserRefererUrl");
        for (var i = 0; i < user_referer_url.length; i++)
        {
            user_referer_url[i].value = document.referrer;
        }
        }
        else if (document.getElementById("UserRefererUrl"))
        {
            document.getElementById("UserRefererUrl").value = document.referrer;
        }
    }

    if (document.getElementsByClassName("UserRefererFormUrl"))
    {
        var user_referer_form_url = document.getElementsByClassName("UserRefererFormUrl");
        for (var i = 0; i < user_referer_form_url.length; i++)
        {
            user_referer_form_url[i].value = location.href;
        }
    }
    else if (document.getElementById("UserRefererFormUrl"))
    {
        document.getElementById("UserRefererFormUrl").value = location.href;
    }
//-->
    </script>
    <!-- ▲リファラ -->

</form>
</div>

<script src="https:〜"></script>

試したこと

Java Scriptに関する知識がなく、単にidをclassに変更してしまうと不具合が出るのでは？と思い何もできずにいます。

<script src="https:〜"></script>こちらに記載されているJavaファイルはクライアントサーバー内にあり触ることができません。

Comments

[jimbe]

コードはマークダウン記法を利用してご提示ください。
マークダウンに関しましてはヘルプを御覧ください。

java と javascript は違う言語です。タグを修正されたほうが良いかと思います。

>基本的なhtml/css知識しかなく
>Java Scriptに関する知識がなく

どちらも解説書・サイトがそれなりにあるものと思います。それらを活用して勉強されることをお勧め致します。

[mimick]

Jimbe様
ご指摘ありがとうございます。
こちら初めて利用させていただきましたので至らない点多々あると思い恐縮です。
あまり時間もなく調べる方法もわからず藁をもすがる思いでこちらに質問させていただきました。
どうぞよろしくお願いいたします。

[Lhankor_Mhy]

エラーというのはlintですよね？
支障がないならば、IDを変えればいいのではないかと思いますが、何か問題があるのですか？

[mimick]

エラーメッセージはコーディングソフト（dreamweaver）に表示されたものですが、IDを変更することで支障がないのかどうかがわかりません。
IDを変更した場合、情報取得先（おそらくクライアントが契約しているメール配信サービス）で不具合が出ないでしょうか？

[Lhankor_Mhy]

それはクライアントに尋ねるべきでは。
なお、クラスに変更すると不具合があるのでやめた方がいいです。

[mimick]

Lhankor_Mhy様
そうですね…やはりクライアントに伺うべきでしょうか。
クラスに変更はNGですね！危うくやってしまおうかと思っていました。
ありがとうございます。

Answer 1

IDを変更することで支障がないのかどうかがわかりません

IDを変更しないことですでに支障がでているのですから
変更したことによる支障は考える必要はありません。
支障がでたらそれなりの対応をするだけです

（そもそもIDいりのソースをコピペしようとすることが間違いなので）

Comments

[mimick]

yambejp様

ご回答ありがとうございます！

ちなみに以前納品したLPもそのようなコーディングをして、気付かず納品しました。
>（そもそもIDいりのソースをコピペしようとすることが間違いなので）
確かにそうなんです。そこに気付かなかった私の落ち度です…

ただ、LPに同じメールフォームが複数回登場する場合の他のコーディング方法を知らず、他のLPなどを見るとID入りがそのままコピペされていたり、そもそもフォームタグにID設定がなかったりと色々だったので、どうするのがベストなのかわからず質問させていただきました。

[yambejp]

もしリファクタリングするのでしたらhiddenは全部廃止してください
コピーする可能性がある場所のIDはすべて外してください
その上で、動作するものをつくり、あとはコピペで再チェックするだけです
data[xxx][mail]的な書き方もコピペをすると正しく挙動しないと思います

[mimick]

yambejp様
ありがとうございます。
リファクタリング…などは私には難しくておそらくできないですが、おっしゃるようにhiddenを全部廃止した場合、クライアントさんに必要な情報が受け取れなくならないでしょうか？

>data[xxx][mail]的な書き方もコピペをすると正しく挙動しないと思います
そうなんですね…例えばどのような不具合が起こるのでしょうか？？