Merge pull request #309 from StartBootstrap/develop

dependencies update and sb forms integration

README.md

@@ -47,6 +47,19 @@ Clone the source files of the theme and navigate into the theme's root directory
 
 You must have npm installed in order to use this build environment.
 
+### Contact Form
+
+The contact form available with this theme is prebuilt to use [SB Forms](https://startbootstrap.com/solution/contact-forms).
+SB Forms is a simple form solution for adding functional forms to your theme. Since this theme is prebuilt using our
+SB Forms markup, all you need to do is sign up for [SB Forms on Start Bootstrap](https://startbootstrap.com/solution/contact-forms).
+
+After signing up you will need to set the domain name your form will be used on, and you will then see your
+access key. Copy this and paste it into the `data-sb-form-api-token='API_TOKEN'` data attribute in place of
+`API_TOKEN`. That's it! Your forms will be up and running!
+
+If you aren't using SB Forms, simply delete the custom data attributes from the form, and remove the link above the
+closing `</body>` tag to SB Forms.
+
 ## Bugs and Issues
 
 Have a bug or an issue with this template? [Open a new issue](https://github.com/StartBootstrap/startbootstrap-agency/issues) here on GitHub or leave a comment on the [theme overview page at Start Bootstrap](https://startbootstrap.com/theme/agency).

dist/css/styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
-* Start Bootstrap - Agency v7.0.0 (https://startbootstrap.com/theme/agency)
+* Start Bootstrap - Agency v7.0.1 (https://startbootstrap.com/theme/agency)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/blob/master/LICENSE)
 */

dist/index.html

@@ -312,33 +312,60 @@
                     <h2 class="section-heading text-uppercase">Contact Us</h2>
                     <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                 </div>
-                <form id="contactForm">
+                <!-- * * * * * * * * * * * * * * *-->
+                <!-- * * SB Forms 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 an API token!-->
+                <form id="contactForm" data-sb-form-api-token="API_TOKEN">
                     <div class="row align-items-stretch mb-5">
                         <div class="col-md-6">
                             <div class="form-group">
-                                <input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" />
+                                <!-- Name input-->
-                                <p class="help-block text-danger"></p>
+                                <input class="form-control" id="name" type="text" placeholder="Your Name *" data-sb-validations="required" />
+                                <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                             </div>
                             <div class="form-group">
-                                <input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" />
+                                <!-- Email address input-->
-                                <p class="help-block text-danger"></p>
+                                <input class="form-control" id="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
+                                <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
+                                <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                             </div>
                             <div class="form-group mb-md-0">
-                                <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" />
+                                <!-- Phone number input-->
-                                <p class="help-block text-danger"></p>
+                                <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
+                                <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
                             </div>
                         </div>
                         <div class="col-md-6">
                             <div class="form-group form-group-textarea mb-md-0">
-                                <textarea class="form-control" id="message" placeholder="Your Message *" required="required"></textarea>
+                                <!-- Message input-->
-                                <p class="help-block text-danger"></p>
+                                <textarea class="form-control" id="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
+                                <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
                             </div>
                         </div>
                     </div>
-                    <div class="text-center">
+                    <!-- Submit success message-->
-                        <div id="success"></div>
+                    <!---->
-                        <button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
+                    <!-- 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="text-center"><button class="btn btn-primary btn-xl text-uppercase disabled" id="submitButton" type="submit">Send Message</button></div>
                 </form>
             </div>
         </section>
@@ -346,14 +373,7 @@
         <footer class="footer py-4">
             <div class="container">
                 <div class="row align-items-center">
-                    <div class="col-lg-4 text-lg-start">
+                    <div class="col-lg-4 text-lg-start">Copyright &copy; Your Website 2021</div>
-                        Copyright &copy; Your Website
-                        <!-- This script automatically adds the current year to your website footer-->
-                        <!-- (credit: https://updateyourfooter.com/)-->
-                        <script>
-                            document.write(new Date().getFullYear());
-                        </script>
-                    </div>
                     <div class="col-lg-4 my-3 my-lg-0">
                         <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
                         <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
@@ -581,5 +601,10 @@
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
         <!-- Core theme JS-->
         <script src="js/scripts.js"></script>
+        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
+        <!-- * *                               SB Forms JS                               * *-->
+        <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
+        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
+        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
     </body>
 </html>

dist/js/scripts.js

@@ -1,5 +1,5 @@
 /*!
-* Start Bootstrap - Agency v7.0.0 (https://startbootstrap.com/theme/agency)
+* Start Bootstrap - Agency v7.0.1 (https://startbootstrap.com/theme/agency)
 * Copyright 2013-2021 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/blob/master/LICENSE)
 */

package.json

@@ -1,7 +1,7 @@
 {
     "title": "Agency",
     "name": "startbootstrap-agency",
-    "version": "7.0.0",
+    "version": "7.0.1",
     "scripts": {
         "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
         "build:assets": "node scripts/build-assets.js",
@@ -39,14 +39,14 @@
         "bootstrap": "5.0.1"
     },
     "devDependencies": {
-        "autoprefixer": "10.2.5",
+        "autoprefixer": "10.2.6",
         "browser-sync": "2.26.14",
         "chokidar": "3.5.1",
-        "concurrently": "6.1.0",
+        "concurrently": "6.2.0",
-        "postcss": "8.2.15",
+        "postcss": "8.3.0",
-        "prettier": "2.3.0",
+        "prettier": "2.3.1",
         "pug": "3.0.2",
-        "sass": "1.32.13",
+        "sass": "1.34.1",
         "shelljs": "0.8.4",
         "upath": "2.0.1"
     }

src/pug/index.pug

@@ -279,36 +279,95 @@ html(lang='en')
                 .text-center
                     h2.section-heading.text-uppercase Contact Us
                     h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
-                form#contactForm
+
+                // * * * * * * * * * * * * * * *
+                // * * SB Forms 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 an API token!
+
+                form#contactForm(data-sb-form-api-token='API_TOKEN')
                     .row.align-items-stretch.mb-5
                         .col-md-6
                             .form-group
-                                input#name.form-control(type='text', placeholder='Your Name *', required='required')
+
-                                p.help-block.text-danger
+                                // Name input
+                                input#name.form-control(
+                                    type='text',
+                                    placeholder='Your Name *',
+                                    data-sb-validations='required'
+                                )
+                                .invalid-feedback(data-sb-feedback='name:required')
+                                    | A name is required.
+
                             .form-group
-                                input#email.form-control(type='email', placeholder='Your Email *', required='required')
+
-                                p.help-block.text-danger
+                                // Email address input
+                                input#email.form-control(
+                                    type='email',
+                                    placeholder='Your Email *',
+                                    data-sb-validations='required,email'
+                                )
+                                .invalid-feedback(data-sb-feedback='email:required')
+                                    | An email is required.
+                                .invalid-feedback(data-sb-feedback='email:email')
+                                    | Email is not valid.
+
                             .form-group.mb-md-0
-                                input#phone.form-control(type='tel', placeholder='Your Phone *', required='required')
+
-                                p.help-block.text-danger
+                                // Phone number input
+                                input#phone.form-control(
+                                    type='tel',
+                                    placeholder='Your Phone *',
+                                    data-sb-validations='required'
+                                )
+                                .invalid-feedback(data-sb-feedback='phone:required')
+                                    | A phone number is required.
+
                         .col-md-6
                             .form-group.form-group-textarea.mb-md-0
-                                textarea#message.form-control(placeholder='Your Message *', required='required')
+
-                                p.help-block.text-danger
+                                // Message input
+                                textarea#message.form-control(
+                                    placeholder='Your Message *',
+                                    data-sb-validations='required'
+                                )
+                                .invalid-feedback(data-sb-feedback='message:required')
+                                    | A message is required.
+
+                    // Submit success message
+                    //
+                    // This is what your users will see when the form
+                    // has successfully submitted
+
+                    #submitSuccessMessage.d-none
+                        .text-center.mb-3
+                            .fw-bolder Form submission successful!
+                            | To activate this form, sign up at
+                            br
+                            a(href='https://startbootstrap.com/solution/contact-form') https://startbootstrap.com/solution/contact-form
+
+                    // Submit error message
+                    //
+                    // This is what your users will see when there is
+                    // an error submitting the form
+
+                    #submitErrorMessage.d-none
+                        .text-center.text-danger.mb-3 Error sending message!
+
+                    // Submit Button
                     .text-center
-                            #success
+                        button#submitButton.btn.btn-primary.btn-xl.text-uppercase.disabled(type='submit') Send Message
-                            button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
 
         // Footer
         footer.footer.py-4
             .container
                 .row.align-items-center
                     .col-lg-4.text-lg-start
-                        | Copyright © Your Website
+                        | Copyright © Your Website 2021
-                        // This script automatically adds the current year to your website footer
-                        // (credit: https://updateyourfooter.com/)
-                        script.
-                            document.write(new Date().getFullYear());
                     .col-lg-4.my-3.my-lg-0
                         a.btn.btn-dark.btn-social.mx-2(href='#!')
                             i.fab.fa-twitter
@@ -333,3 +392,10 @@ html(lang='en')
 
         // Core theme JS
         script(src='js/scripts.js')
+
+        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+        // * *                               SB Forms JS                               * *
+        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
+        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')