<!--
Name: Sofa Configurator
Description: Furniture configurator with a room preview: the sofa in a living room changes as customers pick the fabric and leg finish (Layered Image). Per-option pricing; the room picture is saved with the order. Comes with a catalog item for checkout.
Type: form
Version: pro
CraftForms-Version: 1
Icon: admin-home
UUID: form_starter_sofa
Goals: calculator
Industries: custom-goods
Delivery: wordpress, embed
Catalog-Item: sofa
-->
<!--craftforms-meta
{
    "formula": "899 + fabric_price + legs_price",
    "transformations": [
        {
            "name": "fabric_price",
            "type": "linked",
            "linkedField": "fabric",
            "lookupColumn": "price",
            "lookupStrategy": "exact",
            "defValue": 0
        },
        {
            "name": "legs_price",
            "type": "linked",
            "linkedField": "legs",
            "lookupColumn": "price",
            "lookupStrategy": "exact",
            "defValue": 0
        }
    ],
    "conditionalLogicRules": [],
    "displayFieldsLogic": [],
    "disableFieldsLogic": [],
    "displayOptionsLogic": [],
    "submitActions": [
        {
            "id": "action-save-1",
            "type": "save_submission",
            "order": 1,
            "settings": []
        }
    ],
    "sendEmails": true,
    "createEntries": true
}
-->
<!--craftforms-assets
{"1557":{"hash":"8382b8ceed04078eea5f6b2067c38908c2b5e7ba","filename":"living-room.jpg","mime":"image/jpeg","path":"starters/wc-products/assets/sofa-room-preview/living-room.jpg"},"1576":{"hash":"9d2fc6f21824219a45c4d9b40c7eb0208dc2b7ea","filename":"legg-oak.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/legg-oak.png"},"1571":{"hash":"84f15cf759293b6bfb4a073a8689935d2b592dfc","filename":"leggs-black.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/leggs-black.png"},"1577":{"hash":"56aabb4920da2b7c5c292650cf963e3aacc0d142","filename":"legg-brass.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/legg-brass.png"},"1565":{"hash":"c5d0c0dd287072a98f9618fb1e7697adc90cee25","filename":"sofa-grey.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/sofa-grey.png"},"1568":{"hash":"eb6b43504ed23edd4aa8dd7d86c9be97b20516f7","filename":"sofa-sage.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/sofa-sage.png"},"1567":{"hash":"66d021f547a5cd1b923e98d1df051d298d4066e7","filename":"sofa-navy.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/sofa-navy.png"},"1566":{"hash":"2b81ef28a3bf3aca2d8346bfa78a39f2461a2d70","filename":"sofa-mustard.png","mime":"image/png","path":"starters/wc-products/assets/sofa-room-preview/sofa-mustard.png"}}
-->
<!-- wp:craftforms/form {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->

<!-- wp:craftforms/layered-image {"images":[],"backgroundType":"image","background":{"id":1557,"url":"https://sandbox.test/wp-content/uploads/2026/09/living-room.jpg","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/living-room-150x150.jpg","alt":""},"backgroundColor":"#ffffff","layers":[{"id":"layer_legs","label":"Legs","connectedField":"legs","mode":"image","maskImage":null,"choices":[{"value":"oak","image":{"id":1576,"url":"https://sandbox.test/wp-content/uploads/2026/09/legg-oak.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/legg-oak-150x150.png","alt":""}},{"value":"black","image":{"id":1571,"url":"https://sandbox.test/wp-content/uploads/2026/09/leggs-black.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/leggs-black-150x150.png","alt":""}},{"value":"brass","image":{"id":1577,"url":"https://sandbox.test/wp-content/uploads/2026/09/legg-brass.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/legg-brass-150x150.png","alt":""}}]},{"id":"layer_sofa","label":"Sofa","connectedField":"fabric","mode":"image","maskImage":null,"choices":[{"value":"grey","image":{"id":1565,"url":"https://sandbox.test/wp-content/uploads/2026/09/sofa-grey-1.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/sofa-grey-1-150x150.png","alt":""}},{"value":"sage","image":{"id":1568,"url":"https://sandbox.test/wp-content/uploads/2026/09/sofa-sage-1.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/sofa-sage-1-150x150.png","alt":""}},{"value":"navy","image":{"id":1567,"url":"https://sandbox.test/wp-content/uploads/2026/09/sofa-navy-1.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/sofa-navy-1-150x150.png","alt":""}},{"value":"mustard","image":{"id":1566,"url":"https://sandbox.test/wp-content/uploads/2026/09/sofa-mustard-1.png","thumbUrl":"https://sandbox.test/wp-content/uploads/2026/09/sofa-mustard-1-150x150.png","alt":""}}]}],"zoomEnabled":true,"autoSwitchToPreview":true,"saveOnSubmit":true,"saveResultField":"layeredImg","previewLabel":"In a room","thumbnailSize":64,"aspectRatio":"16/10"} /-->

<!-- wp:craftforms/radio-field {"name":"fabric","label":"Fabric","options":[{"label":"Stone grey","value":"grey","price":0,"color":"#8b949e"},{"label":"Sage","value":"sage","price":0,"color":"#8fa087"},{"label":"Navy velvet","value":"navy","price":120,"color":"#34425f"},{"label":"Mustard velvet","value":"mustard","price":120,"color":"#c8973a"}],"optionStyle":"color","optionSwatchWidth":44,"optionSwatchHeight":44,"defaultValue":"grey","required":true,"requiredMessage":"Please choose fabric","className":"is-layout-flex"} -->
<div data-fieldname="fabric" aria-describedby="fabric-error" data-validate-minselected="1" data-validate-minselected-message="Please choose fabric" role="group" aria-labelledby="fabric-label" data-craftforms-field="fabric" class="wp-block-craftforms-radio-field is-layout-flex"><!-- wp:craftforms/label {"content":"Fabric"} /-->

<!-- wp:craftforms/options-group {"layout":{"type":"flex","orientation":"horizontal","flexWrap":"wrap"},"className":"is-layout-flex"} -->
<div class="wp-block-craftforms-options-group craftforms-options-group is-layout-flex"><!-- wp:craftforms/radio-option {"label":"Stone grey","value":"grey","checked":true,"name":"fabric","price":0,"color":"#8b949e","optionStyle":"color"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Stone grey</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option -->

<!-- wp:craftforms/radio-option {"label":"Sage","value":"sage","name":"fabric","price":0,"color":"#8fa087","optionStyle":"color"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Sage</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option -->

<!-- wp:craftforms/radio-option {"label":"Navy velvet","value":"navy","name":"fabric","price":120,"color":"#34425f","optionStyle":"color"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Navy velvet</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option -->

<!-- wp:craftforms/radio-option {"label":"Mustard velvet","value":"mustard","name":"fabric","price":120,"color":"#c8973a","optionStyle":"color"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Mustard velvet</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option --></div>
<!-- /wp:craftforms/options-group -->

<!-- wp:craftforms/form-error {"content":"{{error.fabric}}","style":{"color":{"text":"#cc1818"},"typography":{"fontSize":"0.8em"}}} /--></div>
<!-- /wp:craftforms/radio-field -->

<!-- wp:craftforms/radio-field {"name":"legs","label":"Legs","options":[{"label":"Oak","value":"oak","price":0},{"label":"Black metal","value":"black","price":0},{"label":"Brass","value":"brass","price":40}],"optionStyle":"text","defaultValue":"oak","required":true,"requiredMessage":"Please choose legs","className":"is-layout-flex"} -->
<div data-fieldname="legs" aria-describedby="legs-error" data-validate-minselected="1" data-validate-minselected-message="Please choose legs" role="group" aria-labelledby="legs-label" data-craftforms-field="legs" class="wp-block-craftforms-radio-field is-layout-flex"><!-- wp:craftforms/label {"content":"Legs"} /-->

<!-- wp:craftforms/options-group {"layout":{"type":"flex","orientation":"horizontal","flexWrap":"wrap"},"className":"is-layout-flex"} -->
<div class="wp-block-craftforms-options-group craftforms-options-group is-layout-flex"><!-- wp:craftforms/radio-option {"label":"Oak","value":"oak","checked":true,"name":"legs","price":0,"optionStyle":"text"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Oak</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option -->

<!-- wp:craftforms/radio-option {"label":"Black metal","value":"black","name":"legs","price":0,"optionStyle":"text"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Black metal</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option -->

<!-- wp:craftforms/radio-option {"label":"Brass","value":"brass","name":"legs","price":40,"optionStyle":"text"} -->
<div class="wp-block-craftforms-radio-option"><!-- wp:craftforms/choice-label -->
<span class="wp-block-craftforms-choice-label cf-choice-label">Brass</span>
<!-- /wp:craftforms/choice-label --></div>
<!-- /wp:craftforms/radio-option --></div>
<!-- /wp:craftforms/options-group -->

<!-- wp:craftforms/form-error {"content":"{{error.legs}}","style":{"color":{"text":"#cc1818"},"typography":{"fontSize":"0.8em"}}} /--></div>
<!-- /wp:craftforms/radio-field -->

<!-- wp:craftforms/infoblock {"style":{"color":{"background":"#f0f4ff"},"spacing":{"padding":{"top":"20px","bottom":"20px","left":"24px","right":"24px"}},"border":{"radius":"8px"}}} -->
<!-- wp:paragraph {"style":{"typography":{"fontWeight":"700","fontSize":"1.4rem"}}} -->
<p style="font-size:1.4rem;font-weight:700">Price: {{form.currency}}{{form.price}}</p>
<!-- /wp:paragraph -->
<!-- /wp:craftforms/infoblock -->

<!-- wp:group {"className":"cf-add-to-cart","layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
<div class="wp-block-group cf-add-to-cart"><!-- wp:craftforms/text-input-field {"name":"qty","label":"Quantity","type":"number","value":"1","required":true,"min":"1","layout":{"type":"flex","orientation":"horizontal","flexWrap":"nowrap"}} -->
<!-- wp:craftforms/label {"content":"Quantity"} /-->

<!-- wp:craftforms/text-input {"name":"qty","type":"number","value":"1","required":true,"min":"1"} /-->

<!-- wp:craftforms/form-error {"content":"{{error.qty}}"} /-->
<!-- /wp:craftforms/text-input-field -->

<!-- wp:craftforms/submit-button {"label":"Order sofa"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:craftforms/notification /--></div>
<!-- /wp:group -->
<!-- /wp:craftforms/form -->