add in comments for form sections

This commit is contained in:
David Miller 2021-06-03 17:18:57 -04:00
parent 39611ea1e2
commit 053c78b6f3
2 changed files with 19 additions and 1 deletions

4
dist/index.html vendored
View File

@ -322,21 +322,25 @@
<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">
<!-- Name input-->
<input class="form-control" id="name" type="text" placeholder="Your Name *" data-sb-validations="required" /> <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 class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<!-- Email address input-->
<input class="form-control" id="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" /> <input class="form-control" id="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
<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:required">An email is required.</div>
<div class="invalid-feedback d-none" data-sb-feedback="email:email">Email is not valid.</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">
<!-- Phone number input-->
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" /> <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
<div class="invalid-feedback d-none" data-sb-feedback="phone:required">A phone number is required.</div> <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">
<!-- Message input-->
<textarea class="form-control" id="message" placeholder="Your Message *" data-sb-validations="required"></textarea> <textarea class="form-control" id="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
<div class="invalid-feedback d-none" data-sb-feedback="message:required">A message is required.</div> <div class="invalid-feedback d-none" data-sb-feedback="message:required">A message is required.</div>
</div> </div>

View File

@ -291,6 +291,8 @@ html(lang='en')
.row.align-items-stretch.mb-5 .row.align-items-stretch.mb-5
.col-md-6 .col-md-6
.form-group .form-group
// Name input
input#name.form-control( input#name.form-control(
type='text', type='text',
placeholder='Your Name *', placeholder='Your Name *',
@ -298,7 +300,10 @@ html(lang='en')
) )
.invalid-feedback(data-sb-feedback='name:required') .invalid-feedback(data-sb-feedback='name:required')
| A name is required. | A name is required.
.form-group .form-group
// Email address input
input#email.form-control( input#email.form-control(
type='email', type='email',
placeholder='Your Email *', placeholder='Your Email *',
@ -308,7 +313,10 @@ html(lang='en')
| An email is required. | An email is required.
.invalid-feedback.d-none(data-sb-feedback='email:email') .invalid-feedback.d-none(data-sb-feedback='email:email')
| Email is not valid. | Email is not valid.
.form-group.mb-md-0 .form-group.mb-md-0
// Phone number input
input#phone.form-control( input#phone.form-control(
type='tel', type='tel',
placeholder='Your Phone *', placeholder='Your Phone *',
@ -316,9 +324,15 @@ html(lang='en')
) )
.invalid-feedback.d-none(data-sb-feedback='phone:required') .invalid-feedback.d-none(data-sb-feedback='phone:required')
| A phone number is 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 *', data-sb-validations='required')
// Message input
textarea#message.form-control(
placeholder='Your Message *',
data-sb-validations='required'
)
.invalid-feedback.d-none(data-sb-feedback='message:required') .invalid-feedback.d-none(data-sb-feedback='message:required')
| A message is required. | A message is required.