Flowers Order Form
Sell your flowers online with a free order form. Use it to accept flower orders for birthdays, weddings, and other events. The florist order form will collect the bouquet requirements and delivery details for you. A customer can list the flowers they want or include a picture of the bouquet. The customer can also leave instructions in the comment box or indicate what should be written on the card. You can easily customize the form and embed it on your website or share a link.
Preview
Theme:
Fields and controls
- All form elements are placed in a Grid container with fd-blur-background CSS class. Change the container styling in the CSS editor.
- The Email field accepts only valid email addresses. Change the pattern in the field properties.
- The MobileNumber is a masked input field that accepts only 11-digit numbers. Change the mask in the field properties.
- Change options for the Flower column in the column properties.
- The form timeout is set to 10 seconds, then the form can be submitted again. You can change it in the form settings.
JavaScript
- Flowers' prices are stored in products variable. The Unit Price column is populated automatically when the Flower column changes.
- The Unit Price and the Line Total columns are read-only.
- The Order Total field is disabled.
- The totals for the row and the table are calculated automatically when the data table changes.
- The loadData() function populates the data table from an external file on form load.
Styling
- A background image is defined in fd-form CSS class.
- A background for a grid container with a fd-blur-background CSS class is blurred.
- h1, h4, p elements are colored in white.
- A pseudo-element is added before and after h4 elements to display horizontal lines.