[[!form_wrapper?
&hooks=`email,setRedirectTo,redirect`
&formName=`StartAFreeTrial`
&formFields=`firstname,lastname,email,street_address,postalcode,gender,date,interests`
&emailTpl=`start_free_trial_email`
&emailSubject=`Start A Free Trial Form Submission`
&emailMultiWrapper=`<li>[[+value]]</li>`
&emailTo=`acquisitions@shortgrass.ca`
&redirectTo=`1`
&store=`1`
&validate=`firstname:required,
lastname:required,
email:email:required,
street_address:required,
postalcode:required,
gender:required,
date:required`
&successMessage=`<div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <h3>Your message has been submitted successfully.</h3>
</div>`
&validationErrorMessage=`<div class="alert alert-danger">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <h3>Please review the following errors:</h3>
    <ul>
        [[!+fi.error.firstname:!empty=`<li><a href="[[~[[*id]]]]#firstname">First Name is a required field</a></li>`]]
        [[!+fi.error.lastname:!empty=`<li><a href="[[~[[*id]]]]#lastname">Last Name is a required field</a></li>`]]
        [[!+fi.error.email:!empty=`<li><a href="[[~[[*id]]]]#email">Email is a required field</a></li>`]]
        [[!+fi.error.street_address:!empty=`<li><a href="[[~[[*id]]]]#street_address">Street Address is a required field</a></li>`]]
        [[!+fi.error.postalcode:!empty=`<li><a href="[[~[[*id]]]]#postalcode">Postal Code is a required field</a></li>`]]
        [[!+fi.error.gender:!empty=`<li><a href="[[~[[*id]]]]#gender">Gender is a required field</a></li>`]]
        [[!+fi.error.date:!empty=`<li><a href="[[~[[*id]]]]#date">Date is a required field</a></li>`]]
    </ul>
</div>`
]]

<h3 style="text-align: center;">Get Started... Free Trial</h3>
[[!+fi.validation_error_message <span style="color: red;">*</span>notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
<form action="[[~[[*id]]]]" method="post" class="form" id="free-trial">
    <input type="hidden" name="redirectTo" id="redirectTo" value="[[!++redirectTo]]"/>
    <div class="row">
        <div class="form-group col-sm-6">
            <label for="firstname">
                First Name <span style="color: red;">*</span> <span class="error">[[!+fi.error.firstname]]</span>
            </label>
            <input class="form-control" type="text" name="firstname" id="firstname" value="[[!+fi.firstname]]" placeholder="Please enter your first name"/>
        </div>
        <div class="form-group col-sm-6">
            <label for="lastname">
                Last Name <span style="color: red;">*</span> <span class="error">[[!+fi.error.lastname]]</span>
            </label>
            <input class="form-control" type="text" name="lastname" id="lastname" value="[[!+fi.lastname]]" placeholder="Please enter your last name"/>
        </div>
        <div class="form-group col-sm-6">
            <label for="email">
                Email <span style="color: red;">*</span> <span class="error">[[!+fi.error.email]]</span>
            </label>
            <input class="form-control" type="email" name="email" id="email" value="[[!+fi.email]]" placeholder="Please enter your e-mail address"/>
        </div>
        <div class="form-group col-sm-12">
            <label for="street_address">
                Street Address <span style="color: red;">*</span> <span class="error">[[!+fi.error.street_address]]</span>
            </label>
            <input class="form-control" type="text" name="street_address" id="street_address" value="[[!+fi.street_address]]" placeholder="Please enter your street address"/>
        </div>
        <div class="form-group col-sm-6">
            <label for="city">
                Postal Code <span style="color: red;">*</span> <span class="error">[[!+fi.error.postalcode]]</span>
            </label>
            <input class="form-control" type="text" name="postalcode" id="postalcode" value="[[!+fi.postalcode]]" placeholder="Please enter your postal code"/>
        </div>
        <div class="form-group col-sm-6">
            <label for="date">
                Date of Birth <span style="color: red;">*</span> <span class="error">[[!+fi.error.date]]</span>
            </label>
            <input class="form-control" type="date" name="date" id="date"/>
        </div>
        <div class="form-group col-sm-6">
            <label for="gender">
                Gender <span style="color: red;">*</span> <span class="error">[[!+fi.error.gender]]</span>
            </label>
            <select class="form-control" name="gender" id="gender" value="[[!+fi.gender]]">
                <option value="" [[!+fi.library:FormItIsSelected=``]] selected disabled>Select Gender</option>
                <option value="male" [[!+fi.library:FormItIsSelected=`male`]]>Male</option>
                <option value="female" [[!+fi.library:FormItIsSelected=`female`]]>Female</option>
            </select>
        </div>
        <hr>
        <div class="checkboxes col-sm-12">
            [[!FormIt? &validate=`interests:required`]]
            <label style="margin-bottom: 15px;">Resources I am interested in - [[!+fi.error.interests]]</label> <br>
            <input type="hidden" name="interests[]" value="" />
            <label><input type="checkbox" name="interests[]" value="eBooks" [[!+fi.interests:FormItIsChecked=`eBooks`]] />eBooks</label>
            <label><input type="checkbox" name="interests[]" value="Downloadable Audiobooks" [[!+fi.interests:FormItIsChecked=`downloadable-audiobooks`]] />Downloadable Audiobooks</label>
            <label><input type="checkbox" name="interests[]" value="Newspaper Online - PressDisplay" [[!+fi.interests:FormItIsChecked=`newspaper-online`]] />Newspaper Online (PressDisplay)</label>
            <label><input type="checkbox" name="interests[]" value="Magazines Online - Consumer Reports" [[!+fi.interests:FormItIsChecked=`online-magazines`]] />Magazines Online (Consumer Reports)</label>
            <label><input type="checkbox" name="interests[]" value="DVDs and Blue Rays" [[!+fi.interests:FormItIsChecked=`dvd-blueray`]] />DVDs and Blue Rays</label>
            <label><input type="checkbox" name="interests[]" value="Audiobooks on CDs" [[!+fi.interests:FormItIsChecked=`audiobooks-cd`]] />Audiobooks on CDs</label>
            <label><input type="checkbox" name="interests[]" value="Music CDs" [[!+fi.interests:FormItIsChecked=`music-cds`]] />Music CDs</label>
            <label><input type="checkbox" name="interests[]" value="Books" [[!+fi.interests:FormItIsChecked=`books`]] />Books</label>
            <label><input type="checkbox" name="interests[]" value="Other" [[!+fi.interests:FormItIsChecked=`other`]] />Other</label>
        </div>
        <!--<div class="form-group col-sm-12">-->
        <!--[[!recaptchav2_render]]-->
        <!--[[!+fi.error.recaptchav2_error]]-->
        <!--</div>-->
        <div class="form-buttons col-sm-6 col-sm-offset-3">
            <input type="submit" value="Submit"/>
        </div>
    </div>
</form>
<br>
<p style="text-align: center;">A copy of your response will be emailed to the address you provided.</p>