Product Enquiry Form

This tutorial will walk through how to create a product enquiry form, which requests basic contact fields and shows a list of products.

Basic Contact Form

The following code is a basic implementation of contact form.

<forms:form recordsubmissions="true" id="product_enquiry" contactmode="store" onsubmitemail="true" onsubmitemailsubject="[? 'Product Enquiry: ' + $_POST['contact_first_name'] + ' ' + $_POST['contact_last_name'] ?]" onsuccesstoastmessage="Thank you! We'll process your order as soon as possible."> <forms:row label="First Name" type="one_column"> <forms:editbox id="contact_first_name" validations="mandatory" /> </forms:row> <forms:row label="Last Name" type="one_column"> <forms:editbox id="contact_last_name" validations="mandatory" /> </forms:row> <forms:row label="Phone Number" type="one_column"> <forms:editbox id="contact_phone" validations="mandatory" /> </forms:row> <forms:row label="Email Address" type="one_column"> <forms:editbox id="contact_email" validations="email,mandatory" transformations="tolower" /> </forms:row> <forms:row label="Delivery Address" type="one_column"> <forms:textarea id="contact_delivery_address" validations="mandatory" width="100%" rows="2"/> </forms:row> <forms:row type="one_column"> <forms:submitbutton value="Submit Order" /> </forms:row> </forms:form>

Table of Products

The <data:table> control is used to display products in a table inside the enquiry form. In the example below, the datasource is set to retrieve all products:

\Components\Commerce\Products::getAll()

As an alternative, all Products of a certain Product Category could be retrieved instead by changing the datasource of the <data:table> control:

\Components\Commerce\Products::getAllForCategoryAndBrand($iCategoryId)

The following code will show you how to display a list of products using a data table:

<forms:form recordsubmissions="true" id="product_enquiry" contactmode="store"> <data:table id="products_table" datasource="\Components\Commerce\Products::getAll()" as="product" width="100%"> <data:column heading="Image"> <logic:if test="$product['product_icon']"> <a href="[? $product['product_uri'] ?]"> <standard:image alt="[? $product['product_title'] + ' - Click to enlarge picture.' ?]" align="left" style="margin-bottom: 5px; margin-right: 10px" src="[? $product['product_icon'] ?]" width="150" /> </a> </logic:if> </data:column> <data:column heading="Title"> <a target="_blank" href="[? $product['product_uri'] ?]"> <h4><big>[? $product['product_title'] ?]</big></h4> </a> <small>[? formatCurrency($product['product_price']) ?]</small> </data:column> <data:column heading="Quantity"> <forms:row type="one_column" description="Quantity"> <forms:spinbox id="[? product_id_ + $product['product_id'] ?]" width="100%" /> </forms:row> </data:column> </data:table> </forms:form>

Putting it all Together

Combining the two above example, here is the completed product enquiry form: