S3のファイルを更新

HTML

今あるindex.htmlを以下のものに変更します。
何の変哲もない、単純な入力フォームですね。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム</title>
</head>
<body>
    <form id="contactForm" method="post">
        <label for="name">名前:</label><br>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">メールアドレス:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="message">メッセージ:</label><br>
        <textarea id="message" name="message" rows="4" required></textarea><br><br>
        
        <input type="submit" value="送信">
    </form>
    <script src="script/sender.js"></script>
</html>

これだけでは何もできないのでここにボタンを押下するとAPIをたたくようにJSを追加します。

JSのコードを追加

続いてS3に新たにフォルダを作成し、JSのスクリプトを配置します。
フォルダ作成よりscriptフォルダを作成します。

ここに、formのsubmitアクションに反応するJSのコードを追加します。
scriptフォルダに入りアップロードを選択します。

追加するJSはこちら

sender.js

document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    var formData = {
        name: event.target.name.value,
        email: event.target.email.value,
        message: event.target.message.value
    };

    fetch('YOUR_API_GATEWAY_ENDPOINT', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        alert('メッセージが送信されました');
    })
    .catch((error) => {
        console.error('Error:', error);
        alert('メッセージの送信に失敗しました');
    });
});