Kazunari-h/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <title>サンプル</title>
</head>

<body>
    <form id="main_form" class="needs-validation" novalidate>
        <div class="form-group">
            <label for="name" class="row">
                <p class="col-sm-2 col-form-label">名前</p>
                <p class="col-sm-10 row">
                    <input type="text" name="name" id="name" class="form-control col-sm-12" placeholder="名前" required>
                </p>
            </label>
        </div>
        <div class="form-group">
            <label for="email" class="row">
                <p class="col-sm-2 col-form-label">メールアドレス</p>
                <p class="col-sm-10 row">
                    <input type="email" name="email" id="email" class="form-control col-sm-12" placeholder="メールアドレス"
                        required>
                </p>
            </label>
        </div>
        <div class="form-group">
            <label for="message" class="row">
                <p class="col-sm-2 col-form-label">メッセージ</p>
                <p class="col-sm-10 row">
                    <textarea name="message" id="message" cols="30" rows="10" class="form-control col-sm-12"
                        placeholder="問い合わせ内容" required></textarea>
                </p>
            </label>
        </div>
    </form>
    <button id="btn" class="btn btn-primary col-sm-12">送信</button>
</body>

</html>

## index.js
window.onload = () => {
  const btn = document.getElementById("btn");

  console.log(btn);
  btn.addEventListener("click", () => {
    const name_val = document.forms.main_form.name.value;
    const mail_val = document.forms.main_form.email.value;
    const message_val = document.forms.main_form.message.value;

    if (!name_val || !mail_val || !message_val) {
      alert("空");
      return;
    }

    axios
      .get(
        "https://maker.ifttt.com/trigger/sendmail/with/key/mATN60aXiSowj0OcrwSBqobudFa36fLI9qZvDxkd72n",
        {
          params: {
            value1: `${name_val}`,
            value2: `${mail_val}`,
            value3: `${message_val}`
          },
          timeout: 1000,
          responseType: "json",
          crossdomain: true,
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*"
          }
        }
      )
      .then(function(response) {
        // 成功時
        console.log(response);
      })
      .catch(function(error) {
        // エラーが発生した場合
        console.log(error);
        console.log(1234567890);
      })
      .then(function() {
        // 常に実行される
        alert("送信が完了しました。");
        document.forms.main_form.name.value = "";
        document.forms.main_form.email.value = "";
        document.forms.main_form.message.value = "";
      });
  });
};
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="index.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
	crossorigin="anonymous">
	<title>サンプル</title>
	</head>

	<body>
	<form id="main_form" class="needs-validation" novalidate>
	<div class="form-group">
	<label for="name" class="row">
	<p class="col-sm-2 col-form-label">名前</p>
	<p class="col-sm-10 row">
	<input type="text" name="name" id="name" class="form-control col-sm-12" placeholder="名前" required>
	</p>
	</label>
	</div>
	<div class="form-group">
	<label for="email" class="row">
	<p class="col-sm-2 col-form-label">メールアドレス</p>
	<p class="col-sm-10 row">
	<input type="email" name="email" id="email" class="form-control col-sm-12" placeholder="メールアドレス"
	required>
	</p>
	</label>
	</div>
	<div class="form-group">
	<label for="message" class="row">
	<p class="col-sm-2 col-form-label">メッセージ</p>
	<p class="col-sm-10 row">
	<textarea name="message" id="message" cols="30" rows="10" class="form-control col-sm-12"
	placeholder="問い合わせ内容" required></textarea>
	</p>
	</label>
	</div>
	</form>
	<button id="btn" class="btn btn-primary col-sm-12">送信</button>
	</body>

	</html>
	window.onload = () => {
	const btn = document.getElementById("btn");

	console.log(btn);
	btn.addEventListener("click", () => {
	const name_val = document.forms.main_form.name.value;
	const mail_val = document.forms.main_form.email.value;
	const message_val = document.forms.main_form.message.value;

	if (!name_val \|\| !mail_val \|\| !message_val) {
	alert("空");
	return;
	}

	axios
	.get(
	"https://maker.ifttt.com/trigger/sendmail/with/key/mATN60aXiSowj0OcrwSBqobudFa36fLI9qZvDxkd72n",
	{
	params: {
	value1: `${name_val}`,
	value2: `${mail_val}`,
	value3: `${message_val}`
	},
	timeout: 1000,
	responseType: "json",
	crossdomain: true,
	headers: {
	"Content-Type": "application/json",
	"Access-Control-Allow-Origin": "*"
	}
	}
	)
	.then(function(response) {
	// 成功時
	console.log(response);
	})
	.catch(function(error) {
	// エラーが発生した場合
	console.log(error);
	console.log(1234567890);
	})
	.then(function() {
	// 常に実行される
	alert("送信が完了しました。");
	document.forms.main_form.name.value = "";
	document.forms.main_form.email.value = "";
	document.forms.main_form.message.value = "";
	});
	});
	};