<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concat Me!</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header">
<div class="nav-box">
<span>Contact Me!</span>
<ul class="nav">
<li><a href="index.html">Main Page</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
<button id="changeBackgroundButton">Change Background</button>
</div>
</header>
<div class="banner">
Contact Me!
</div>
<div class="introduce">
<div class="introduce-tit">
Contact Information
</div>
<div class="introduce-main">
<div class="l">
<img src="./img/my photo.jpg" width="220">
</div>
<div class="r">
<p>Telephone: +44 7421875678</p>
<P>E-Mail: MaS20@cardiff.ac.uk</P>
<P>Wechat: Masq2001</P>
<P>Address: Cardiff,UK</P>
</div>
</div>
<form class="myform" id="myForm" method="post" action="https://formspree.io/f/mwkgkgyk">
<div class="inp-box">
<input type="text" name="name" class="inp" placeholder="name" />
<input type="email" name="email" class="inp" placeholder="email">
</div>
<div class="inp-box">
<textarea class="msg" name="message" placeholder="message"></textarea>
</div>
<button class="but" type="submit">submit</button>
</form>
</div>
<script>
const myForm = document.getElementById('myForm');
const nameInput = document.querySelector('input[name="name"]');
const emailInput = document.querySelector('input[name="email"]');
const messageInput = document.querySelector('textarea[name="message"]');
myForm.addEventListener('submit', async (event) => {
event.preventDefault();
const name = nameInput.value;
const email = emailInput.value;
const message = messageInput.value;
if (!name || !email || !message) {
alert('Please fill in all the fields.');
return;
}
const formData = new FormData();
formData.append('name', name);
formData.append('email', email);
formData.append('message', message);
const response = await fetch('https://formspree.io/f/mwkgkgyk', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
}
});
if (response.ok) {
alert('Message sent successfully!');
nameInput.value = '';
emailInput.value = '';
messageInput.value = '';
} else {
alert('Message sending failed. Please try again later.');
}
});
</script>
<script src="./js/script.js"></script>
<script>
function onButtonClick() {
alert("submit success!");
}
</script>
</body>
</html>