Booking form

[ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

Hi all, again.

I’ve got a real issue I cannot solve. If there’s anyone who can help me I could pay…

I’ve got a booking form made in html and jquery and I need it to make it works in php so that by selecting a series of parameters (day of arrival, duration of journey, customer data, payment method, etc.) the form send an email to the owner with these informations.

I cannot do it with CF7, because the form has it’s own html structure perfectly integrated with jquery and if I cf7-ize it, it doesn’t work anymore (I tried already).

This is it:

<!-- Booking Date Selection-->
<div class="booking selectDates" id="selectDates">
<!-- TwoThird -->
<div class="two-third">
<div id="datepicker"></div>

<a href="#bookingSteps" title="Proceed with booking" class="button gold large full">Proceed with booking</a>
</div>
<!-- TwoThird -->

<!-- OneThird -->
<div class="one-third">
<div class="box-white">
<h5>Booking summary</h5>
<dl class="summary">
<dt>Model</dt>
<dd>Elan 1923 Impression</dd>
<dt>Base</dt>
<dd>Marina Kastela, Zadar</dd>
<dt>Start date</dt>
<dd>12.06.2014</dd>
<dt>Duration</dt>
<dd>7 days</dd>
<dt>Price</dt>
<dd>400,000,00 USD</dd>
<dt>Flotilla fee</dt>
<dd>1000,00 USD</dd>
<dt>Cleaning fee</dt>
<dd>100,00 USD</dd>
<dt>Total price</dt>
<dd>401.100,00 USD</dd>
</dl>
</div>
</div>
<!-- //OneThird -->
</div>
<!-- // Booking Date Selection -->

<!-- Booking Steps -->
<div class="booking bookingSteps">
<!-- TwoThird -->
<div class="two-third">
<dl class="accordion">
<!-- Item -->
<dt>Client information</dt>
<dd>

<p>Please enter your details to complete an order. All fields are required. </p>
<div class="row">
<div class="one-half">
<label for="fullname">Name and surname</label>
<input type="text" id="fullname" />
</div>

<div class="one-half">

<label for="name">Number of people</label>

<select>
<option selected>Number of people</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

<div class="one-half">
<label for="phone2">Phone</label>
<input type="number" id="phone2" />
</div>

<div class="one-half">
<label for="email2">Email</label>
<input type="email" id="email2" />
</div>

<div class="one-half">
<label for="address">Address</label>
<input type="text" id="address" />
</div>
										
<div class="one-half">
<label for="zip">ZIP code</label>
<input type="text" id="zip" />
</div>

<div class="one-half">
<label for="city">City</label>
<input type="text" id="city" />
</div>

<div class="one-half">
<label for="country">Country</label>
<input type="text" id="country" />
</div>
</div>

<h5>Promo code and payment type</h5>
<p>Please enter your promotion code, if you have received it.</p>
<div class="row">
<div class="one-half">
<label for="discount">Discount code</label>
<input type="text" id="discount" />
</div>

<div class="one-half">
<label for="payment">Payment type</label>
<select id="payment">
<option selected>Payment type</option>
<option>Credit card</option>
<option>Paypal</option>
<option>Direct bank transfer</option>
</select>

</div>

<div class="full-width checkbox">
<input type="checkbox" id="terms" />
<label for="terms">By clicking this box you accept general terms and conditions.</label>
</div>

<div class="full-width">
<a href="#" class="button medium full gold next-step">Continue to next step</a>
</div>
</div>
</dd>
<!-- //Item -->
<!-- Item -->
<dt>Account information</dt>
<dd>
<p>We will create you a customer account so that you can view and manage your booking. Please provide the username and password you would like to use (or use an existing one).</p>

<div class="row">
<div class="one-half">
<label for="username">Username</label>
<input type="text" id="username" />
</div>

<div class="one-half">
<label for="password">Password</label>
<input type="password" id="password" />
</div>

<div class="full-width">
<a href="#" class="button medium full gold next-step">Continue to next step</a>
</div>
</div>
</dd>
<!-- //Item -->
</dl>
<div class="thank-you-note">
<div class="box-white">

<h2>Thank you</h2>
<p>We will get back you with regards your reservation within 24 hours</p>
</div>
</div>
</div>
<!-- TwoThird -->

<!-- OneThird -->
<div class="one-third">
<div class="box-white">
<h5>Booking summary</h5>
<dl class="summary">

<dt>Model</dt>
<dd>Elan 1923 Impression</dd>
<dt>Base</dt>
<dd>Marina Kastela, Zadar</dd>
<dt>Start date</dt>
<dd>12.06.2014</dd>
<dt>Duration</dt>
<dd>7 days</dd>
<dt>Price</dt>
<dd>400,000,00 USD</dd>
<dt>Flotilla fee</dt>
<dd>1000,00 USD</dd>
<dt>Cleaning fee</dt>
<dd>100,00 USD</dd>
<dt>Total price</dt>
<dd>401.100,00 USD</dd>
</dl>
</div>
</div>
<!-- //OneThird -->
</div>
<!-- //Booking Steps -->

There is only the first section (selectDates) visible. By clicking on “Proceed with booking”, the second section “Customer information” appears and “selectDates” disappear. Then, filled the fields and clicking by “Continue to the next step”, the section “Account information” appears, then you can click on “Complete booking process” to send the email to the owner. The “Summary” box should update as long as client fill fields and click on “continue to the next step”. These are the screenshots:

Thanks everyone

• This topic was modified 7 years, 9 months ago by luizbriganti.
• This topic was modified 7 years, 9 months ago by Jan Dembowski.
• This topic was modified 7 years, 9 months ago by luizbriganti.