I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GOOGLE Form URL}. Below is a snippet of the code and I am hoping someone can help identify the problem. The click event on the button seems to work as it logs something when console.log() is added.
const GOOGLE_FORM_ENDPOINT = "http~~~"
return (
<Modal open={isModalOpen} as={Form}>
<Modal.Header>
この製品の改善のためにアンケート調査のご協力をお願いします。
</Modal.Header>
{/* <Header
icon="pencil"
content="この製品の改善のためにアンケート調査のご協力をお願いします。"
as="h2"
/> */}
<Modal.Content>
<Form action={GOOGLE_FORM_ENDPOINT}>
<Form.Field>
<label htmlFor="game">他にプレイしたいゲームはありますか？</label>
<input
id="game"
name="entry.1294001289"
placeholder="ポーカー、人狼、人生ゲーム・・・"
required
></input>
</Form.Field>
<Form.Field>
<label htmlFor="price">
今遊んだゲームに買い切りでいくら払いますか？（10円単位でお願いします。）
</label>
<input
id="price"
type="number"
name="entry.1184266257"
placeholder="5000"
min="0"
step="10"
required
/>
</Form.Field>
<Form.Field>
<label htmlFor="request">
その他、何かご要望やご意見があればお願いします。
</label>
<textarea id="request" name="entry.656434793"></textarea>
</Form.Field>
<Form.Button
content="submit"
onClick={(e) => {
e.preventDefault()
setIsModalOpen(false)
app?.endGameRequest()
}}
></Form.Button>
</Form>
</Modal.Content>
</Modal>
)