add contact form

index.html

@@ -8,8 +8,9 @@
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Playwrite+AU+SA:wght@100..400&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Autour+One&family=Mogra&family=Rubik+Glitch&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 
 </head>
@@ -68,7 +69,7 @@
       </div>
       <p>Visit our store:</p>
     </div> -->
-    <div class="container is-justify-content-center">
+    <div class="container is-justify-content-center padding">
       <img src="assets/pics/classic/hero.jpg" alt="Image 1" >
       <img class="is-overlay" src="assets/logo/BeachPartyBalloons-logo.png" alt="Image 2">
     </div>
@@ -80,7 +81,7 @@
 </div>
     </div>
 
-    <div class="container is-justify-content-center">
+    <div class="container is-justify-content-center padding">
       <img src="assets/pics/organic/img1.webp" alt="Image 1" >
     </div>
 
@@ -90,13 +91,13 @@
  
 <p class="is-size-5 has-text-centered">...Or consult with one of our designers about your balloon decorating needs.</p>
 
-<div class="container is-justify-content-center">
+<div class="container is-justify-content-center padding">
   <img src="assets/pics/organic/img2.webp" alt="Image 1" >
 </div>
 <p class="is-size-5 has-text-centered">Delivery avalible!</p>
 <p class="is-size-5 has-text-centered"> Have your balloons delivered! Our delivery staff will make sure your order arrives safe and sound!</p>
 
-<div class="container is-justify-content-center">
+<div class="container is-justify-content-center padding">
   <img src="assets/pics/helium/img1.webp" alt="Image 1" >
 </div>
 <!-- <script type="text/javascript" src="https://form.jotform.com/jsform/250083932725053"></script> -->
@@ -154,11 +155,11 @@
     </div>
   </div>
 </div> -->
-<!-- <section class="section">
+<!-- <section class="section ">
-  <div class="container">
+  <div class="container ">
-      <h1 class="title">Contact Us</h1>
+      <h1 class="title has-text-centered">Contact Us</h1>
       <form action="sendEmail.php" method="post">
-          <div class="field">
+          <div class="field ">
               <label class="label">Name</label>
               <div class="control">
                   <input class="input" type="text" name="name" placeholder="Your Name" required>
@@ -196,6 +197,60 @@
       </form>
   </div>
 </section> -->
+
+<div class="container theme-light padding">
+  <div class="columns is-justify-content-center">
+    <div class="column is-6-tablet is-5-desktop is-4-widescreen is-3-fullh">
+      <form method="POST" action="sendEmail.php" class="box p-5">
+        <label class="is-block mb-4">
+          <span class="is-block mb-2">Your name</span>
+          <input
+            name="name"
+            type="text"
+            class="input"
+            placeholder="First and Last Name"
+          />
+        </label>
+
+        <label class="is-block mb-4">
+          <span class="is-block mb-2">Email Address</span>
+          <input
+            required
+            name="email"
+            type="email"
+            class="input"
+            placeholder="email@example.com"
+          />
+        </label>
+        <label class="is-block mb-4">
+          <span class="is-block mb-2">Phone Number</span>
+          <input
+            required
+            name="phone"
+            type="tel"
+            class="input"
+            placeholder="555-555-5555"
+          />
+        </label>
+        <label class="is-block mb-4">
+          <span class="is-block mb-2">Message</span>
+          <textarea
+            name="message"
+            class="textarea"
+            rows="3"
+            placeholder="Tell us what we can help you with..."
+          ></textarea>
+        </label>
+
+        <div class="mb-4">
+          <button type="submit" class="button is-link px-4">Contact Us</button>
+        </div>
+
+       
+      </form>
+    </div>
+  </div>
+</div>
     <footer class="footer has-background-primary-light">
       <div class="content has-text-centered">
           <h7>Copyright &copy; <span id="year"></span> Beach Party Balloons</h7>

sendEmail.php

@@ -22,7 +22,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $email_body .= "Name: $name\n";
     $email_body .= "Email: $email\n";
     $email_body .= "Phone: $phone\n";
-    $email_body .= "Subject: $subject\n\n";
     $email_body .= "Message:\n$message\n";
 
     // Send email

style.css

@@ -5,58 +5,48 @@
     --bulma-info-s: 88%;
     --bulma-info-l: 42%;
     --bulma-navbar-item-img-max-height: 200px;
-  }
-  html{
-    background-color:rgb(231, 230, 221);
-    font-family: "Playwrite AU SA", serif;
-    height: 100%;
-  }
-  body{
-    font-family: "Playwrite AU SA", serif;
-
-  }
-nav{
-  font-family: "Playwrite AU SA", serif;
 }
-  header{
+
+html {
+    background-color: rgb(231, 230, 221);
+    font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
+    height: 100%;
+}
+
+body {
+    font-family: "Autour One", serif;
+}
+
+nav {
+    font-family: "Autour One", serif;
+}
+
+header {
     position: relative;
     text-align: center;
     color: antiquewhite;
-  }
+}
 
-  .centerimg {
+.centerimg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 4em;
-  }
+}
 
-  #heroImg{
+#heroImg {
-    position: absolute;
+    position: absolute; /* height: 600px; */
-    /* height: 600px; */
+}
-  }
+
-  .navbar-item img, .navbar-item svg {
+.navbar-item img, .navbar-item svg {
-    /* max-height: var(--bulma-navbar-item-img-max-height); */
     max-height: 1.30em;
-  }
-.is-overlay{
-  margin: auto;
 }
-.contact{
+
-  background-color: rgb(188, 231, 231);
+.is-overlay {
-  border: 1px;
+    margin: auto;
-  border-radius: 15%;
-  padding: 5px;
-  margin: auto;
-  text-align: center;
 }
-ffooter{
+
-  position: fixed;
+.padding{
-  left: 0;
+  padding: 1.2rem;
-  bottom: 0;
+}
-  width: 100%;
-  max-height: fit-content !important;
-  padding: 0;
-}
-