About Page: Book Us Form

[CharityBunyon]

Story

• As a user, I want to see a Book Us form that will allow me to contact the band.

Acceptance Criteria

• WHEN the page loads THEN the Book Us form should display after toward the bottom of the page AND it the contents of the form div should be centered AND user should have entered their name, email, phone, message, and push "send message" button AND user will receive an alert if a required field is not filled out

Development Notes

• Manipulated form from bootstrap (https://getbootstrap.com/docs/4.3/components/forms/#form-row).

• I took out the following: address 2, city, state, zip, and check me out radio btn

• Replaced email->name, input: text

• Replaced password-> email, input: email

• Replaced address-> phone, input: number

• Added textarea tag, class: form-control

• Send message btn has a class of btn block

• Put required on all items except phone which is optional

[CharityBunyon]

[CharityBunyon]

https://getbootstrap.com/docs/4.3/components/forms/#form-row

[CharityBunyon]

<div class="container ">
    <h3 class="text-center ml-1 ">Book Us</h3>
    <p class="text-center">Trying to reach someone with Pardon Us? Please fill out the form below and click submit. We look forward to hearing from you!</p>
    <form>
        <div class="form-row">
            <div class="form-group col-md-6">
            <!-- <label for="inputEmail4">Your Name</label> -->
            <input type="text" class="form-control" placeholder="Your Name">
            </div>
            <div class="form-group col-md-6">
            <!-- <label for="inputPassword4">Your Email</label> -->
            <input type="email" class="form-control" id="inputPassword4" placeholder="Your Email">
            </div>
        </div>
        <div class="form-group">
            <!-- <label for="inputAddress">Your Phone (optional)</label> -->
            <input type="number" class="form-control" id="inputAddress" placeholder="Your Phone (optional)">
        </div>

        <div class="form-group">
            <!-- <label for="inputZip">Message</label> -->
            <textarea class="form-control"   name="contact" id="" cols="30" rows="10" aria-label="Your message" placeholder="Your Message" required></textarea>
            </div>

            <button type="submit" class="btn btn-primary btn-block">Submit Message</button>
    </form>
</div>