GoogleFormをカスタマイズした際に送信できない

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

AngularとGoogle formを用いてお問い合わせ画面を作っています。

Google formをCSSカスタマイズし、対応したスプレッドシートに送信する
という事を行いたいのですが、送信できないことが今回詰まっている点です。
下部でも記述してありますが、

Google FormとHTML側のaction部,entry.hogehoge部の値は確認済み
console.logを用いて出力されていることも確認済み

です。
送信ボタンに何か動作を記述しなければいけないのかなと考えていますが、
動画や他サイトを見る限り、特段そういった記述が見当たらなかったため(もしあったら申し訳ありません)
詰まってしまっている状態です。

エラーメッセージは特に表示されておりませんでした。
昨日一日詰まってしまったため、どうかご助力頂きたいなと思っております。

該当のソースコード

ts
1import { Component, OnInit } from '@angular/core';
2import { FormBuilder, FormControl, Validators } from '@angular/forms';
3
4@Component({
5  selector: 'app-contact',
6  templateUrl: './contact.component.html',
7  styleUrls: ['./contact.component.scss'],
8})
9export class ContactComponent implements OnInit {
10  form = this.fb.group({
11    name: ['', [Validators.required]],
12    email: ['', [Validators.required]],
13    text: ['', [Validators.required]],
14  });
15
16  constructor(private fb: FormBuilder) {}
17
18  get name(): FormControl {
19    return this.form.get('name') as FormControl;
20  }
21
22  get email(): FormControl {
23    return this.form.get('email') as FormControl;
24  }
25
26  get text(): FormControl {
27    return this.form.get('text') as FormControl;
28  }
29
30  ngOnInit(): void {}
31
32  submit() {
33    console.log(this.form.value);
34  }
35}

html
1<div class="container">
2  <div class="contact">
3    <h1 class="contact__title">Contact</h1>
4    <div class="form">
5<!-- action部分始まり -->
6      <form
7        [formGroup]="form"
8        action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeucwmUiCcSihxl6WiICqKhu0PV8sf3TopjQ1UWDIIq2xbedQ/formResponse"
9      >
10<!-- 終 -->
11
12        <mat-form-field appearance="outline" class="form__item">
13          <mat-label>お名前</mat-label>
14<!-- entry①部分始まり -->
15          <input
16            type="text"
17            name="entry.508732376"
18            matInput
19            required
20            formControlName="name"
21          />
22<!-- 終 -->
23        </mat-form-field>
24
25        <mat-form-field appearance="outline" class="form__item">
26          <mat-label>メールアドレス</mat-label>
27<!-- entry②部分始まり -->
28          <input
29            type="email"
30            name="entry.560312305"
31            matInput
32            required
33            formControlName="email"
34          />
35<!-- 終 -->
36        </mat-form-field>
37
38        <mat-form-field appearance="outline" class="form__item">
39          <mat-label>お問い合わせ内容</mat-label>
40<!-- entry③部分始まり -->
41          <textarea
42            matInput
43            autocomplete="off"
44            required
45            name="entry.1858864896"
46            formControlName="text"
47            [matTextareaAutosize]="true"
48            [matAutosizeMinRows]="3"
49          ></textarea>
50<!-- 終 -->
51        </mat-form-field>
52
53<!-- 送信ボタン部分始まり -->
54        <button type="submit" class="form__submit" mat-raised-button>
55          送信する
56        </button>
57<!-- 終 -->
58      </form>
59    </div>
60  </div>
61</div>

GoogleForm
1~省略~
2<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeucwmUiCcSihxl6WiICqKhu0PV8sf3TopjQ1UWDIIq2xbedQ/formResponse"(中略)</form
3~省略~
4<input type="hidden" name="entry.508732376" value="">
5<input type="hidden" name="entry.560312305" value="">
6<input type="hidden" name="entry.1858864896" value="">
7~省略~

試したこと

Google Formとhtml側の値の確認
console.logでの出力の確認
Google検索

補足情報（FW/ツールのバージョンなど）

Angular: 12.0.2

もし内容に過不足がありましたら随時対応させて頂きます。
どうかご助力頂けますと幸いです。よろしくお願い致します。

行動規範の内容に同意します

回答1件

こんな感じでミニマムにすると送信できてますよ

html
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4<title>test</title>
5</head>
6<body>
7  <form method="POST" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeucwmUiCcSihxl6WiICqKhu0PV8sf3TopjQ1UWDIIq2xbedQ/formResponse">
8    <input type="text" name="entry.508732376" required value="あいうえお" />
9    <input type="email" name="entry.560312305" required value="test@test.test" />
10    <textarea autocomplete="off" required name="entry.1858864896">test</textarea>
11    <input type="submit" value="送信">
12  </form>
13</body>
14</html>

投稿2021/06/07 13:55

tktk7

総合スコア2

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！