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":"7f0764c5-d635-cb36-6da4-ea37c3841a52","type":"Block","tag":"div","classes":["123d42c6-e765-fff2-6b34-9ca3aecf81e3"],"children":["a3cef513-8c28-0026-9c81-c6a7fa93dd0a","a3cef513-8c28-0026-9c81-c6a7fa93dd0c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a3cef513-8c28-0026-9c81-c6a7fa93dd0a","type":"FormBlockLabel","tag":"label","classes":["123d42c6-e765-fff2-6b34-9ca3aecf81e1"],"children":["a3cef513-8c28-0026-9c81-c6a7fa93dd0b"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone","id":""},"visibility":{"conditions":[]}}},{"_id":"a3cef513-8c28-0026-9c81-c6a7fa93dd0b","text":true,"v":"Phone Number"},{"_id":"a3cef513-8c28-0026-9c81-c6a7fa93dd0c","type":"FormTextInput","tag":"input","classes":["123d42c6-e765-fff2-6b34-9ca3aecf81e0"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone","data-name":"Phone","placeholder":"","type":"text","id":"Phone","disabled":false,"required":true},"xattr":[{"name":"ms-code-phone-number","value":"ca,gb,us"}],"form":{"name":"Phone","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}}],"styles":[{"_id":"123d42c6-e765-fff2-6b34-9ca3aecf81e3","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 20px; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 0%;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"123d42c6-e765-fff2-6b34-9ca3aecf81e1","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"123d42c6-e765-fff2-6b34-9ca3aecf81e0","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%, 85.33%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 85.33%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 85.33%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 85.33%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 2px 2px 0 hsla(0, 0.00%, 0.00%, 0.10);","variants":{"main_focus-visible":{"styleLess":"border-top-color: hsla(229, 100.00%, 64.00%, 1.00); border-right-color: hsla(229, 100.00%, 64.00%, 1.00); border-bottom-color: hsla(229, 100.00%, 64.00%, 1.00); border-left-color: hsla(229, 100.00%, 64.00%, 1.00);"}},"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
Komponente kopieren
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"7f0764c5-d635-cb36-6da4-ea37c3841a52","type":"Block","tag":"div","classes":["123d42c6-e765-fff2-6b34-9ca3aecf81e3"],"children":["a3cef513-8c28-0026-9c81-c6a7fa93dd0a","a3cef513-8c28-0026-9c81-c6a7fa93dd0c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a3cef513-8c28-0026-9c81-c6a7fa93dd0a","type":"FormBlockLabel","tag":"label","classes":["123d42c6-e765-fff2-6b34-9ca3aecf81e1"],"children":["a3cef513-8c28-0026-9c81-c6a7fa93dd0b"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone","id":""},"visibility":{"conditions":[]}}},{"_id":"a3cef513-8c28-0026-9c81-c6a7fa93dd0b","text":true,"v":"Phone Number"},{"_id":"a3cef513-8c28-0026-9c81-c6a7fa93dd0c","type":"FormTextInput","tag":"input","classes":["123d42c6-e765-fff2-6b34-9ca3aecf81e0"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone","data-name":"Phone","placeholder":"","type":"text","id":"Phone","disabled":false,"required":true},"xattr":[{"name":"ms-code-phone-number","value":"ca,gb,us"}],"form":{"name":"Phone","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}}],"styles":[{"_id":"123d42c6-e765-fff2-6b34-9ca3aecf81e3","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 20px; flex-direction: column; flex-grow: 1; flex-shrink: 1; flex-basis: 0%;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"123d42c6-e765-fff2-6b34-9ca3aecf81e1","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"123d42c6-e765-fff2-6b34-9ca3aecf81e0","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%, 85.33%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 85.33%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 85.33%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 85.33%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 2px 2px 0 hsla(0, 0.00%, 0.00%, 0.10);","variants":{"main_focus-visible":{"styleLess":"border-top-color: hsla(229, 100.00%, 64.00%, 1.00); border-right-color: hsla(229, 100.00%, 64.00%, 1.00); border-bottom-color: hsla(229, 100.00%, 64.00%, 1.00); border-left-color: hsla(229, 100.00%, 64.00%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","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
Komponentenbeschreibung (von AI generiert)
The International Phone Number Input component is designed to facilitate the entry of phone numbers with international dialing codes, ensuring a user-friendly experience for global users.
Wesentliche Merkmale:
- Supports multiple international dialing codes (e.g., CA, GB, US)
- Required input field for phone numbers
- Customizable styles for better integration into various designs
- Responsive design suitable for mobile and desktop
Gestaltungselemente:
- Flexbox layout for easy alignment
- Rounded borders with a subtle shadow for a modern look
- Font-weight styling for labels to enhance readability
Potenzielle Anwendungsfälle:
- E-commerce websites requiring customer contact information
- Travel and tourism platforms for booking and inquiries
- Global service providers needing to collect international phone numbers
- Mobile applications that require user registration with phone verification
Conclusion: The International Phone Number Input component is versatile and essential for any web application targeting a global audience, providing both functionality and aesthetic appeal.
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.