---
title: "Phone Number Input — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Nabeel · Forms. About This component is a phone number input field for Framer forms that combines a searchable country dial code selector with a standard phone…"
canonical: "https://framer.elliotli.dev/component/phone-number-input"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Phone Number Input

# Phone Number Input

A searchable phone number input field

[View on Framer](https://framer.com/marketplace/components/phone-number-input/?via=elliot-li)

![Phone Number Input preview image 1](https://framer.elliotli.dev/og/component/phone-number-input/dd1f89efe7298db4/1600x1200.jpg)

## Summary

About This component is a phone number input field for Framer forms that combines a searchable country dial code selector with a standard phone number text field.

## Description

## About

This component is a phone number input field for Framer forms that combines a searchable country dial code selector with a standard phone number text field. Users pick their country from a dropdown showing flags, country names, and dial codes, then type their number in the field next to it. It works natively with Framer's built-in form system, which means submissions are automatically captured and sent through Framer's free built-in email notifications and Google Sheets integration, no third party tools needed.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Go to **Insert → Form Builder** in Framer to create a native Framer form on your canvas.
    
2.  Copy the component code from the site and paste it directly into your Framer project file.
    
3.  Place the Phone Number Input component **inside the Form Builder frame** as it will not capture form data if placed outside it.
    
4.  In the right panel, set the **Name** (the field label in your form submission), choose a **Default Country**, set your **Placeholder** text, and toggle **Required** on or off.
    
5.  Adjust all visual settings including colours, fonts, border, focus style, selector elements, and dropdown appearance under **Input Style** and **Dropdown Style** in the right panel.
    
6.  Connect your form's submit button to Framer's native form actions to send submissions to your email or Google Sheets for free, no extra tools or integrations needed.
    

## How It Works

The component must live inside a native Framer form to capture and submit data correctly. The left side is the country selector showing the flag, dial code, and a dropdown arrow, all of which can be toggled on or off. The right side is the phone number text input. Under Input Style you control the shared look of both sides including background, border, padding, font, border radius, and the focus state. The Selector section within Input Style lets you control the flag, dial code visibility, arrow size and colour, and the gap between elements. Dropdown Style controls the appearance of the country list including the search box at the top.

## What You Get

When you purchase this component, you'll receive:

-   **The Component Itself** - Full access to the component all future updates
    
-   **Remix File with Component Setup** - A complete Remix file with the component pre-configured and ready to integrate into your project.
    
-   **Setup Instructions** - Clear, step-by-step instructions to help you implement the component quickly and correctly.
    
-   **Dedicated Support** - Direct access to our team for assistance if you encounter any issues during setup or implementation.
    

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Refund Policy

If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5690

## Details

- **Author**: Nabeel
- **Price**: $9.00
- **Published**: 2026-04-02
- **Updated**: 2026-04-02
- **Added**: 2026-03-13
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from