Pickup

<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f8f9fa;
        padding: 20px;
    }

    h2 {
        text-align: center;
        color: #343a40;
        margin-bottom: 30px;
    }

    form {
        max-width: 600px;
        margin: auto;
        background: #ffffff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    label {
        display: block;
        margin-bottom: 15px;
        font-weight: 600;
        color: #495057;
    }

    input[type="text"],
    input[type="tel"],
    input[type="date"],
    select {
        width: 100%;
        padding: 10px 12px;
        margin-top: 5px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 16px;
        background-color: #fdfdfe;
    }

    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="date"]:focus,
    select:focus {
        outline: none;
        border-color: #4dabf7;
        box-shadow: 0 0 5px rgba(77, 171, 247, 0.5);
    }

    input[type="submit"],
    [submit] {
        background-color: #198754;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        margin-top: 20px;
        width: 100%;
    }

    input[type="submit"]:hover,
    [submit]:hover {
        background-color: #157347;
    }

    @media (max-width: 600px) {
        form {
            padding: 20px;
        }

        input[type="text"],
        input[type="tel"],
        input[type="date"],
        select {
            font-size: 15px;
            padding: 9px 10px;
        }

        input[type="submit"],
        [submit] {
            font-size: 15px;
            padding: 10px 18px;
        }
    }
</style>

<form>
    <h2>Pickup Order Form</h2>
    
    <label>Sender Name
        [text* sender-name]
    </label>
    <label>Sender Location
        [text* sender-location]
    </label>
    <label>Sender Contact Number
        [tel* sender-contact]
    </label>

    <label>Receiver Name
        [text* receiver-name]
    </label>
    <label>Receiver Location
        [text* receiver-location]
    </label>
    <label>Receiver Contact Number
        [tel* receiver-contact]
    </label>

    <label>Pickup Location
        [select* pickup-location "Golpark" "Traffic Chwok" "Hospital Line" "Milanchwok" "Sukkhanagar" "Chauraha" "Horizen Chwok" "Devinagar/Buddhanagar" "Kalikanagar" "Pari Butwal (Fulbari)" "Jitgadi" "Belbas" "Yogikuti" "Janakinagar" "Shankharnagar" "Drivertole" "Nayamil" "Manigram" "Sainamaina/ Butwal" "Nayagau" "Tamnagar" "Semlar" "Hirapur" "Bankatta" "Ranibagiya" "Murgiya" "Manglapur" "Bhalwari" "Patthardada" "Madauliya" "Kotihawa" "Kataiya" "Buddha Chowk" "Airport" "Devkota chowk" "UCMS" "Buspark" "Farsatikar" "Amuwa" "Manpakadi" "Pokhara bari" "Betani" "Charpata" "Shakhuwani" "Chhapiya" "West Rupandehi" "Bhuddanagar" "Ramapur/Kalauni" "Bashadi" "Saljhandi" "East Rupandehi / Nawalparasi" "Bhaluhi" "Sitalnagar" "Khaireni"]
    </label>

    <label>Pickup Date
        [date* pickup-date]
    </label>

    [submit "Submit Order"]
</form>