update dependencies and add SB Forms integration

StartBootstrap · Jun 3, 2021 · ced86a8 · ced86a8
1 parent c56fa38
commit ced86a8
Show file tree

Hide file tree

Showing 6 changed files with 334 additions and 3,268 deletions.
diff --git a/dist/css/styles.css b/dist/css/styles.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
-* Start Bootstrap - Business Frontpage v5.0.0 (https://startbootstrap.com/template/business-frontpage)
+* Start Bootstrap - Business Frontpage v5.0.1 (https://startbootstrap.com/template/business-frontpage)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-business-frontpage/blob/master/LICENSE)
 */

diff --git a/dist/index.html b/dist/index.html
@@ -283,24 +283,57 @@ <h2 class="fw-bolder">Get in touch</h2>
                 </div>
                 <div class="row gx-5 justify-content-center">
                     <div class="col-lg-6">
-                        <form>
+                        <!-- Contact Form-->
+                        <!---->
+                        <!-- This form is pre-integrated with SB Forms-->
+                        <!-- To make this form functional, sign up at-->
+                        <!-- https://startbootstrap.com/solution/contact-forms-->
+                        <!-- to get your API token!-->
+                        <form id="contactForm" data-sb-form-api-token="API_TOKEN">
+                            <!-- Name input-->
                             <div class="form-floating mb-3">
-                                <input class="form-control" id="inputName" type="text" placeholder="Enter your name..." />
-                                <label for="inputName">Full name</label>
+                                <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
+                                <label for="name">Full name</label>
+                                <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                             </div>
+                            <!-- Email address input-->
                             <div class="form-floating mb-3">
-                                <input class="form-control" id="inputEmail" type="email" placeholder="name@example.com" />
-                                <label for="inputEmail">Email address</label>
+                                <input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
+                                <label for="email">Email address</label>
+                                <div class="invalid-feedback d-none" data-sb-feedback="email:required">An email is required.</div>
+                                <div class="invalid-feedback d-none" data-sb-feedback="email:email">Email is not valid.</div>
                             </div>
+                            <!-- Phone number input-->
                             <div class="form-floating mb-3">
-                                <input class="form-control" id="inputPhone" type="tel" placeholder="(123) 456-7890" />
-                                <label for="inputPhone">Phone number</label>
+                                <input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
+                                <label for="phone">Phone number</label>
+                                <div class="invalid-feedback d-none" data-sb-feedback="phone:required">A phone number is required.</div>
                             </div>
+                            <!-- Message input-->
                             <div class="form-floating mb-3">
-                                <textarea class="form-control" id="inputMessage" type="text" placeholder="Enter your message here..." style="height: 10rem"></textarea>
-                                <label for="inputMessage">Message</label>
+                                <textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
+                                <label for="message">Message</label>
+                                <div class="invalid-feedback d-none" data-sb-feedback="message:required">A message is required.</div>
                             </div>
-                            <div class="d-grid"><button class="btn btn-primary btn-lg" type="submit">Submit</button></div>
+                            <!-- Submit success message-->
+                            <!---->
+                            <!-- This is what your users will see when the form-->
+                            <!-- has successfully submitted-->
+                            <div class="d-none" id="submitSuccessMessage">
+                                <div class="text-center mb-3">
+                                    <div class="fw-bolder">Form submission successful!</div>
+                                    To activate this form, sign up at
+                                    <br />
+                                    <a href="https://startbootstrap.com/solution/contact-form">https://startbootstrap.com/solution/contact-form</a>
+                                </div>
+                            </div>
+                            <!-- Submit error message-->
+                            <!---->
+                            <!-- This is what your users will see when there is-->
+                            <!-- an error submitting the form-->
+                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
+                            <!-- Submit Button-->
+                            <div class="d-grid"><button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button></div>
                         </form>
                     </div>
                 </div>

diff --git a/dist/js/scripts.js b/dist/js/scripts.js
@@ -1,5 +1,5 @@
 /*!
-* Start Bootstrap - Business Frontpage v5.0.0 (https://startbootstrap.com/template/business-frontpage)
+* Start Bootstrap - Business Frontpage v5.0.1 (https://startbootstrap.com/template/business-frontpage)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-business-frontpage/blob/master/LICENSE)
 */