<form-template> <fields> <field type="header" subtype="h2" label="Where do you want to go?"/> <field type="text" subtype="text" required="true" label="First name" name="first-name" className="form-control"/> <field type="text" subtype="text" required="true" label="Last name" name="last-name" className="form-control"/> <field type="text" subtype="text" required="true" label="Email" name="email" className="form-control"/> <field type="text" subtype="text" label="Where would you like to go?" description="If you're not sure, just give me a few destinations you're considering." placeholder="ex: Tahiti" name="destination" className="form-control"/> <field type="date" label="When would you like to depart?" description="This just gives me a general idea of when you like to go; it can be changed later." name="starting-at" className="form-control"/> <field type="date" label="When would you like to return?" description="This just gives me a general idea of when you like to return; it can be changed later." name="ending-at" className="form-control"/> <field type="checkbox-group" label="Are your dates flexible?" name="dates-flexible"><option label="Yes" value="yes">Yes</option></field> <field type="text" subtype="text" label="What is your departure city?" description="Where will you be flying from?" name="departure-city" className="form-control"/> <field type="number" label="How many travelers?" min="1" max="99" name="number-of-travelers" className="form-control"/> <field type="radio-group" label="What is your budget for all travelers?" description="This just gives me a general starting point and can always be changed later." name="budget"> <option value="1500-2500" label="$1,500 to $2,500">$1,500 to $2,500</option> <option value="2500-4500" label="$2,500 to $4,500">$2,500 to $4,500</option> <option value="4500-6500" label="$4,500 to $6,500">$4,500 to $6,500</option> <option value="6500-8500" label="$6,500 to $8,500">$6,500 to $8,500</option> <option value="8500-10000" label="$8,500 to $10,000">$8,500 to $10,000</option> <option value="10000" label="$10,000+">$10,000+</option> </field> <field type="radio-group" label="What best describes your hotel preference?" name="hotel-preference" other="true"> <option value="value" label="Value">Value</option> <option value="moderate" label="Moderate">Moderate</option> <option value="luxury" label="Luxury">Luxury</option> <option value="boutique" label="Boutique">Boutique</option> </field> <field type="checkbox-group" label="What kind of vibe are you looking for?" description="Check all that apply." name="vibe-preference" other="true"> <option value="romantic" label="Romantic">Romantic</option> <option value="rest-and-relaxation" label="Rest and relaxation">Rest and relaxation</option> <option value="off-the-beaten-path" label="Off the beaten path">Off the beaten path</option> <option value="party" label="Party">Party</option> <option value="local-culture" label="Local culture">Local culture</option> <option value="family-friendly" label="Family friendly">Family friendly</option> <option value="food-wine" label="Food and wine">Food and wine</option> </field> <field type="checkbox-group" label="What activities are you interested in?" description="Check all that apply" name="activity-preferences" other="true"> <option value="beach-water" label="Beach and water">Beach and water</option> <option value="gambling" label="Gambling">Gambling</option> <option value="scuba" label="Scuba">Scuba</option> <option value="adventure" label="Adventure activities">Adventure activities</option> <option value="golf" label="Golf">Golf</option> <option value="nightlife" label="Nightlife">Nightlife</option> <option value="art-theater" label="Arts and theater">Arts and theater</option> </field> <field type="text" subtype="text" label="Anything you absolutely must do or see?" name="must-dos" className="form-control"/> <field type="textarea" label="What else would you like me to know?" description="What else would you like me to know about your travelers, budget and/or travel preferences?" name="notes" className="form-control" subtype="textarea"/> </fields> </form-template>
Submit Form