dependencies update and SB forms integration

This commit is contained in:
David Miller 2021-06-03 16:59:26 -04:00
parent de8f3260ad
commit c6f4ca7181
4 changed files with 143 additions and 3008 deletions

47
dist/index.html vendored
View File

@ -312,33 +312,55 @@
<h2 class="section-heading text-uppercase">Contact Us</h2> <h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div> </div>
<form id="contactForm"> <!-- 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">
<div class="row align-items-stretch mb-5"> <div class="row align-items-stretch mb-5">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" /> <input class="form-control" id="name" type="text" placeholder="Your Name *" data-sb-validations="required" />
<p class="help-block text-danger"></p> <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" /> <input class="form-control" id="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
<p class="help-block text-danger"></p> <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> </div>
<div class="form-group mb-md-0"> <div class="form-group mb-md-0">
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" /> <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
<p class="help-block text-danger"></p> <div class="invalid-feedback d-none" data-sb-feedback="phone:required">A phone number is required.</div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0"> <div class="form-group form-group-textarea mb-md-0">
<textarea class="form-control" id="message" placeholder="Your Message *" required="required"></textarea> <textarea class="form-control" id="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
<p class="help-block text-danger"></p> <div class="invalid-feedback d-none" data-sb-feedback="message:required">A message is required.</div>
</div> </div>
</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> </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> </form>
</div> </div>
</section> </section>
@ -581,5 +603,6 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS--> <!-- Core theme JS-->
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
<!-- SB Forms JS-->
</body> </body>
</html> </html>

3024
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -39,14 +39,14 @@
"bootstrap": "5.0.1" "bootstrap": "5.0.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "10.2.5", "autoprefixer": "10.2.6",
"browser-sync": "2.26.14", "browser-sync": "2.26.14",
"chokidar": "3.5.1", "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.0",
"pug": "3.0.2", "pug": "3.0.2",
"sass": "1.32.13", "sass": "1.34.1",
"shelljs": "0.8.4", "shelljs": "0.8.4",
"upath": "2.0.1" "upath": "2.0.1"
} }

View File

@ -279,25 +279,72 @@ html(lang='en')
.text-center .text-center
h2.section-heading.text-uppercase Contact Us h2.section-heading.text-uppercase Contact Us
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur. h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
form#contactForm
// 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#contactForm(data-sb-form-api-token='API_TOKEN')
.row.align-items-stretch.mb-5 .row.align-items-stretch.mb-5
.col-md-6 .col-md-6
.form-group .form-group
input#name.form-control(type='text', placeholder='Your Name *', required='required') input#name.form-control(
p.help-block.text-danger type='text',
placeholder='Your Name *',
data-sb-validations='required'
)
.invalid-feedback(data-sb-feedback='name:required')
| A name is required.
.form-group .form-group
input#email.form-control(type='email', placeholder='Your Email *', required='required') input#email.form-control(
p.help-block.text-danger type='email',
placeholder='Your Email *',
data-sb-validations='required,email'
)
.invalid-feedback.d-none(data-sb-feedback='email:required')
| An email is required.
.invalid-feedback.d-none(data-sb-feedback='email:email')
| Email is not valid.
.form-group.mb-md-0 .form-group.mb-md-0
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required') input#phone.form-control(
p.help-block.text-danger type='tel',
placeholder='Your Phone *',
data-sb-validations='required'
)
.invalid-feedback.d-none(data-sb-feedback='phone:required')
| A phone number is required.
.col-md-6 .col-md-6
.form-group.form-group-textarea.mb-md-0 .form-group.form-group-textarea.mb-md-0
textarea#message.form-control(placeholder='Your Message *', required='required') textarea#message.form-control(placeholder='Your Message *', data-sb-validations='required')
p.help-block.text-danger .invalid-feedback.d-none(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 .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.footer.py-4 footer.footer.py-4
@ -333,3 +380,6 @@ html(lang='en')
// Core theme JS // Core theme JS
script(src='js/scripts.js') script(src='js/scripts.js')
// SB Forms JS
//- script(src='path/to/cdn.js')