dependencies update and SB forms integration
This commit is contained in:
parent
de8f3260ad
commit
c6f4ca7181
47
dist/index.html
vendored
47
dist/index.html
vendored
@ -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
3024
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||||
}
|
}
|
||||||
|
@ -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')
|
||||||
|
Loading…
Reference in New Issue
Block a user