Fancy Contact Form

All needed files are in /form directory.

Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

$to = "mail@example.com";
$from = "mail@example.com";

1 2	$to = "mail@example.com"; $from = "mail@example.com";

That’s it!

HTML markup:

<form action="assets/form/send.php" method="POST" data-email-subject="My Rota" class="ct-js-validate ct-formAppointment">
    <div class="form-header"><h4 class="text-uppercase">Personal information</h4></div>


    <div class="form-group">
        <label for="full_name" class="col-sm-2 control-label short-label">Your full name
            <span>*</span></label>

        <div class="col-sm-10">
            <input type="text" class="form-control ct-input" id="full_name" placeholder="" data-placeholder="Your full name" name="field[]" required="required">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label short-label">Email address
            <span>*</span></label>

        <div class="col-sm-10">
            <input type="email" class="form-control ct-input" id="email" placeholder="" data-placeholder="Email address" name="field[]" required="required">
        </div>
    </div>
    <div class="form-group">
        <label for="phone_number" class="col-sm-2 control-label short-label">Phone
            number<span>*</span></label>

        <div class="col-sm-10">
            <input type="text" class="form-control ct-input ct-input--short" data-placeholder="Phone number" id="phone_number" placeholder="" name="field[]" required="required">
        </div>
    </div>

    <div class="form-header"><h4 class="text-uppercase">Vehicle information</h4></div>


    <div class="form-group">
        <label for="year" class="col-sm-2 control-label short-label">Year<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input ct-input--short" id="year" data-placeholder="Year" name="field[]" required="required">
                <option>2011</option>
                <option>2012</option>
                <option>2013</option>
                <option>2014</option>
                <option>2015</option>
            </select>
        </div>

    </div>
    <div class="form-group">
        <label for="make" class="col-sm-2 control-label short-label">Make<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input" data-for="model" id="make" data-placeholder="Make" name="field[]" required="required">
                <option>Volkswagen</option>
                <option>Toyota</option>
                <option>Honda</option>
                <option>BMW</option>
                <option>Mercedes</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="model" class="col-sm-2 control-label short-label">Model<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input" data-target="model" data-for="submodel" id="model" disabled="" data-placeholder="Model" name="field[]" required="required">
                <option value="" disabled="" selected="">Select model...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="submodel" class="col-sm-2 control-label short-label">Submodel</label>

        <div class="col-sm-10">
            <select class="form-control ct-input" id="submodel" data-target="submodel" data-placeholder="Submodel" disabled="" name="field[]">
                <option value="" disabled="" selected="">Select submodel...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="mileage" class="col-sm-2 control-label short-label">Mileage</label>

        <div class="col-sm-10">
            <select class="form-control ct-input" id="mileage" data-placeholder="Mileage" name="field[]">
                <option value="" disabled="" selected="">Select mileage...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>

    <div class="form-header"><h4 class="text-uppercase">Appointment information</h4></div>


    <div class="form-group ">
        <label for="waiting" class="col-sm-2 control-label">Waiting
            or&nbsp;Drop&nbsp;off&nbsp;<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input ct-input--medium" id="waiting" data-placeholder="Waiting or Drop" name="field[]" required="required">
                <option value="" disabled="" selected="">Select an option...</option>
                <option>Waiting</option>
                <option>Drop off</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="date" class="col-sm-2 control-label short-label">Date <span>*</span></label>

        <div class="col-sm-10">
            <input type="text" class="form-control ct-input ct-input--short datepicker" data-placeholder="Date" id="date" placeholder="" name="field[]" required="required">
        </div>
    </div>

    <div class="form-group ">
        <label for="time" class="col-sm-2 control-label short-label">Time<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input ct-input--short" id="time" data-placeholder="Time" name="field[]" required="required">
                <option value="" disabled="" selected="">Select time...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>

    <div class="form-header"><h4 class="text-uppercase">Services requested</h4></div>


    <div class="form-group">

        <div class="container">
            <div class="row">

                <div class="col-md-1 col-xs-12 label-services">
                    <label class="label-checkbox">Services <span>*</span></label>
                </div>

                <div class="col-md-3">
                    <ul>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Preventive maintenance" name="field[]">
                            Preventive maintenance
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Oil change" name="field[]">
                            Oil change
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Brakes &amp; Brake repair" name="field[]">
                            Brakes &amp; Brake repair
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Tires &amp; Tire repair" name="field[]">
                            Tires &amp; Tire repair
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Mufflers &amp; Exhaust" name="field[]">
                            Mufflers &amp; Exhaust
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Steering &amp; Suspension" name="field[]">
                            Steering &amp; Suspension
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Batteries, Starters &amp; Charging" name="field[]">
                            Batteries, Starters &amp; Charging
                        </label></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Engine cooling" name="field[]">
                            Engine cooling
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Climate control" name="field[]">
                            Climate control
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Check engine light" name="field[]">
                            Check engine light
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Belts &amp; Hoses" name="field[]">
                            Belts &amp; Hoses
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Lights, Wipers &amp; Accessories" name="field[]">
                            Lights, Wipers &amp; Accessories
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Other" name="field[]">
                            Other
                        </label></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>


    <div class="form-group">
        <label for="desc" class="col-lg-2 col-md-2 col-sm-12 control-label">Describe service
            request</label>

        <div class="col-lg-10 col-md-10 col-sm-12">
            <textarea class="form-control ct-input ct-input--wide" id="desc" data-placeholder="Describe service
            request" placeholder="" name="field[]">                                </textarea>
        </div>
    </div>

    <div class="btn-group ct-u-paddingBoth20">
        <button type="submit" class="btn btn-accent">schedule it now</button>
    </div>

    <div role="alert" class="successMessage alert alert-success alert-dismissible">
        <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span>
        </button>
        Your Email has been sent successfully.
    </div>
    <div role="alert" class="errorMessage alert alert-danger alert-dismissible">
        <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span>
        </button>
        Ups, something went wrong.
    </div>

</form>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

<div class="form-header"><h4 class="text-uppercase">Personal information</h4></div>

<label for="full_name" class="col-sm-2 control-label short-label">Your full name

</div>

<label for="email" class="col-sm-2 control-label short-label">Email address

</div>

<label for="phone_number" class="col-sm-2 control-label short-label">Phone

number<span>*</span></label>

</div>

<div class="form-header"><h4 class="text-uppercase">Vehicle information</h4></div>

</select>

</div>

<option>Volkswagen</option>

<option>Toyota</option>

<option>Honda</option>

<option>Mercedes</option>

</select>

</div>

<label for="model" class="col-sm-2 control-label short-label">Model<span>*</span></label>

<option value="" disabled="" selected="">Select model...</option>

</select>

</div>

<label for="submodel" class="col-sm-2 control-label short-label">Submodel</label>

<option value="" disabled="" selected="">Select submodel...</option>

</select>

</div>

<label for="mileage" class="col-sm-2 control-label short-label">Mileage</label>

<option value="" disabled="" selected="">Select mileage...</option>

</select>

</div>

<div class="form-header"><h4 class="text-uppercase">Appointment information</h4></div>

<label for="waiting" class="col-sm-2 control-label">Waiting

or Drop off <span>*</span></label>

<option value="" disabled="" selected="">Select an option...</option>

<option>Waiting</option>

</select>

</div>

</div>

<option value="" disabled="" selected="">Select time...</option>

</select>

</div>

<div class="form-header"><h4 class="text-uppercase">Services requested</h4></div>

<label class="label-checkbox">Services <span>*</span></label>

</div>

<ul>

Preventive maintenance

</label></li>

Oil change

</label></li>

Brakes & Brake repair

</label></li>

Tires & Tire repair

</label></li>

Mufflers & Exhaust

</label></li>

Steering & Suspension

</label></li>

Batteries, Starters & Charging

</label></li>

</ul>

</div>

<ul>

Engine cooling

</label></li>

Climate control

</label></li>

Check engine light

</label></li>

Belts & Hoses

</label></li>

Lights, Wipers & Accessories

</label></li>

Other

</label></li>

</ul>

</div>

<label for="desc" class="col-lg-2 col-md-2 col-sm-12 control-label">Describe service

request</label>

<textarea class="form-control ct-input ct-input--wide" id="desc" data-placeholder="Describe service

request" placeholder="" name="field[]"> </textarea>

</div>

<button type="submit" class="btn btn-accent">schedule it now</button>

</div>

</button>

Your Email has been sent successfully.

</div>

</button>

Ups, something went wrong.

</div>

</form>

Java Script

$(document).ready(function () {

    var dfor = $('[data-for]'),
        dtarget = $('[data-target]');

    dfor.each(function(){
       var that = $(this);

        that.change(function(){
           if(that.val()) {

               var index = -1,
                   dataFor = that.attr("data-for"),
                   counter = -1;


               dtarget.each(function(){
                   var thiz = $(this),
                       target = thiz.attr("data-target"),
                       ind = target.indexOf(dataFor);

                   counter++;

                   if(ind > -1) {
                      index = counter;
                      return false;
                   }
               });

               if(index > -1) {
                   $(dtarget[index]).prop('disabled', false);
               }
           }
        });
    });


    //datapicker


    var datapicker = $('.datepicker');

    if(datapicker.length) {
        datapicker.datepicker({
            format: 'mm/dd/yyyy'
        });
    }
});

$(document).ready(function () {

var dfor = $('[data-for]'),

dtarget = $('[data-target]');

dfor.each(function(){

var that = $(this);

that.change(function(){

if(that.val()) {

var index = -1,

dataFor = that.attr("data-for"),

counter = -1;

dtarget.each(function(){

var thiz = $(this),

target = thiz.attr("data-target"),

ind = target.indexOf(dataFor);

counter++;

if(ind > -1) {

index = counter;

return false;

}

});

if(index > -1) {

$(dtarget[index]).prop('disabled', false);

}

});

//datapicker

var datapicker = $('.datepicker');

if(datapicker.length) {

datapicker.datepicker({

format: 'mm/dd/yyyy'

});

}

});

Screenshot

Fancy contact form

Options (can be changed in HTML) :

Mail Subject – just change value in :
Success Message – change successMessage div content
Error Message – change errorMessage div content

News

Siver

Estato

Disrupt

We are elite