Component laden...
Laden
Bedankt! Ik zal
dit project zo snel mogelijk bijwerken.
dit project zo snel mogelijk bijwerken.
Oeps! Er ging iets mis bij het verzenden van het formulier.
Hoe Google-verificatie inschakelen
Facebook-verificatie inschakelen
Spotify verificatie inschakelen
Hoe Dribbble verificatie in te schakelen
Hoe de Github-authenticatie in te schakelen
Hoe LinkedIn verificatie inschakelen
Hoe wachtwoordloze aanmeldingen inschakelen
Hoe wachtwoordvalidatie configureren
Hoe wachtwoord tonen/verbergen
Werken met profielafbeeldingen
Hoe een wachtwoord vergeten-flow toevoegen
Werken met selectievakjes
Hoe prijstabellen configureren
Over het Stripe klantenportaal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd51","type":"FormWrapper","tag":"div","classes":["0fbcf45c-7677-f534-1aad-8c45fff39db0"],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd52","819433e6-a60c-2f2e-6f46-d5da7283cd5a","819433e6-a60c-2f2e-6f46-d5da7283cd5d"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd52","type":"FormForm","tag":"form","classes":[],"children":["80b3d91b-ee6e-96e8-a967-fe30e6a399b9","ff272aea-de04-2dc8-bd29-b87279bb8fb8","05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","66330653-0378-2d18-6835-41700498b432"],"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":"80b3d91b-ee6e-96e8-a967-fe30e6a399b9","type":"HtmlEmbed","tag":"div","classes":["e9353c16-21c6-b397-3378-38aaf19a79a5"],"children":[],"v":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ff272aea-de04-2dc8-bd29-b87279bb8fb8","type":"Block","tag":"div","classes":["cef3b020-df80-8531-757d-f2b5b778849f"],"children":[],"data":{"tag":"div","text":false,"xattr":[{"name":"ms-code-timepicker","value":"box"}],"displayName":"","attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","type":"FormTextInput","tag":"input","classes":["d629aa4a-9fb2-e20c-7e19-66fc84b2e381"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"field","data-name":"Field","placeholder":"Hide me!","type":"text","id":"field","disabled":false,"required":true},"form":{"type":"input","name":"Field","passwordPage":false},"xattr":[{"name":"ms-code-timepicker","value":"input"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","type":"FormButton","tag":"input","classes":["a742226d-4a34-dc33-5eb7-eac1d459c57c"],"children":[],"data":{"attr":{"type":"submit","value":"Log your time","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"66330653-0378-2d18-6835-41700498b432","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5a","type":"FormSuccessMessage","tag":"div","classes":["d6917f67-a231-c336-30a9-ea857ba2a3af"],"children":["8760f991-79d9-c056-288e-3da38799f578"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8760f991-79d9-c056-288e-3da38799f578","type":"Block","tag":"div","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304c"],"children":["8760f991-79d9-c056-288e-3da38799f579","8760f991-79d9-c056-288e-3da38799f57d","8760f991-79d9-c056-288e-3da38799f581"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8760f991-79d9-c056-288e-3da38799f579","type":"Heading","tag":"h1","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304d"],"children":["8760f991-79d9-c056-288e-3da38799f57c"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"8760f991-79d9-c056-288e-3da38799f57c","text":true,"v":"Building a web app?"},{"_id":"8760f991-79d9-c056-288e-3da38799f57d","type":"Paragraph","tag":"p","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304e"],"children":["8760f991-79d9-c056-288e-3da38799f57e","8760f991-79d9-c056-288e-3da38799f57f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f57e","text":true,"v":"Awesome! You can use this time as a custom Memberstack profile field."},{"_id":"8760f991-79d9-c056-288e-3da38799f57f","type":"Strong","tag":"strong","classes":[],"children":["8760f991-79d9-c056-288e-3da38799f580"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f580","text":true,"v":""},{"_id":"8760f991-79d9-c056-288e-3da38799f581","type":"Link","tag":"a","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304f"],"children":["8760f991-79d9-c056-288e-3da38799f582"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"memberstack.com","target":"_blank"}}},{"_id":"8760f991-79d9-c056-288e-3da38799f582","text":true,"v":"Go to memberstack.com"},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5d","type":"FormErrorMessage","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5e"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5e","type":"Block","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5f","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304e","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 0.90); font-size: 16px; line-height: 1.7; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d629aa4a-9fb2-e20c-7e19-66fc84b2e381","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-top: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 88.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 88.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 88.67%, 1.00); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"a742226d-4a34-dc33-5eb7-eac1d459c57c","fake":false,"type":"class","name":"form-submit","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 11px; padding-bottom: 12px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); font-weight: 700;","variants":{"small":{"styleLess":"width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(231, 82.57%, 57.25%, 1.00); text-align: center;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"cef3b020-df80-8531-757d-f2b5b778849f","fake":false,"type":"class","name":"timepicker","namespace":"","comb":"","styleLess":"","variants":{"small":{"styleLess":"margin-bottom: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304d","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 30px; font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304f","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 5.10%, 1.00); font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304c","fake":false,"type":"class","name":"disclaimer-inner","namespace":"","comb":"","styleLess":"display: flex; width: 100%; margin-right: auto; margin-left: auto; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); text-align: left;","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d6917f67-a231-c336-30a9-ea857ba2a3af","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: hsla(0, 0.00%, 86.67%, 0.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0fbcf45c-7677-f534-1aad-8c45fff39db0","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"max-width: 500px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9353c16-21c6-b397-3378-38aaf19a79a5","fake":false,"type":"class","name":"Custom CSS","namespace":"","comb":"","styleLess":"","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":"819433e6-a60c-2f2e-6f46-d5da7283cd51","type":"FormWrapper","tag":"div","classes":["0fbcf45c-7677-f534-1aad-8c45fff39db0"],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd52","819433e6-a60c-2f2e-6f46-d5da7283cd5a","819433e6-a60c-2f2e-6f46-d5da7283cd5d"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd52","type":"FormForm","tag":"form","classes":[],"children":["80b3d91b-ee6e-96e8-a967-fe30e6a399b9","ff272aea-de04-2dc8-bd29-b87279bb8fb8","05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","66330653-0378-2d18-6835-41700498b432"],"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":"80b3d91b-ee6e-96e8-a967-fe30e6a399b9","type":"HtmlEmbed","tag":"div","classes":["e9353c16-21c6-b397-3378-38aaf19a79a5"],"children":[],"v":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<style>\n.tui-timepicker {\n border: 1px solid #ddd !important;\n border-radius: 5px;\n color: black !important;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ff272aea-de04-2dc8-bd29-b87279bb8fb8","type":"Block","tag":"div","classes":["cef3b020-df80-8531-757d-f2b5b778849f"],"children":[],"data":{"tag":"div","text":false,"xattr":[{"name":"ms-code-timepicker","value":"box"}],"displayName":"","attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"05519529-a0c6-0dfd-ac6e-74ebe0ddaa71","type":"FormTextInput","tag":"input","classes":["d629aa4a-9fb2-e20c-7e19-66fc84b2e381"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"field","data-name":"Field","placeholder":"Hide me!","type":"text","id":"field","disabled":false,"required":true},"form":{"type":"input","name":"Field","passwordPage":false},"xattr":[{"name":"ms-code-timepicker","value":"input"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"bbc0ecdc-e834-d0ea-d5ab-a6037ed6fd3a","type":"FormButton","tag":"input","classes":["a742226d-4a34-dc33-5eb7-eac1d459c57c"],"children":[],"data":{"attr":{"type":"submit","value":"Log your time","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"66330653-0378-2d18-6835-41700498b432","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- 💙 MEMBERSCRIPT #57 v0.1 💙 TIME PICKER -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\"> </script>\n<link rel=\"stylesheet\" href=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css\">\n<script src=\"https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.js\"></script>\n<script>\n$(document).ready(function() {\n var tpSpinbox = new tui.TimePicker(document.querySelector('[ms-code-timepicker=\"box\"]'), {\n inputType: 'spinbox',\n showMeridiem: true // If you don't use AM/PM remove this line\n });\n\n // Setup an event handler for when the time is selected\n tpSpinbox.on('change', function() {\n // Get the selected time\n var hour = tpSpinbox.getHour();\n var minute = tpSpinbox.getMinute();\n\n var selectedTime = hour + ':' + (minute < 10 ? '0' : '') + minute;\n\n // Update the value of the input element\n document.querySelector('[ms-code-timepicker=\"input\"]').value = selectedTime;\n });\n});\n</script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5a","type":"FormSuccessMessage","tag":"div","classes":["d6917f67-a231-c336-30a9-ea857ba2a3af"],"children":["8760f991-79d9-c056-288e-3da38799f578"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"8760f991-79d9-c056-288e-3da38799f578","type":"Block","tag":"div","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304c"],"children":["8760f991-79d9-c056-288e-3da38799f579","8760f991-79d9-c056-288e-3da38799f57d","8760f991-79d9-c056-288e-3da38799f581"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8760f991-79d9-c056-288e-3da38799f579","type":"Heading","tag":"h1","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304d"],"children":["8760f991-79d9-c056-288e-3da38799f57c"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"8760f991-79d9-c056-288e-3da38799f57c","text":true,"v":"Building a web app?"},{"_id":"8760f991-79d9-c056-288e-3da38799f57d","type":"Paragraph","tag":"p","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304e"],"children":["8760f991-79d9-c056-288e-3da38799f57e","8760f991-79d9-c056-288e-3da38799f57f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f57e","text":true,"v":"Awesome! You can use this time as a custom Memberstack profile field."},{"_id":"8760f991-79d9-c056-288e-3da38799f57f","type":"Strong","tag":"strong","classes":[],"children":["8760f991-79d9-c056-288e-3da38799f580"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"8760f991-79d9-c056-288e-3da38799f580","text":true,"v":""},{"_id":"8760f991-79d9-c056-288e-3da38799f581","type":"Link","tag":"a","classes":["3b9a5d01-9310-75aa-b1cc-917e52f4304f"],"children":["8760f991-79d9-c056-288e-3da38799f582"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"memberstack.com","target":"_blank"}}},{"_id":"8760f991-79d9-c056-288e-3da38799f582","text":true,"v":"Go to memberstack.com"},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5d","type":"FormErrorMessage","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5e"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5e","type":"Block","tag":"div","classes":[],"children":["819433e6-a60c-2f2e-6f46-d5da7283cd5f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"819433e6-a60c-2f2e-6f46-d5da7283cd5f","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304e","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 0.90); font-size: 16px; line-height: 1.7; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d629aa4a-9fb2-e20c-7e19-66fc84b2e381","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"margin-top: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 88.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 88.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 88.67%, 1.00); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"a742226d-4a34-dc33-5eb7-eac1d459c57c","fake":false,"type":"class","name":"form-submit","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 11px; padding-bottom: 12px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); font-weight: 700;","variants":{"small":{"styleLess":"width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(231, 82.57%, 57.25%, 1.00); text-align: center;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"cef3b020-df80-8531-757d-f2b5b778849f","fake":false,"type":"class","name":"timepicker","namespace":"","comb":"","styleLess":"","variants":{"small":{"styleLess":"margin-bottom: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304d","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 30px; font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304f","fake":false,"type":"class","name":"button_white","namespace":"","comb":"","styleLess":"margin-top: 10px; padding-right: 20px; padding-left: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(0, 0.00%, 5.10%, 1.00); font-weight: 600;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"3b9a5d01-9310-75aa-b1cc-917e52f4304c","fake":false,"type":"class","name":"disclaimer-inner","namespace":"","comb":"","styleLess":"display: flex; width: 100%; margin-right: auto; margin-left: auto; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); text-align: left;","variants":{"small":{"styleLess":"padding-right: 20px; padding-left: 20px;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d6917f67-a231-c336-30a9-ea857ba2a3af","fake":false,"type":"class","name":"success","namespace":"","comb":"","styleLess":"padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-color: hsla(0, 0.00%, 86.67%, 0.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"0fbcf45c-7677-f534-1aad-8c45fff39db0","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"max-width: 500px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"e9353c16-21c6-b397-3378-38aaf19a79a5","fake":false,"type":"class","name":"Custom CSS","namespace":"","comb":"","styleLess":"","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
Chrome of Safari.
Chrome of Safari.
Over dit onderdeel
AI-gegenereerd
Beschrijving van onderdeel (gegenereerd door AI)
The Time Picker Input is a user-friendly component designed for web forms, allowing users to easily select and input time values. It integrates seamlessly with forms and enhances user experience with a visually appealing interface.
Belangrijkste kenmerken:
- Customizable time selection with spinbox input type
- Responsive design suitable for various devices
- Includes success and error messages for form submissions
- Easy integration with Memberstack for profile fields
- Includes external libraries for enhanced functionality
Ontwerpelementen:
- Clean and modern design with rounded corners
- Color scheme featuring shades of blue and white
- CSS styles for input fields and buttons to ensure consistency
- Responsive layout that adapts to different screen sizes
Potentiële gebruikssituaties:
- Web applications requiring time tracking features
- Event scheduling platforms
- Online booking systems
- Custom forms for user profiles in membership sites
- Time management tools for businesses
Conclusion: The Time Picker Input is a versatile and visually appealing component that can significantly enhance user interaction in web forms, making it an excellent choice for developers looking to implement time selection features.
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.