HTMLとCSSでGoogle formをカスタムする！

Googleフォームを自作のHTML/CSSに取り込む方法

こちらの記事は筆者さんが

今回の方法は、Google公式のやり方ではないため、Google側で仕様が変更になった際はエラーになる可能性がありますのでご注意ください。

と注意書きをされています。
私の場合、回答後のページのscriptが記事内のコードでは上手くいかなかったので、他の記事を調べました。

結果、こちらの記事で書かれている

Google FormをHTML/CSSでデザインしたフォームで運用する方法

各データの記述法やformタグの書き方が私の場合効いたので全てこちらの記事様の通りにしました。

ちょっと発展

フォームの検証がしたかったので、こちらの記事で勉強させていただきました。
入力の仕様に間違いがあったら各inputの下に文字を出します。

JavaScript を使った基本的なフォームの検証（入力チェック）

2つのinputのどちらかを入力必須にする

メールアドレスか電話番号のどちらかを必須にしたかったので、こちらの記事に助けていただきました。

【JavaScript】2つのinputのどちらかを入力必須にする

私の場合、他にもフォームの項目があるので下のコードは変えました。

    //電話番号の値を取得する
    let tel = event.target.tel.value;
    //メールアドレスの値を取得する
    let email = event.target.email.value;

変えた後

            // CUSTOM

            //電話番号の値を取得する
            let tel = document.getElementsByClassName('tel')[0].value;
            //メールアドレスの値を取得する
            let email = document.getElementsByClassName('email')[0].value;

            //電話番号・メールアドレスが空であれば
            if (tel === '' && email === '') {
                //エラーメッセージを出力する
                // alert('※連絡先を入力してください')
                error.textContent = '※連絡先を入力してください';
                //submitイベントを止める
                e.preventDefault();

            }

カタカナのチェック

「フリガナ」の項目を入れたのでこちらの記事を参考にさせていただきました。

javascript 全角カタカナのチェックを行う

学び

かなり初歩的でお恥ずかしいですが、

• inputタグにname attributeは2つ置けない

• novalidateがあるとrequired attributeが作動しない（下の画像）

など改めてHTMLを学びました。
私は9項目のフォームを作ったので、多分無駄に問題にぶつかってしまうことがあり時間を費やしてしまったのかなと思います。
もっと細分化すべきだなと思いました。

ありがとうございました！🙇