Loading Component...

Loading

More Components

View All
Part of

Comment Notification Selector

Oops! Something went wrong while submitting the form.
Comment Notification Selector
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"013841d4-ac37-3b17-3250-b6afd1b7855d","type":"FormWrapper","tag":"div","classes":["2731da6f-6804-1731-9645-419c9afe7756"],"children":["013841d4-ac37-3b17-3250-b6afd1b7855e","013841d4-ac37-3b17-3250-b6afd1b78560","013841d4-ac37-3b17-3250-b6afd1b78563"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b7855e","type":"FormForm","tag":"form","classes":[],"children":["013841d4-ac37-3b17-3250-b6afd1b7855f"],"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":"013841d4-ac37-3b17-3250-b6afd1b7855f","type":"FormSelect","tag":"select","classes":["f4f4c4e8-7af9-7ea2-1795-ec8b63cbfe36"],"children":[],"data":{"attr":{"id":"field-3","name":"field-3","data-name":"Field 3","required":false,"multiple":false},"form":{"type":"select","opts":[{"t":"✖️ Unsubscribed","v":"NONE"},{"t":"🔔 Notifications On","v":"THREADS_ONLY"}],"name":"Field 3"},"xattr":[{"name":"data-ms-channel-notifications","value":""}],"devlink":{"runtimeProps":{},"slot":""},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78560","type":"FormSuccessMessage","tag":"div","classes":["1973b4f7-c1d1-3bdb-4eda-4686353dd483"],"children":["013841d4-ac37-3b17-3250-b6afd1b78561"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78561","type":"Block","tag":"div","classes":[],"children":["013841d4-ac37-3b17-3250-b6afd1b78562"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78562","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78563","type":"FormErrorMessage","tag":"div","classes":["1973b4f7-c1d1-3bdb-4eda-4686353dd483"],"children":["013841d4-ac37-3b17-3250-b6afd1b78564"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78564","type":"Block","tag":"div","classes":[],"children":["013841d4-ac37-3b17-3250-b6afd1b78565"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78565","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"2731da6f-6804-1731-9645-419c9afe7756","fake":false,"type":"class","name":"comment-no-margin","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","origin":null,"selector":null},{"_id":"f4f4c4e8-7af9-7ea2-1795-ec8b63cbfe36","fake":false,"type":"class","name":"comment-subscribe","namespace":"","comb":"","styleLess":"height: 37px; margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(240, 15.31%, 88.19%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(240, 15.31%, 88.19%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(240, 15.31%, 88.19%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(240, 15.31%, 88.19%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: white; box-shadow: 0 1px 2px 0 hsla(240, 15.31%, 88.19%, 0.50); transition-property: border-color, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 15px; font-weight: 300;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: black; border-right-style: solid; border-right-width: 1px; border-right-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-left-style: solid; border-left-width: 1px; border-left-color: black;"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 43.33%, 1.00);"},"main_hover":{"styleLess":"border-top-color: #374252; border-right-color: #374252; border-bottom-color: #374252; border-left-color: #374252; box-shadow: 0 1px 4px 0 rgba(220, 220, 229, 0.9);"}},"children":["501362e1-7f72-de67-c7b5-ed9c24bd79ec","44c08e1a-0dd9-cc23-f7e8-5fa38abb8592","f593b152-db7f-cf39-c374-b83816f4a5d3","e19a45c8-020a-243f-bd96-6ff1ec4d7021","df2068c8-a038-d771-5a39-4f7236c62aa2","310f3820-383f-f82b-d15e-fadf6c46181a"],"createdBy":"572e16b6f586648f39f82496","origin":null,"selector":null},{"_id":"1973b4f7-c1d1-3bdb-4eda-4686353dd483","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"013841d4-ac37-3b17-3250-b6afd1b7855d","type":"FormWrapper","tag":"div","classes":["2731da6f-6804-1731-9645-419c9afe7756"],"children":["013841d4-ac37-3b17-3250-b6afd1b7855e","013841d4-ac37-3b17-3250-b6afd1b78560","013841d4-ac37-3b17-3250-b6afd1b78563"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b7855e","type":"FormForm","tag":"form","classes":[],"children":["013841d4-ac37-3b17-3250-b6afd1b7855f"],"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":"013841d4-ac37-3b17-3250-b6afd1b7855f","type":"FormSelect","tag":"select","classes":["f4f4c4e8-7af9-7ea2-1795-ec8b63cbfe36"],"children":[],"data":{"attr":{"id":"field-3","name":"field-3","data-name":"Field 3","required":false,"multiple":false},"form":{"type":"select","opts":[{"t":"✖️ Unsubscribed","v":"NONE"},{"t":"🔔 Notifications On","v":"THREADS_ONLY"}],"name":"Field 3"},"xattr":[{"name":"data-ms-channel-notifications","value":""}],"devlink":{"runtimeProps":{},"slot":""},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78560","type":"FormSuccessMessage","tag":"div","classes":["1973b4f7-c1d1-3bdb-4eda-4686353dd483"],"children":["013841d4-ac37-3b17-3250-b6afd1b78561"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78561","type":"Block","tag":"div","classes":[],"children":["013841d4-ac37-3b17-3250-b6afd1b78562"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78562","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78563","type":"FormErrorMessage","tag":"div","classes":["1973b4f7-c1d1-3bdb-4eda-4686353dd483"],"children":["013841d4-ac37-3b17-3250-b6afd1b78564"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78564","type":"Block","tag":"div","classes":[],"children":["013841d4-ac37-3b17-3250-b6afd1b78565"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"013841d4-ac37-3b17-3250-b6afd1b78565","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"2731da6f-6804-1731-9645-419c9afe7756","fake":false,"type":"class","name":"comment-no-margin","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","origin":null,"selector":null},{"_id":"f4f4c4e8-7af9-7ea2-1795-ec8b63cbfe36","fake":false,"type":"class","name":"comment-subscribe","namespace":"","comb":"","styleLess":"height: 37px; margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(240, 15.31%, 88.19%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(240, 15.31%, 88.19%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(240, 15.31%, 88.19%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(240, 15.31%, 88.19%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: white; box-shadow: 0 1px 2px 0 hsla(240, 15.31%, 88.19%, 0.50); transition-property: border-color, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 15px; font-weight: 300;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: black; border-right-style: solid; border-right-width: 1px; border-right-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-left-style: solid; border-left-width: 1px; border-left-color: black;"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 43.33%, 1.00);"},"main_hover":{"styleLess":"border-top-color: #374252; border-right-color: #374252; border-bottom-color: #374252; border-left-color: #374252; box-shadow: 0 1px 4px 0 rgba(220, 220, 229, 0.9);"}},"children":["501362e1-7f72-de67-c7b5-ed9c24bd79ec","44c08e1a-0dd9-cc23-f7e8-5fa38abb8592","f593b152-db7f-cf39-c374-b83816f4a5d3","e19a45c8-020a-243f-bd96-6ff1ec4d7021","df2068c8-a038-d771-5a39-4f7236c62aa2","310f3820-383f-f82b-d15e-fadf6c46181a"],"createdBy":"572e16b6f586648f39f82496","origin":null,"selector":null},{"_id":"1973b4f7-c1d1-3bdb-4eda-4686353dd483","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

The Comment Notification Selector is a user-friendly form component designed to allow users to manage their notification preferences for comments. It features options for subscribing or unsubscribing from notifications.

Key Features:

  • Dropdown selection for notification preferences: Unsubscribed or Notifications On
  • Success and error messages for form submission feedback
  • Customizable form attributes for integration with various backends
  • Responsive design suitable for various devices

Design Elements:

  • Clean and modern aesthetic with a white background
  • Rounded corners and subtle box shadows for a polished look
  • Consistent use of color for borders and text to enhance readability
  • Minimalistic design that avoids clutter

Potential Use Cases:

  • Blogs and content websites looking to engage users with comment notifications
  • E-commerce platforms wanting to keep customers informed about product reviews
  • Community forums that require user interaction and feedback management
  • Educational websites where students can subscribe to updates on discussions

Conclusion: The Comment Notification Selector is a versatile and visually appealing component that enhances user engagement by allowing customizable notification preferences, making it an excellent addition for various web applications.