Pizza order form (demo)

This demo combines several Conditional Fields PRO features into a realistic pizza order form: calculated fields, repeaters, multistep, conditional groups, and Stripe payments. (view source)

Form

    Pizzas

    🍕 Pizza

    Configure your pizza!





    This pizza: $

    Drinks

    Drinks

    Set the amount you'd like to order. Leave at 0 to skip.

    Coca-Cola

    Sprite

    Fanta

    Water

    Beer

    Sides

    Sides

    Set the amount you'd like to order. Leave at 0 to skip.

    Garlic Bread

    Chicken Wings (6pc)

    Caesar Salad

    Mozzarella Sticks

    Tiramisu

    Contact info

    Your Details










    Checkout

    Delivery



    Order Summary

    All pizzas

    $

    Drinks & sides

    $

    Delivery

    $

    Tip

    $

    TOTAL

    $

    Payment


    This form is linked to a Stripe test-account. You can test with 4242 4242 4242 4242. No charges will be made.

    More credit card numbers to test with: https://stripe.com/docs/testing?testing-method=card-numbers

    Form Code

    [step title "Pizzas"]
[repeater pizzas add "🍕 Add another pizza" remove "❌ Remove this pizza" remove_button:per_entry]
<h3>🍕 Pizza</h3>
<p>Configure your pizza!</p>
<label><strong>Pizza Size</strong></label>
[calc_radio size use_label_element default:2 "Small (10&quot;)=>8" "Medium (12&quot;)=>12" "Large (14&quot;)=>16" "Family (18&quot;)=>22"]

<label><strong>Crust</strong></label>
[calc_radio crust use_label_element default:1 "Classic=>0" "Thin & Crispy=>0" "Stuffed Crust (+$3)=>3" "Gluten Free (+$4)=>4"]

<label><strong>Toppings</strong> (choose as many as you like)</label>
[calc_checkbox toppings use_label_element "Pepperoni=>1.50" "Mushrooms=>1.50" "Onions=>1" "Sausage=>2" "Bacon=>2" "Extra Cheese=>1.50" "Green Peppers=>1" "Black Olives=>1" "Jalapeños=>1" "Pineapple=>1.50" "Anchovies=>2"]

<label><strong>Quantity</strong></label>
[number quantity min:1 max:20 "1"]

<p><strong>This pizza:</strong> $[calculated pizza-line formula:"([size] + [crust] + [toppings]) * [quantity]" display:span decimals:2]</p>
[/repeater]

<hr />

[step title "Drinks"]
<h3>Drinks</h3>

<p>Set the amount you'd like to order. Leave at <code>0</code> to skip.</p>

<table class="extras-table">
  <tr><td>Coca-Cola</td><td>[number extra_coke_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Sprite</td><td>[number extra_sprite_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Fanta</td><td>[number extra_fanta_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Water</td><td>[number extra_water_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Beer</td><td>[number extra_beer_qty min:0 max:20 "0"]</td></tr>
</table>

[step title "Sides"]
<h3>Sides</h3>

<p>Set the amount you'd like to order. Leave at <code>0</code> to skip.</p>

<table class="extras-table">
  <tr><td>Garlic Bread</td><td>[number extra_garlic_bread_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Chicken Wings (6pc)</td><td>[number extra_chicken_wings_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Caesar Salad</td><td>[number extra_caesar_salad_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Mozzarella Sticks</td><td>[number extra_mozzarella_sticks_qty min:0 max:20 "0"]</td></tr>
  <tr><td>Tiramisu</td><td>[number extra_tiramisu_qty min:0 max:20 "0"]</td></tr>
</table>

[step title "Contact info"]
<h3>Your Details</h3>
<label>Name</label>
[text* your-name "Jane Doe"]
<label>Email</label>
[email* your-email "jane.doe@example.com"]
<label>Phone</label>
[tel* your-phone "+1 555 123 4567"]
<label>Delivery address</label>
[textarea* your-address 40x3 "742 Evergreen Terrace, Springfield, IL 62704"]
<label>Special instructions</label>
[textarea instructions 40x2 "Please ring the doorbell twice."]

[step title "Checkout"]
<h3>Delivery</h3>

<label><strong>Pickup or Delivery?</strong></label>
[calc_radio delivery use_label_element default:1 "Pickup (free)=>0" "Delivery (+$5)=>5"]

<label><strong>Tip</strong></label>
[calc_select tip "No tip=>0" "10%=>0.10" "15%=>0.15" "20%=>0.20" "25%=>0.25"]

<hr />

<h3>Order Summary</h3>

<table style="width:100%; max-width:500px; border-collapse:collapse;">
<tr>
  <td style="padding:6px;">All pizzas</td>
  <td style="padding:6px; text-align:right;">$[calculated pizzas-total func:calcPizzasTotal display:span decimals:2]</td>
</tr>
<tr>
  <td style="padding:6px;">Drinks &amp; sides</td>
  <td style="padding:6px; text-align:right;">$[calculated extras-total formula:"[extra_coke_qty]*2.50 + [extra_sprite_qty]*2.50 + [extra_fanta_qty]*2.50 + [extra_water_qty]*1.50 + [extra_beer_qty]*4 + [extra_garlic_bread_qty]*3.50 + [extra_chicken_wings_qty]*6 + [extra_caesar_salad_qty]*5 + [extra_mozzarella_sticks_qty]*4.50 + [extra_tiramisu_qty]*5" display:span decimals:2]</td>
</tr>
<tr>
  <td style="padding:6px;">Delivery</td>
  <td style="padding:6px; text-align:right;">$[calculated delivery-fee formula:"[delivery]" display:span decimals:2]</td>
</tr>
<tr>
  <td colspan="2" style="border-top:1px solid #ddd; padding-top:6px;"></td>
</tr>
<tr>
  <td style="padding:6px;">Tip</td>
  <td style="padding:6px; text-align:right;">$[calculated tip-amount formula:"([pizzas-total] + [extras-total] + [delivery-fee]) * [tip]" display:span decimals:2]</td>
</tr>
<tr>
  <td colspan="2" style="border-top:1px solid #ddd; padding-top:6px;"></td>
</tr>
<tr>
  <td style="padding:6px;"><strong style="font-size:1.3em;">TOTAL</strong></td>
  <td style="padding:6px; text-align:right;"><strong style="font-size:1.3em;">$[calculated stripe_amount formula:"[pizzas-total] + [extras-total] + [delivery-fee] + [tip-amount]" display:span decimals:2]</strong></td>
</tr>
</table>

<!-- Note: The 'stripe_amount' field is automatically detected by CF7CF and used
     as the dynamic Stripe payment amount. No hardcoded amount needed! -->

<script>
function calcPizzasTotal(fields) {
  return fields.sum('pizza-line');
}
</script>

<hr />

<h3>Payment</h3>
<p>
  This form is linked to a Stripe test-account. You can test with <code>4242 4242 4242 4242</code>. No charges will be made.<br>
  More credit card numbers to test with: <a href="https://stripe.com/docs/testing?testing-method=card-numbers" target="_blank">https://stripe.com/docs/testing?testing-method=card-numbers</a>
</p>
<!-- Note: Stripe amount is set dynamically from [calculated stripe_amount] field above -->
[stripe currency:usd amount:700 "Proceed to checkout" "Pay now"]

    Email Body

    <h2>New Pizza Order</h2>
<p><strong>Customer:</strong> [your-name]<br />
<strong>Email:</strong> [your-email]<br />
<strong>Phone:</strong> [your-phone]<br />
<strong>Address:</strong> [your-address]</p>

<h3>Pizzas</h3>
[pizzas]
<p>Size: [size] | Crust: [crust] | Toppings: [toppings] | Qty: [quantity] | Line total: $[pizza-line]</p>
[/pizzas]

<h3>Drinks</h3>
<p>
Coca-Cola: [extra_coke_qty]<br />
Sprite: [extra_sprite_qty]<br />
Fanta: [extra_fanta_qty]<br />
Water: [extra_water_qty]<br />
Beer: [extra_beer_qty]</p>

<h3>Sides</h3>
<p>
Garlic Bread: [extra_garlic_bread_qty]<br />
Chicken Wings (6pc): [extra_chicken_wings_qty]<br />
Caesar Salad: [extra_caesar_salad_qty]<br />
Mozzarella Sticks: [extra_mozzarella_sticks_qty]<br />
Tiramisu: [extra_tiramisu_qty]</p>

<h3>Totals</h3>
<p>Pizzas: $[pizzas-total]<br />
Drinks &amp; sides: $[extras-total]<br />
Delivery: $[delivery-fee]<br />
Tip: $[tip-amount]<br />
<strong>TOTAL: $[stripe_amount]</strong><br />
Stripe payment details: [_stripe_payment_link]</p>

<p>Special instructions: [instructions]</p>

    Conditional Fields (Text)

    Edit this form in the form tester