Commerce Webform
The Drupal Commerce Webform module combines the flexibility of the Webform module with the Drupal Commerce framework. This allows website administrators the ability to create complex questionnaires and sell products alongside them without need to gain a deep understanding of Drupal Commerce or of Drupal content types and fields.
The Webform module allows content administrators to easily produce online webforms for their websites for capturing responses from end users. Commerce webform provides a new product element which can be added to a webform which allows end users to select products. On submission of the webform, the chosen products are put into the users shopping cart where they can then purchase them. A reference is kept between the users order and the original webform so that the purchased state of the order is relayed back to the webform submission. When the administrator downloads all the webform submissions, they can see those submissions that paid and those that did not. Also, webform submission details are available when viewing the order.
This module allows content administrators to easily capture additional details with an order without having to work with commerce's custom line items in the familiar webform interface.
A (reasonably) easy guide to get started is provided below. For this example we are going to sell tickets to an event, lets call the event Drupal training...
1. Install the modules
From a fresh Drupal install download the commerce module, webform module and commerce webform module and place into your sites/all/modules directory.
2. Enable the modules
Enable the followinng modules, you'll be told to enable a few more as well, just say yes :- webform, commerce_webform, commerce_ui, commerce_order_ui, commerce_payment_ui, commerce_product_ui
3. Add a payment module
You'll need a payment module as well, commerce comes with an example one that doesn't take any money off you
4. Create a new product you want to sell
- Store -> Products -> Add a product -> Create product
- SKU: drupal-training-ticket Title: Drupal training ticket
- Price: 100 USD
- Status: Active
- Click Save Product
5. Create new webform node
- Content -> Add Content -> Webform
- Title: Drupal Training Body: Come to our Drupal training event!
- Click Save
6. Add webform components to the webform
You should already be on the webform tab for the webform created in 5.
- New component name: Ticket
- Type: Commerce product skus
- Mandatory: yes
- Click Add
- Product type: (do not select anything here)
- Product skus: drupal-training-ticket
- Click Save Component
7. Add some more fields
You should be back on the webform tab, now lets add some more details to the order form like collecting the lunch preference of the person
- New component name: Lunch preference
- Type: Select Options
- Mandatory: yes
- Click Add
- Options (one per line):
- 0|Any
- 1|Vegetarian
- 2|Vegan
- Click Save Component
8. Go buy a ticket
Go view the webform node, you'll be able to select the product and the meal preferences then click add to cart. Go visit your cart and you'll see the drupal event in it. Go checkout and pay for the event.
9. Review the results
Return to the webform. On the results tab you'll see, under analysis the number of webform submissions with Paid or Unpaid tickets (unpaid are people who submitted the form but did not get to the end of checkout). The Download option allows you to inspect the orders in a spreadhsheet program like Excel.
10. Fine tuning
Other options you might like to check on your webform settings: Redirection location: Set to cart to send the user straight to the shopping cart on submission of the webform Submission access: Disallow anonymous from making purchases or restrict purchasing to just certain roles Show notice about previous submissions: Untick this to allow the same user to make return purchases
What next?
The 7.x-2.x branch of Commerce Webform is the only supported one now which only works with the latest webform (7.x-4.x) and supports webform conditionals. These show or hide form elements depending on a users choices on the form.
Commerce Customizable Products
There is a non-webform alternative to this called Commerce Customizable Products which uses Drupal content types, fields and line item entities which gives a better data structure for more advanced users. Checkout how to use this by watching Randy Fay's video on Commerce Customizable Products.