Skip to content

Commit

Permalink
commit contact form
Browse files Browse the repository at this point in the history
  • Loading branch information
laurensOost committed Jul 22, 2024
1 parent 48fbfba commit 85c0403
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 25 deletions.
5 changes: 5 additions & 0 deletions .github/workflows/static.yml
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,8 @@ jobs:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
- name: Set up environment variables
run: |
echo "REACT_APP_EMAILJS_PUBLIC_KEY=${{ secrets.EMAILJS_PUBLIC_KEY }}" >> $GITHUB_ENV
echo "REACT_APP_EMAILJS_SERVICE_ID=${{ secrets.EMAILJS_SERVICE_ID }}" >> $GITHUB_ENV
echo "REACT_APP_EMAILJS_TEMPLATE_ID=${{ secrets.EMAILJS_TEMPLATE_ID }}" >> $GITHUB_ENV
67 changes: 67 additions & 0 deletions contact.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact/Booking - Bokkerijders</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script type="text/javascript">
(function(){
emailjs.init(process.env.REACT_APP_EMAILJS_PUBLIC_KEY);
})();
</script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="shows.html">SHOWS</a></li>
<li><a href="releases.html">RELEASES</a></li>
<li><a href="https://bokkerijders.bigcartel.com/">MERCH</a></li>
<li><a href="contact.html">CONTACT/BOOKING</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="Bokkerijders logo" class="logo-image">
</header>
<main id="contact">
<h1>CONTACT/BOOKING</h1>
<p>For booking and other inquiries, fill out the form below or email us at <a href="mailto:[email protected]">[email protected]</a></p>
<form id="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>

<button type="submit">Send</button>
</form>
</main>
<footer>
<p>&copy; 2024 BOKKERIJDERS. All rights reserved.</p>
</footer>
<script src="script.js"></script>

<script type="text/javascript">
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();

emailjs.sendForm(
process.env.REACT_APP_EMAILJS_SERVICE_ID,
process.env.REACT_APP_EMAILJS_TEMPLATE_ID,
this
).then(function() {
console.log('SUCCESS!');
alert('Your message has been sent!');
}, function(error) {
console.log('FAILED...', error);
alert('Oops... something went wrong.');
});
});
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<li><a href="index.html">HOME</a></li>
<li><a href="shows.html">SHOWS</a></li>
<li><a href="releases.html">RELEASES</a></li>
<li><a href="#merch">MERCH</a></li>
<li><a href="#contact">CONTACT/BOOKING</a></li>
<li><a href="https://bokkerijders.bigcartel.com/">MERCH</a></li>
<li><a href="contact.html">CONTACT/BOOKING</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="Bokkerijders logo" class="logo-image">
Expand Down
10 changes: 5 additions & 5 deletions releases.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,22 @@
<li><a href="index.html">HOME</a></li>
<li><a href="shows.html">SHOWS</a></li>
<li><a href="releases.html">RELEASES</a></li>
<li><a href="#merch">MERCH</a></li>
<li><a href="#contact">CONTACT/BOOKING</a></li>
<li><a href="https://bokkerijders.bigcartel.com/">MERCH</a></li>
<li><a href="contact.html">CONTACT/BOOKING</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="Bokkerijders logo" class="logo-image">
</header>
<main id="releases">
<div class="releases-container">
<div class="release">
<a href="album1.html">
<a href="https://babylondoomcultrecords.bandcamp.com/album/bokkerijders">
<img src="images/R-24901280-1667168354-7312.jpg" alt="Album 1" class="album-art">
<p class="album-title">Bokkerijders Demo</p>
<p class="album-title">DEMO</p>
</a>
</div>
<div class="release">
<a href="album2.html">
<a href="https://babylondoomcultrecords.bandcamp.com/album/silver-dust-and-swords-of-gold">
<img src="images/SDSOG.png" alt="Album 2" class="album-art">
<p class="album-title">Silver Dust and Swords of Gold</p>
</a>
Expand Down
22 changes: 22 additions & 0 deletions scripts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();

// Simple email validation regex
const email = document.getElementById('email').value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
return;
}

// These IDs from the previous steps
emailjs.sendForm('service_ikab6sp', 'template_fl1p6kp', this)
.then(function() {
console.log('SUCCESS!');
alert('Your message has been sent!');
}, function(error) {
console.log('FAILED...', error);
alert('Oops... something went wrong.');
});
});
27 changes: 10 additions & 17 deletions shows.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,30 @@
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="shows.html">SHOWS</a></li>
<li><a href="#albums">RELEASES</a></li>
<li><a href="#merch">MERCH</a></li>
<li><a href="#contact">CONTACT/BOOKING</a></li>
<li><a href="releases.html">RELEASES</a></li>
<li><a href="https://bokkerijders.bigcartel.com/">MERCH</a></li>
<li><a href="contact.html">CONTACT/BOOKING</a></li>
</ul>
</nav>
<img src="images/logo.png" alt="Bokkerijders logo" class="logo-image">
</header>
<main>
<section id="shows">
<h2>Upcoming Shows</h2>
<h2>SHOWS</h2>
<ul class="shows-list">
<li class="show">
<div class="show-info">
<span class="date">June 10, 2024</span>
<span class="venue">Amsterdam Arena, Amsterdam</span>
<span class="date">August 14, 2024 // support 1914</span>
<span class="venue">Asgaard Gent - BE</span>
</div>
<a href="#" class="tickets-button">Buy Tickets</a>
<a href="#" class="tickets-button">SOLD OUT</a>
</li>
<li class="show">
<div class="show-info">
<span class="date">July 15, 2024</span>
<span class="venue">Berlin Stadium, Berlin</span>
<span class="date">August 17, 2024 // Blek Mettle Fest</span>
<span class="venue">AZ Mulheim - DE</span>
</div>
<a href="#" class="tickets-button">Buy Tickets</a>
</li>
<li class="show">
<div class="show-info">
<span class="date">August 20, 2024</span>
<span class="venue">O2 Arena, London</span>
</div>
<a href="#" class="tickets-button">Buy Tickets</a>
<a href="https://tickets.161host.shop/untergang/blekmetle/" class="tickets-button">Buy Tickets</a>
</li>
</ul>
</section>
Expand Down
38 changes: 37 additions & 1 deletion styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ body, html {
font-family: 'Arial', sans-serif;
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
overflow: hidden;
overflow: auto;
position: relative;
height: 100%;
}
Expand Down Expand Up @@ -153,3 +153,39 @@ video#background-video {
.release a:hover .album-title {
text-decoration: underline;
}

form {
display: flex;
flex-direction: column;
align-items: center;
}

label {
font-size: 1.2em;
margin: 10px 0 5px;
}

input, textarea {
width: 100%;
max-width: 500px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #fff;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 1em;
}

button {
padding: 10px 20px;
font-size: 1.2em;
color: #000;
background: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #ccc;
}

0 comments on commit 85c0403

Please sign in to comment.