Chargement du composant...

Chargement

Plus de composants

Voir tout
Une partie de

International Phone Number Input

Oups ! Un problème s'est produit lors de l'envoi du formulaire.
International Phone Number Input
{"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}}
Cloner dans Webflow
Composant de copie
{"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}}
Navigateur non pris en charge. Utilisez
CC Chrome ou SS Safari.

A propos de ce composant

Généré par l'IA

Description du composant (générée par l'IA)

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.

Caractéristiques principales :

  • 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

Éléments de conception :

  • Flexbox layout for easy alignment
  • Rounded borders with a subtle shadow for a modern look
  • Font-weight styling for labels to enhance readability

Cas d'utilisation potentiels :

  • 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.

Commencer à construire

Commencez à construire vos rêves

Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.