Wettbewerb: Erstellen Sie zwischen dem 29. Mai und dem 14. Juni eine SaaS-Anwendung und gewinnen Sie Geldpreise, kostenlose Pläne und mehr!
Komponente laden...
Laden
Ich danke Ihnen! Ich werde
dieses Projekt so schnell wie möglich aktualisieren.
dieses Projekt so schnell wie möglich aktualisieren.
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
So aktivieren Sie die Google-Authentifizierung
So aktivieren Sie die Facebook-Authentifizierung
So aktivieren Sie die Spotify-Authentifizierung
Wie man die Dribbble-Authentifizierung aktiviert
Wie man die Github-Authentifizierung aktiviert
So aktivieren Sie die LinkedIn-Authentifizierung
So aktivieren Sie passwortlose Anmeldungen
So konfigurieren Sie die Kennwortüberprüfung
Passwort ein-/ausblenden
Wie man mit Profilbildern arbeitet
So fügen Sie einen Fluss für vergessene Passwörter hinzu
Wie man mit Kontrollkästchen arbeitet
Wie man Preistabellen konfiguriert
Über das Stripe-Kundenportal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3b9f","type":"Block","tag":"div","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba0","9645aec2-1b02-bd81-66b4-2dfb5aef3ba2","9645aec2-1b02-bd81-66b4-2dfb5aef3ba6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba0","type":"FormBlockLabel","tag":"label","classes":["2657aadb-6326-6737-fabb-4243fa3dff9f"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba1"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"clearfix":true,"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"email-7","id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba1","text":true,"v":"Inputs with shared borders"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba2","type":"Block","tag":"div","classes":["d74185ee-0cd6-d111-f3f7-4a2341010502"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba3","type":"Block","tag":"div","classes":["3c2915eb-1d64-fa79-64d5-7dc745d479d2"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba4","9645aec2-1b02-bd81-66b4-2dfb5aef3ba5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba4","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","6d750efc-e453-47ae-4543-2022cf6e8eba"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input6","data-name":"input6","placeholder":"e.g. Howard","type":"text","id":"input6","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input6","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba5","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input7","data-name":"input7","placeholder":"e.g. Thurman","type":"text","id":"input7","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input7","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba6","type":"Block","tag":"div","classes":["d74185ee-0cd6-d111-f3f7-4a2341010502"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba7"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba7","type":"Block","tag":"div","classes":["3c2915eb-1d64-fa79-64d5-7dc745d479d2"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba8","9645aec2-1b02-bd81-66b4-2dfb5aef3ba9","9645aec2-1b02-bd81-66b4-2dfb5aef3bac"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba8","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input8","data-name":"input8","placeholder":"e.g. 1001 Duke Street","type":"text","id":"input-9","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input8","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba9","type":"Block","tag":"div","classes":["ae0ba5c4-f430-30c6-3b5f-8e5edfcdc024"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3baa","9645aec2-1b02-bd81-66b4-2dfb5aef3bab"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3baa","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","9e7f3093-1ca9-90da-16e7-e96b1b90424f","d16c8076-2776-cbdc-485c-917b8eaf862c"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input9","data-name":"input9","placeholder":"e.g. Williamsburg","type":"text","id":"input9","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input9","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3bab","type":"FormSelect","tag":"select","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","9e7f3093-1ca9-90da-16e7-e96b1b90424f","b3ca3271-4e6f-a4a7-14ab-60f247782beb"],"children":[],"data":{"attr":{"id":"input-11","name":"input10","data-name":"input10","required":false,"multiple":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input10","opts":[{"t":"Select one...","v":""},{"t":"First choice","v":"First"},{"t":"Second choice","v":"Second"},{"t":"Third choice","v":"Third"}],"type":"select"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3bac","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","c8d9cff0-a95a-ba86-4147-2df6c1c39698"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input11","data-name":"input11","placeholder":"e.g. Apt E","type":"text","id":"input11","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input11","type":"input","passwordPage":false}}}],"styles":[{"_id":"d16c8076-2776-cbdc-485c-917b8eaf862c","fake":false,"type":"class","name":"is-left","namespace":"","comb":"&","styleLess":"width: 100%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3c2915eb-1d64-fa79-64d5-7dc745d479d2","fake":false,"type":"class","name":"ms-input-outer","namespace":"","comb":"","styleLess":"display: flex; width: 100%; flex-wrap: wrap;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70","fake":false,"type":"class","name":"is-top","namespace":"","comb":"&","styleLess":"margin-bottom: -1px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d74185ee-0cd6-d111-f3f7-4a2341010502","fake":false,"type":"class","name":"ms-input-wrap","namespace":"","comb":"","styleLess":"position: relative; display: flex; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;","variants":{},"children":["b34ef84b-a414-f7ff-324f-07550a92bd43","a746db32-eb99-d7e8-7dcf-6de94ab1c8a5"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2657aadb-6326-6737-fabb-4243fa3dff9f","fake":false,"type":"class","name":"ms-input-label","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":["d7ffcb3f-9002-7376-c22d-56704364b904","ce4843a6-c93b-e110-6f64-9819d94aadc2","4d1aaa9e-21c5-a440-a9be-0811c5edf335","11b8e98c-5ab6-f77d-7db1-da0f96642410","80ffcf25-c38b-1ca7-865a-74cc7ed8ce63"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"c8d9cff0-a95a-ba86-4147-2df6c1c39698","fake":false,"type":"class","name":"is-bottom","namespace":"","comb":"&","styleLess":"border-top-left-radius: 0px; border-top-right-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"6d750efc-e453-47ae-4543-2022cf6e8eba","fake":false,"type":"class","name":"is-left","namespace":"","comb":"&","styleLess":"width: 50%; margin-right: -1px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"ae0ba5c4-f430-30c6-3b5f-8e5edfcdc024","fake":false,"type":"class","name":"ms-input-middle-row","namespace":"","comb":"","styleLess":"display: flex; width: 100%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9e7f3093-1ca9-90da-16e7-e96b1b90424f","fake":false,"type":"class","name":"is-middle","namespace":"","comb":"&","styleLess":"margin-bottom: -1px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":["d16c8076-2776-cbdc-485c-917b8eaf862c","b3ca3271-4e6f-a4a7-14ab-60f247782beb"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b3ca3271-4e6f-a4a7-14ab-60f247782beb","fake":false,"type":"class","name":"is-right","namespace":"","comb":"&","styleLess":"width: 100%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b2167bfb-f6c9-1425-098c-a58042615f45","fake":false,"type":"class","name":"ms-input","namespace":"","comb":"","styleLess":"position: relative; min-height: 40px; margin-bottom: 20px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: white; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); transition-property: box-shadow, border-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(237, 47.06%, 13.06%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 56.47%, 1.00);"},"main_hover":{"styleLess":"z-index: 2; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); box-shadow: none /* 0 5px 10px -5px rgba(0, 0, 0, 0.1) */;"}},"children":["9e5eb4fb-44a4-c91d-8ddd-07861650e0c8","6c25fb96-05cb-b138-7fbf-0e3ab0b0d56d","80735255-ff59-d93c-1aea-88ecac4dadce","954d57db-0fed-9cf1-72ab-fb1516c42430","6863c917-e902-2508-aec1-574c75b572e9","02eb6465-b4fb-4f51-1bf4-fdd3bc4db90d","aded1135-ba0a-79a0-7a7e-fca48f8df326","9a885656-db7b-46f3-c8a9-17ace4577e2c","5b4775aa-9d13-3e2b-3f3d-9f508f024017","6d750efc-e453-47ae-4543-2022cf6e8eba","4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6","d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70","9e7f3093-1ca9-90da-16e7-e96b1b90424f","c8d9cff0-a95a-ba86-4147-2df6c1c39698","4a592ac0-fc05-3bb2-d18c-1d647acb46cd","7b282392-e06f-eb2a-852d-885bc614c721","1b7159b8-6cf4-7fc8-156a-9485d33b2130","2549b099-b8ab-f916-0668-1e95ecd99f87"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6","fake":false,"type":"class","name":"is-right","namespace":"","comb":"&","styleLess":"width: 50%; border-top-left-radius: 0px; border-bottom-left-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Komponente kopieren
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3b9f","type":"Block","tag":"div","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba0","9645aec2-1b02-bd81-66b4-2dfb5aef3ba2","9645aec2-1b02-bd81-66b4-2dfb5aef3ba6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba0","type":"FormBlockLabel","tag":"label","classes":["2657aadb-6326-6737-fabb-4243fa3dff9f"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba1"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"clearfix":true,"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"email-7","id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba1","text":true,"v":"Inputs with shared borders"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba2","type":"Block","tag":"div","classes":["d74185ee-0cd6-d111-f3f7-4a2341010502"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba3","type":"Block","tag":"div","classes":["3c2915eb-1d64-fa79-64d5-7dc745d479d2"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba4","9645aec2-1b02-bd81-66b4-2dfb5aef3ba5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba4","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","6d750efc-e453-47ae-4543-2022cf6e8eba"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input6","data-name":"input6","placeholder":"e.g. Howard","type":"text","id":"input6","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input6","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba5","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input7","data-name":"input7","placeholder":"e.g. Thurman","type":"text","id":"input7","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input7","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba6","type":"Block","tag":"div","classes":["d74185ee-0cd6-d111-f3f7-4a2341010502"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba7"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba7","type":"Block","tag":"div","classes":["3c2915eb-1d64-fa79-64d5-7dc745d479d2"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3ba8","9645aec2-1b02-bd81-66b4-2dfb5aef3ba9","9645aec2-1b02-bd81-66b4-2dfb5aef3bac"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba8","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input8","data-name":"input8","placeholder":"e.g. 1001 Duke Street","type":"text","id":"input-9","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input8","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3ba9","type":"Block","tag":"div","classes":["ae0ba5c4-f430-30c6-3b5f-8e5edfcdc024"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3baa","9645aec2-1b02-bd81-66b4-2dfb5aef3bab"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3baa","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","9e7f3093-1ca9-90da-16e7-e96b1b90424f","d16c8076-2776-cbdc-485c-917b8eaf862c"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input9","data-name":"input9","placeholder":"e.g. Williamsburg","type":"text","id":"input9","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input9","type":"input","passwordPage":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3bab","type":"FormSelect","tag":"select","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","9e7f3093-1ca9-90da-16e7-e96b1b90424f","b3ca3271-4e6f-a4a7-14ab-60f247782beb"],"children":[],"data":{"attr":{"id":"input-11","name":"input10","data-name":"input10","required":false,"multiple":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input10","opts":[{"t":"Select one...","v":""},{"t":"First choice","v":"First"},{"t":"Second choice","v":"Second"},{"t":"Third choice","v":"Third"}],"type":"select"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3bac","type":"FormTextInput","tag":"input","classes":["b2167bfb-f6c9-1425-098c-a58042615f45","c8d9cff0-a95a-ba86-4147-2df6c1c39698"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"input11","data-name":"input11","placeholder":"e.g. Apt E","type":"text","id":"input11","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"form":{"name":"input11","type":"input","passwordPage":false}}}],"styles":[{"_id":"d16c8076-2776-cbdc-485c-917b8eaf862c","fake":false,"type":"class","name":"is-left","namespace":"","comb":"&","styleLess":"width: 100%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3c2915eb-1d64-fa79-64d5-7dc745d479d2","fake":false,"type":"class","name":"ms-input-outer","namespace":"","comb":"","styleLess":"display: flex; width: 100%; flex-wrap: wrap;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70","fake":false,"type":"class","name":"is-top","namespace":"","comb":"&","styleLess":"margin-bottom: -1px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d74185ee-0cd6-d111-f3f7-4a2341010502","fake":false,"type":"class","name":"ms-input-wrap","namespace":"","comb":"","styleLess":"position: relative; display: flex; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;","variants":{},"children":["b34ef84b-a414-f7ff-324f-07550a92bd43","a746db32-eb99-d7e8-7dcf-6de94ab1c8a5"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2657aadb-6326-6737-fabb-4243fa3dff9f","fake":false,"type":"class","name":"ms-input-label","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":["d7ffcb3f-9002-7376-c22d-56704364b904","ce4843a6-c93b-e110-6f64-9819d94aadc2","4d1aaa9e-21c5-a440-a9be-0811c5edf335","11b8e98c-5ab6-f77d-7db1-da0f96642410","80ffcf25-c38b-1ca7-865a-74cc7ed8ce63"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"c8d9cff0-a95a-ba86-4147-2df6c1c39698","fake":false,"type":"class","name":"is-bottom","namespace":"","comb":"&","styleLess":"border-top-left-radius: 0px; border-top-right-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"6d750efc-e453-47ae-4543-2022cf6e8eba","fake":false,"type":"class","name":"is-left","namespace":"","comb":"&","styleLess":"width: 50%; margin-right: -1px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"ae0ba5c4-f430-30c6-3b5f-8e5edfcdc024","fake":false,"type":"class","name":"ms-input-middle-row","namespace":"","comb":"","styleLess":"display: flex; width: 100%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9e7f3093-1ca9-90da-16e7-e96b1b90424f","fake":false,"type":"class","name":"is-middle","namespace":"","comb":"&","styleLess":"margin-bottom: -1px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;","variants":{},"children":["d16c8076-2776-cbdc-485c-917b8eaf862c","b3ca3271-4e6f-a4a7-14ab-60f247782beb"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b3ca3271-4e6f-a4a7-14ab-60f247782beb","fake":false,"type":"class","name":"is-right","namespace":"","comb":"&","styleLess":"width: 100%;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b2167bfb-f6c9-1425-098c-a58042615f45","fake":false,"type":"class","name":"ms-input","namespace":"","comb":"","styleLess":"position: relative; min-height: 40px; margin-bottom: 20px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: white; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); transition-property: box-shadow, border-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(237, 47.06%, 13.06%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 56.47%, 1.00);"},"main_hover":{"styleLess":"z-index: 2; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); box-shadow: none /* 0 5px 10px -5px rgba(0, 0, 0, 0.1) */;"}},"children":["9e5eb4fb-44a4-c91d-8ddd-07861650e0c8","6c25fb96-05cb-b138-7fbf-0e3ab0b0d56d","80735255-ff59-d93c-1aea-88ecac4dadce","954d57db-0fed-9cf1-72ab-fb1516c42430","6863c917-e902-2508-aec1-574c75b572e9","02eb6465-b4fb-4f51-1bf4-fdd3bc4db90d","aded1135-ba0a-79a0-7a7e-fca48f8df326","9a885656-db7b-46f3-c8a9-17ace4577e2c","5b4775aa-9d13-3e2b-3f3d-9f508f024017","6d750efc-e453-47ae-4543-2022cf6e8eba","4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6","d8c4f6d9-8cdd-df3a-fcb4-0ea959282e70","9e7f3093-1ca9-90da-16e7-e96b1b90424f","c8d9cff0-a95a-ba86-4147-2df6c1c39698","4a592ac0-fc05-3bb2-d18c-1d647acb46cd","7b282392-e06f-eb2a-852d-885bc614c721","1b7159b8-6cf4-7fc8-156a-9485d33b2130","2549b099-b8ab-f916-0668-1e95ecd99f87"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4f086341-cd6c-c22b-c7bb-f9ad9b78bcb6","fake":false,"type":"class","name":"is-right","namespace":"","comb":"&","styleLess":"width: 50%; border-top-left-radius: 0px; border-bottom-left-radius: 0px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser nicht unterstützt. Verwenden Sie
Chrome oder Safari.
Chrome oder Safari.
Über diese Komponente
AI-generiert
This component consists of six input fields that are visually grouped together.
The top two inputs have rounded edges and share a middle border.
The next four inputs form their own group. The top input shares a border with the middle two inputs, while the middle two inputs share a middle border. The bottom input shares a border with the middle two inputs. .
This layout is ideal for collecting grouped information. Please note that collecting credit card information directly in Webflow is not possible, but this grouping style is commonly associated with credit card inputs.
In this example, the top two inputs are used for collecting the first and last name, while the bottom four inputs are for collecting an address, including the street, city, state, and address line 2. It would be straightforward to add an additional input for ZIP Code, address line 3, or any other required fields.
Even though the inputs share borders, each input has its own hover state. To ensure visual consistency, I've utilized Z indexes and border color transitions to maintain a seamless appearance, even when inputs share at least one border. This styling approach also applies to select fields and text areas.
It's important to note that each input includes a data-ms-member attribute. You'll need to replace the field ID with your specific field ID in Memberstack, ensuring the component functions correctly with your Memberstack integration.
Komponentenbeschreibung (von AI generiert)
This component features a set of input fields designed with shared borders, providing a cohesive and modern look for forms. It is ideal for enhancing user experience in data entry scenarios.
Wesentliche Merkmale:
- Includes multiple input fields with shared borders for a unified appearance.
- Responsive design that adapts to various screen sizes.
- Customizable placeholders and labels for each input.
- Supports various input types including text and select dropdowns.
- Easy integration into existing Webflow projects.
Gestaltungselemente:
- Minimalist style with a clean white background.
- Soft rounded corners for a modern aesthetic.
- Subtle box shadow for depth and emphasis.
- Color scheme primarily using shades of blue and gray.
Potenzielle Anwendungsfälle:
- Contact forms for businesses and service providers.
- Registration forms for events or memberships.
- Surveys and feedback forms for customer insights.
- E-commerce checkout forms to streamline user input.
- Lead generation forms for marketing campaigns.
Conclusion: The Input with Shared Borders component is a versatile and visually appealing solution for any form-related needs, making it a valuable addition to any Webflow project.
Mit dem Bau beginnen
Bauen Sie Ihre Träume
Memberstack ist 100% kostenlos, bis Sie bereit sind, zu starten - worauf warten Sie also noch? Erstellen Sie Ihre erste App und beginnen Sie noch heute mit der Entwicklung.
.avif)
.png)
