Component laden...

Laden

Meer onderdelen

Bekijk alles
Deel van

Input Option Pairs

Oeps! Er ging iets mis bij het verzenden van het formulier.
Input Option Pairs
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"0cd695cc-cfb8-c794-0cdf-a8568c2a6209","type":"Block","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb48","b912da50-06bc-9612-ff8e-7bfe0bb53cd5"],"data":{"tag":"div","text":false}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb48","type":"FormWrapper","tag":"div","classes":["9ecef84f-f51c-3dfd-0e84-6ce744ba48b2"],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb49","c0584ced-ce01-bf54-24fb-bed4e2adbb51","c0584ced-ce01-bf54-24fb-bed4e2adbb54"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb49","type":"FormForm","tag":"form","classes":["94dc0b12-6ed3-8157-e0d1-69232e6c5929"],"children":["33013577-6caa-2654-2af1-0eadf8c5ca28","c0584ced-ce01-bf54-24fb-bed4e2adbb4c"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"33013577-6caa-2654-2af1-0eadf8c5ca28","type":"Block","tag":"div","classes":["5d4d60da-f59c-1c4d-29b6-20e6c5d1c268"],"children":["1dcd52b4-2b13-1366-b224-496fb6b97eee","407756a2-0170-f6a7-5e33-32dc2de66780"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1dcd52b4-2b13-1366-b224-496fb6b97eee","type":"FormTextInput","tag":"input","classes":["6050c3f5-d404-70ae-7343-c688e654742c","7f71bddf-85ea-d2c2-6305-635468b67eb0"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Number","data-name":"Number","placeholder":"","type":"number","id":"Number","disabled":false,"required":false},"xattr":[{"name":"ms-code-combine-inputs","value":"time-1"}],"form":{"name":"Number","type":"input","passwordPage":false}}},{"_id":"407756a2-0170-f6a7-5e33-32dc2de66780","type":"FormSelect","tag":"select","classes":["6050c3f5-d404-70ae-7343-c688e654742c"],"children":[],"data":{"attr":{"id":"field","name":"field","data-name":"Field","required":false,"multiple":false},"form":{"type":"select","opts":[{"t":"Days","v":"Days"},{"t":"Months","v":"Months"},{"t":"Years","v":"Years"}],"name":"Field"},"xattr":[{"name":"ms-code-combine-inputs","value":"time-2"}]}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb4c","type":"FormTextInput","tag":"input","classes":["6050c3f5-d404-70ae-7343-c688e654742c"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"name","data-name":"Name","placeholder":"You should hide this field","type":"text","id":"name","disabled":false,"required":false},"form":{"type":"input","name":"Name","passwordPage":false},"xattr":[{"name":"ms-code-combine-inputs","value":"time-target"}]}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb51","type":"FormSuccessMessage","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb52"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb52","type":"Block","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb53"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb53","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb54","type":"FormErrorMessage","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb55"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb55","type":"Block","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb56"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb56","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"b912da50-06bc-9612-ff8e-7bfe0bb53cd5","type":"HtmlEmbed","tag":"div","classes":["da644393-b7a4-8814-50af-299dea63cf9f"],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #56 v0.1 💙 INPUT OPTION PAIRS -->\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n<script>\n$(document).ready(function() {\n var groups = {};\n\n // Get all inputs with the attribute ms-code-combine-inputs\n var inputs = $('input[ms-code-combine-inputs], select[ms-code-combine-inputs]');\n\n // For each input\n inputs.each(function() {\n // Split the attribute value at the dash\n var parts = $(this).attr('ms-code-combine-inputs').split('-');\n\n // If the group doesn't exist yet, create it\n if (!groups[parts[0]]) {\n groups[parts[0]] = {\n targets: [],\n values: [],\n };\n }\n\n // If it's a target, add it to the targets\n if (parts[1] == 'target') {\n groups[parts[0]].targets.push($(this));\n } else {\n // It's an input, add it to the values and attach a listener\n groups[parts[0]].values.push($(this));\n\n $(this).on('input change', function() {\n // On input or change, combine all values with a space in between\n // and set the targets' value\n var combinedValue = '';\n $.each(groups[parts[0]].values, function(index, value) {\n combinedValue += $(this).val();\n if (index < groups[parts[0]].values.length - 1) {\n combinedValue += ' '; // Add a space between values\n }\n });\n\n $.each(groups[parts[0]].targets, function() {\n $(this).val(combinedValue);\n });\n });\n }\n });\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #56 v0.1 💙 INPUT OPTION PAIRS -->\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n<script>\n$(document).ready(function() {\n var groups = {};\n\n // Get all inputs with the attribute ms-code-combine-inputs\n var inputs = $('input[ms-code-combine-inputs], select[ms-code-combine-inputs]');\n\n // For each input\n inputs.each(function() {\n // Split the attribute value at the dash\n var parts = $(this).attr('ms-code-combine-inputs').split('-');\n\n // If the group doesn't exist yet, create it\n if (!groups[parts[0]]) {\n groups[parts[0]] = {\n targets: [],\n values: [],\n };\n }\n\n // If it's a target, add it to the targets\n if (parts[1] == 'target') {\n groups[parts[0]].targets.push($(this));\n } else {\n // It's an input, add it to the values and attach a listener\n groups[parts[0]].values.push($(this));\n\n $(this).on('input change', function() {\n // On input or change, combine all values with a space in between\n // and set the targets' value\n var combinedValue = '';\n $.each(groups[parts[0]].values, function(index, value) {\n combinedValue += $(this).val();\n if (index < groups[parts[0]].values.length - 1) {\n combinedValue += ' '; // Add a space between values\n }\n });\n\n $.each(groups[parts[0]].targets, function() {\n $(this).val(combinedValue);\n });\n });\n }\n });\n});\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"insideRTE":false}}],"styles":[{"_id":"9ecef84f-f51c-3dfd-0e84-6ce744ba48b2","fake":false,"type":"class","name":"block","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"94dc0b12-6ed3-8157-e0d1-69232e6c5929","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"width: 300px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; flex-direction: column; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 92.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 92.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 92.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 92.00%, 1.00); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 8px 13px 0 hsla(0, 0.00%, 0.00%, 0.06);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"5d4d60da-f59c-1c4d-29b6-20e6c5d1c268","fake":false,"type":"class","name":"2-field","namespace":"","comb":"","styleLess":"display: grid; margin-bottom: 10px; justify-content: space-between; align-items: center; grid-auto-columns: 1fr; grid-column-gap: 10px; grid-row-gap: 16px; grid-template-columns: 0.5fr 1fr; grid-template-rows: auto;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"6050c3f5-d404-70ae-7343-c688e654742c","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-bottom: 0px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 84.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 84.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 84.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 84.67%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 7px 9px -6px hsla(0, 0.00%, 0.00%, 0.06);","variants":{"main_focus":{"styleLess":"border-top-color: hsla(34, 100.00%, 56.44%, 1.00); border-right-color: hsla(34, 100.00%, 56.44%, 1.00); border-bottom-color: hsla(34, 100.00%, 56.44%, 1.00); border-left-color: hsla(34, 100.00%, 56.44%, 1.00);"}},"children":["7f71bddf-85ea-d2c2-6305-635468b67eb0"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"7f71bddf-85ea-d2c2-6305-635468b67eb0","fake":false,"type":"class","name":"number","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"da644393-b7a4-8814-50af-299dea63cf9f","fake":false,"type":"class","name":"embed","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Kopieer component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"0cd695cc-cfb8-c794-0cdf-a8568c2a6209","type":"Block","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb48","b912da50-06bc-9612-ff8e-7bfe0bb53cd5"],"data":{"tag":"div","text":false}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb48","type":"FormWrapper","tag":"div","classes":["9ecef84f-f51c-3dfd-0e84-6ce744ba48b2"],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb49","c0584ced-ce01-bf54-24fb-bed4e2adbb51","c0584ced-ce01-bf54-24fb-bed4e2adbb54"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb49","type":"FormForm","tag":"form","classes":["94dc0b12-6ed3-8157-e0d1-69232e6c5929"],"children":["33013577-6caa-2654-2af1-0eadf8c5ca28","c0584ced-ce01-bf54-24fb-bed4e2adbb4c"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"33013577-6caa-2654-2af1-0eadf8c5ca28","type":"Block","tag":"div","classes":["5d4d60da-f59c-1c4d-29b6-20e6c5d1c268"],"children":["1dcd52b4-2b13-1366-b224-496fb6b97eee","407756a2-0170-f6a7-5e33-32dc2de66780"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"1dcd52b4-2b13-1366-b224-496fb6b97eee","type":"FormTextInput","tag":"input","classes":["6050c3f5-d404-70ae-7343-c688e654742c","7f71bddf-85ea-d2c2-6305-635468b67eb0"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Number","data-name":"Number","placeholder":"","type":"number","id":"Number","disabled":false,"required":false},"xattr":[{"name":"ms-code-combine-inputs","value":"time-1"}],"form":{"name":"Number","type":"input","passwordPage":false}}},{"_id":"407756a2-0170-f6a7-5e33-32dc2de66780","type":"FormSelect","tag":"select","classes":["6050c3f5-d404-70ae-7343-c688e654742c"],"children":[],"data":{"attr":{"id":"field","name":"field","data-name":"Field","required":false,"multiple":false},"form":{"type":"select","opts":[{"t":"Days","v":"Days"},{"t":"Months","v":"Months"},{"t":"Years","v":"Years"}],"name":"Field"},"xattr":[{"name":"ms-code-combine-inputs","value":"time-2"}]}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb4c","type":"FormTextInput","tag":"input","classes":["6050c3f5-d404-70ae-7343-c688e654742c"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"name","data-name":"Name","placeholder":"You should hide this field","type":"text","id":"name","disabled":false,"required":false},"form":{"type":"input","name":"Name","passwordPage":false},"xattr":[{"name":"ms-code-combine-inputs","value":"time-target"}]}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb51","type":"FormSuccessMessage","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb52"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb52","type":"Block","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb53"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb53","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb54","type":"FormErrorMessage","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb55"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb55","type":"Block","tag":"div","classes":[],"children":["c0584ced-ce01-bf54-24fb-bed4e2adbb56"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c0584ced-ce01-bf54-24fb-bed4e2adbb56","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"b912da50-06bc-9612-ff8e-7bfe0bb53cd5","type":"HtmlEmbed","tag":"div","classes":["da644393-b7a4-8814-50af-299dea63cf9f"],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #56 v0.1 💙 INPUT OPTION PAIRS -->\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n<script>\n$(document).ready(function() {\n var groups = {};\n\n // Get all inputs with the attribute ms-code-combine-inputs\n var inputs = $('input[ms-code-combine-inputs], select[ms-code-combine-inputs]');\n\n // For each input\n inputs.each(function() {\n // Split the attribute value at the dash\n var parts = $(this).attr('ms-code-combine-inputs').split('-');\n\n // If the group doesn't exist yet, create it\n if (!groups[parts[0]]) {\n groups[parts[0]] = {\n targets: [],\n values: [],\n };\n }\n\n // If it's a target, add it to the targets\n if (parts[1] == 'target') {\n groups[parts[0]].targets.push($(this));\n } else {\n // It's an input, add it to the values and attach a listener\n groups[parts[0]].values.push($(this));\n\n $(this).on('input change', function() {\n // On input or change, combine all values with a space in between\n // and set the targets' value\n var combinedValue = '';\n $.each(groups[parts[0]].values, function(index, value) {\n combinedValue += $(this).val();\n if (index < groups[parts[0]].values.length - 1) {\n combinedValue += ' '; // Add a space between values\n }\n });\n\n $.each(groups[parts[0]].targets, function() {\n $(this).val(combinedValue);\n });\n });\n }\n });\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #56 v0.1 💙 INPUT OPTION PAIRS -->\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n<script>\n$(document).ready(function() {\n var groups = {};\n\n // Get all inputs with the attribute ms-code-combine-inputs\n var inputs = $('input[ms-code-combine-inputs], select[ms-code-combine-inputs]');\n\n // For each input\n inputs.each(function() {\n // Split the attribute value at the dash\n var parts = $(this).attr('ms-code-combine-inputs').split('-');\n\n // If the group doesn't exist yet, create it\n if (!groups[parts[0]]) {\n groups[parts[0]] = {\n targets: [],\n values: [],\n };\n }\n\n // If it's a target, add it to the targets\n if (parts[1] == 'target') {\n groups[parts[0]].targets.push($(this));\n } else {\n // It's an input, add it to the values and attach a listener\n groups[parts[0]].values.push($(this));\n\n $(this).on('input change', function() {\n // On input or change, combine all values with a space in between\n // and set the targets' value\n var combinedValue = '';\n $.each(groups[parts[0]].values, function(index, value) {\n combinedValue += $(this).val();\n if (index < groups[parts[0]].values.length - 1) {\n combinedValue += ' '; // Add a space between values\n }\n });\n\n $.each(groups[parts[0]].targets, function() {\n $(this).val(combinedValue);\n });\n });\n }\n });\n});\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"insideRTE":false}}],"styles":[{"_id":"9ecef84f-f51c-3dfd-0e84-6ce744ba48b2","fake":false,"type":"class","name":"block","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"94dc0b12-6ed3-8157-e0d1-69232e6c5929","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"width: 300px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; flex-direction: column; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 92.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 92.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 92.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 92.00%, 1.00); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 8px 13px 0 hsla(0, 0.00%, 0.00%, 0.06);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"5d4d60da-f59c-1c4d-29b6-20e6c5d1c268","fake":false,"type":"class","name":"2-field","namespace":"","comb":"","styleLess":"display: grid; margin-bottom: 10px; justify-content: space-between; align-items: center; grid-auto-columns: 1fr; grid-column-gap: 10px; grid-row-gap: 16px; grid-template-columns: 0.5fr 1fr; grid-template-rows: auto;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"6050c3f5-d404-70ae-7343-c688e654742c","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-bottom: 0px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 84.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 84.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 84.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 84.67%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(0, 0.00%, 100.00%, 1.00); box-shadow: 0 7px 9px -6px hsla(0, 0.00%, 0.00%, 0.06);","variants":{"main_focus":{"styleLess":"border-top-color: hsla(34, 100.00%, 56.44%, 1.00); border-right-color: hsla(34, 100.00%, 56.44%, 1.00); border-bottom-color: hsla(34, 100.00%, 56.44%, 1.00); border-left-color: hsla(34, 100.00%, 56.44%, 1.00);"}},"children":["7f71bddf-85ea-d2c2-6305-635468b67eb0"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"7f71bddf-85ea-d2c2-6305-635468b67eb0","fake":false,"type":"class","name":"number","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"da644393-b7a4-8814-50af-299dea63cf9f","fake":false,"type":"class","name":"embed","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser niet ondersteund. Gebruik
CC Chrome of SS Safari.

Over dit onderdeel

AI-gegenereerd

Beschrijving van onderdeel (gegenereerd door AI)

Input Option Pairs is a Webflow component designed to facilitate user input through a combination of text fields and selection options, allowing for dynamic data collection.

Belangrijkste kenmerken:

  • Includes multiple input fields for user data entry (e.g., number and text inputs).
  • Features a select dropdown for choosing time units (Days, Months, Years).
  • Provides success and error messages upon form submission.
  • Utilizes jQuery for dynamic input handling and combining values.
  • Responsive design suitable for various screen sizes.

Ontwerpelementen:

  • Clean and modern layout with a white background.
  • Soft rounded corners and subtle shadows for input fields.
  • Grid layout for aligning input fields and labels.

Potentiële gebruikssituaties:

  • Event registration forms requiring date and time inputs.
  • Surveys or feedback forms that need structured data collection.
  • E-commerce sites for collecting user preferences.
  • Educational platforms for course registration.
  • Healthcare applications for appointment scheduling.

Conclusion: Input Option Pairs is a versatile and user-friendly component that enhances data collection processes, making it ideal for various applications across different industries.

Bouwen

Begin met het bouwen van je dromen

Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.