Forms: add searchable country dropdown for phone number #45018

CGastrell · 2025-08-29T16:18:49Z

Phone field with country selector, second iteration.

Proposed changes:

This PR implements a searchable dropdown for the country selector on the phone field.

opens and scrolls to selected
search as you type
hitting "Enter" selects the first country on the filtered list
changes when international phone number is typed on sibling input

Working on the editor:

Screen.Recording.2025-09-05.at.16.14.53.mov

Working on the frontend:

Screen.Recording.2025-09-05.at.16.16.01.mov

NOTE: the default country setting on the inspector sidebar can remain as a secondary way of setting it or we can remove it all along. It doesn't look as nice, but as a setting it also makes sense to leave it there.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

None

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Test:

phone number validation, use different countries and inputs
special note on the editor: the labels have been rolled back to just flag and prefix (trunk) while adding a more readable default country selection on the inspector sidebar
test dropdown search and navigation, double check phone number validation still makes sense after changing

github-actions · 2025-08-29T16:19:39Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the add/forms-fancy-country-dropdown branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/forms-fancy-country-dropdown

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-08-29T16:19:49Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2025-08-29T16:27:58Z

Code Coverage Summary

Coverage changed in 6 files. Only the first 5 are listed here.

File	Coverage	Δ%	Δ Uncovered
projects/packages/forms/src/modules/field-phone/view.js	0/115 (0.00%)	0.00%	68 💔
projects/packages/forms/src/blocks/input-phone/edit.js	0/29 (0.00%)	0.00%	13 💔
projects/packages/forms/src/blocks/field-telephone/edit.js	0/25 (0.00%)	0.00%	3 ❤️‍🩹
projects/packages/forms/src/contact-form/class-contact-form-plugin.php	412/1293 (31.86%)	-0.05%	2 ❤️‍🩹
projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php	385/590 (65.25%)	0.06%	0 💚

2 files are newly checked for coverage.

File	Coverage
projects/packages/forms/src/blocks/field-telephone/country-names-translated.js	0/3 (0.00%) 💔
projects/packages/forms/src/blocks/shared/components/searchable-combobox.js	0/106 (0.00%) 💔

Full summary · PHP report · JS report

_{Coverage check overridden by

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR
.}

enejb · 2025-09-02T17:20:10Z

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -314,7 +314,7 @@
 		word-break: normal;
 		color: unset;
 		opacity: 0.6;
-		font-size: 85%;
+		font-size: 72%;


Why are we doing this in this PR?

Basically because we have a lot of broken stuff when it comes to new selectors and animated and outlined styles. This is just a wee fix for the font size given to notched labels on those form styles.

I'll be adding more like this.

Let's get generic fixes merged in separate PRs to isolate them for easier testing.

enejb

Add some questions and suggestion! Thanks for working in this!

enejb · 2025-09-02T17:22:55Z

projects/packages/forms/tests/php/contact-form/Contact_Form_Test.php

+	/**
+	 * Test for telephone field_renders with showcountryselector false
+	 */
+	public function test_make_sure_telephone_field_renders_as_expected_with_showcountryselector() {


enejb · 2025-09-02T17:25:28Z

projects/packages/forms/src/contact-form/css/phone-field.scss

-			display: flex;
-			max-width: 40%;
+			// display: flex;
+			// width: 40%;


Should we just remove this comment?

enejb · 2025-09-02T17:26:59Z

projects/packages/forms/src/contact-form/class-contact-form-field.php

+								data-wp-on--keydown="actions.phoneComboboxKeydownHandler">
+							<div class="jetpack-combobox-options">
+								<template
+								data-wp-each--filtered="context.filteredCountries"


NIT: indentation seems off.

enejb · 2025-09-02T17:29:53Z

projects/packages/forms/src/modules/field-phone/view.js

 import parsePhoneNumber, { AsYouType } from 'libphonenumber-js';
-import { countries } from '../../blocks/field-phone/country-list';
+import { countries } from '../../blocks/field-telephone/country-list';


It looks like this list is currently not translated. Should we wait till that is the case before adding it to production?

the translation comes from an internal method on the field class. This was so the translations can be provided as interactivity config:

$translated_countries = $this->get_translatable_countries(); $global_config = array( 'i18n' => array( 'countryNames' => $translated_countries, ), ); wp_interactivity_config( 'jetpack/field-phone', $global_config );

simison · 2025-09-03T17:17:37Z

projects/packages/forms/src/blocks/field-telephone/edit.js

+			'jetpack-field',
+			'jetpack-field-phone',
+			'jetpack-field-telephone',
+			width ? ` jetpack-field__width-${ width }` : '',


Without space, since clx takes care of it?

Suggested change

width ? ` jetpack-field__width-${ width }` : '',

width ? `jetpack-field__width-${ width }` : '',

Or I guess this would work too?

Suggested change

width ? ` jetpack-field__width-${ width }` : '',

{ `jetpack-field__width-${ width }`: width },

simison · 2025-09-03T17:19:10Z

projects/packages/forms/src/blocks/input-phone/editor.scss

@@ -1,13 +1,16 @@
-.jetpack-contact-form .jetpack-field.jetpack-field-phone {
+.jetpack-contact-form .jetpack-field.jetpack-field-phone,
+.jetpack-contact-form .jetpack-field.jetpack-field-telephone {


Both classes probably not needed anymore?

simison · 2025-09-03T17:20:42Z

projects/packages/forms/src/blocks/input-phone/index.js

@@ -7,8 +7,11 @@ import save from './save';
 const name = 'phone-input';
 const settings = {
 	apiVersion: 3,
-	title: __( 'International Phone Input', 'jetpack-forms' ),
-	description: __( 'A compound input for international phone numbers.', 'jetpack-forms' ),
+	title: __( 'Phone Input', 'jetpack-forms' ),


Suggested change

title: __( 'Phone Input', 'jetpack-forms' ),

title: __( 'Phone input', 'jetpack-forms' ),

Sentence case everywhere :-)

simison · 2025-09-03T17:22:03Z

projects/packages/forms/src/blocks/input-phone/index.js

-	description: __( 'A compound input for international phone numbers.', 'jetpack-forms' ),
+	title: __( 'Phone Input', 'jetpack-forms' ),
+	description: __(
+		'A compound input for phone numbers with international support.',


Suggested change

'A compound input for phone numbers with international support.',

'Phone number input.',

We could keep it simple?

simison · 2025-09-03T17:48:33Z

Getting there!

I don't think we need this sidebar setting since the dropdown in canvas already works well for setting the default:

Carret needs better centering, and let's remove the animation for now to polish it better after:

Screen.Recording.2025-09-03.at.20.37.58.mov

Positioning of the dropdown doesn't work; it should start right under the phone input, not over it. The width would ideally be the same as input's, but it's also fine as-is and something we can adjust after other changes.

Let's fit 4 countries visible at once so that it feels less crammed?

Multi lines have issues now:

Styling inheritance from parent styles is a bit all over the place 😅

Background should be input background
Extra blue border under search input should be border color, or likely not needed at all?
Border colour, radius and thickness should be from input
Text color for dropdown and selected value should be same as input, now it's parent group's color
Selected/highlighted colour likely needs to use button styles to inherit them from the theme?

Text size doesn't apply to countrycode and carret, and the dropdown:

Finally, it would be good to match the editor with the same dropdown as in the frontend to allow true wysiwyg and control over design without publishing, but that's not a blocker for merging and can be a follow-up:

Test form:

<!-- wp:group {"align":"wide","className":"is-style-section-3","style":{"elements":{"link":{"color":{"text":"#9c005f"}}},"color":{"text":"#9c005f"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide is-style-section-3 has-text-color has-link-color" style="color:#9c005f"><!-- wp:jetpack/contact-form {"variationName":"default"} -->
<div class="wp-block-jetpack-contact-form"><!-- wp:jetpack/field-email {"required":true} -->
<div><!-- wp:jetpack/label {"label":"Email"} /-->

<!-- wp:jetpack/input {"placeholder":"Placeholder","textColor":"accent-3","style":{"border":{"width":"2px","color":"#F6CFF4","radius":{"topLeft":"7px","topRight":"7px","bottomLeft":"7px","bottomRight":"7px"}},"color":{"background":"#fffdf2"},"elements":{"link":{"color":{"text":"var:preset|color|accent-3"}}}}} /--></div>
<!-- /wp:jetpack/field-email -->

<!-- wp:jetpack/field-telephone {"showCountrySelector":true,"default":"TH"} -->
<div><!-- wp:jetpack/label {"label":"Phone number"} /-->

<!-- wp:jetpack/phone-input {"placeholder":"Placeholder","textColor":"accent-3","style":{"border":{"width":"2px","color":"#F6CFF4","radius":{"topLeft":"7px","topRight":"7px","bottomLeft":"7px","bottomRight":"7px"}},"color":{"background":"#fffdf2"},"elements":{"link":{"color":{"text":"var:preset|color|accent-3"}}}}} /--></div>
<!-- /wp:jetpack/field-telephone -->

<!-- wp:jetpack/button {"element":"button","text":"Contact Us","lock":{"remove":true}} /--></div>
<!-- /wp:jetpack/contact-form --></div>
<!-- /wp:group -->

…cky, needs testing

…including quotes

CGastrell · 2025-09-05T21:54:32Z

@simison Thanks for the thorough review! Super helpful!

I don't think we need this sidebar setting since the dropdown in canvas already works well for setting the default:

Fair enough, I was about to ask about it. Removed.

Carret needs better centering, and let's remove the animation for now to polish it better after:

I adjusted the position, I think it sits better now.

Positioning of the dropdown doesn't work; it should start right under the phone input, not over it. The width would ideally be the same as input's, but it's also fine as-is and something we can adjust after other changes.

Position and dimensions are a bit tricky since it's absolute, not much relativity can be applied, so we're a bit stuck to hardcoded values. But I've added some CSS rules to try and use the space a bit better. Width is now set to max-content but limited to 75vw so we don't overflow the page.

Let's fit 4 countries visible at once so that it feels less crammed?

Good!

Multi lines have issues now:

With the above fixes this now only affects mobile views, but desktop displays show a better layout. Added flex alignment to top for the extreme cases

Styling inheritance from parent styles is a bit all over the place 😅

Yes! Another tricky scenario. We're trying to inherit as much as possible, but sometimes the backgrounds and colors can come from different places, becoming even transparent when a simple div wrapper shows up (KeyboardShortcuts for example). I've adjusted a bit, but in the end we'll need to make some compromises.

Background should be input background

As seen on the above screenshots, this is now inheriting from either the input background or the set styles.

Extra blue border under search input should be border color, or likely not needed at all?

Changed to a subtle "separator" border with neutral color. We can work on it, see if we can inherit it.

Border colour, radius and thickness should be from input

I don't think this is a good idea. I think the combobox can (and should) be more controlled. It's a floating UI element and while we want it to blend in, it can come with some surprises. Happy to explore, I'll leave some examples of edgy cases, the second one doesn't look so bad:

Text color for dropdown and selected value should be same as input, now it's parent group's color

Seeing the screenshots above, was that what you meant?

Selected/highlighted colour likely needs to use button styles to inherit them from the theme?

I still fail to find a reliable var, we can use some of the accent colors (1 through 6) or mimic the buttons, which use a preset variable on top of another (color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--contrast))

Text size doesn't apply to countrycode and carret, and the dropdown:

Fixed! But I wonder if you also meant we should apply the font size to the scrollable list, that would be hard to adjust (back to the absolute position/dimension topic). Maybe we can settle for using a percentage of the font-size set for the input? Like .74em?

Finally, it would be good to match the editor with the same dropdown as in the frontend to allow true wysiwyg and control over design without publishing, but that's not a blocker for merging and can be a follow-up:

Done!

…tead of 'normal'

lezama · 2025-09-08T18:49:45Z

projects/packages/forms/src/blocks/field-telephone/country-names-translated.js

+	AE: __( 'United Arab Emirates', 'jetpack-forms' ),
+	GB: __( 'United Kingdom', 'jetpack-forms' ),
+	US: __( 'United States', 'jetpack-forms' ),
+	UY: __( 'Uruguay', 'jetpack-forms' ),


es el mejor país

…)" This reverts commit fbffda8.

…)" (#45119) This reverts commit fbffda8.

CGastrell self-assigned this Aug 29, 2025

CGastrell added [Status] In Progress [Type] Task [Package] Forms Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR labels Aug 29, 2025

github-actions bot added [Block] Contact Form Form block (also see Contact Form label) [Feature] Contact Form [Tests] Includes Tests labels Aug 29, 2025

CGastrell force-pushed the add/forms-fancy-country-dropdown branch 4 times, most recently from 5f76e48 to d99c473 Compare September 2, 2025 14:34

enejb reviewed Sep 2, 2025

View reviewed changes

CGastrell force-pushed the add/forms-fancy-country-dropdown branch from 58eab79 to 8407703 Compare September 2, 2025 21:34

CGastrell requested a review from enejb September 2, 2025 21:34

simison reviewed Sep 3, 2025

View reviewed changes

CGastrell force-pushed the add/forms-fancy-country-dropdown branch from 8407703 to aa403a3 Compare September 3, 2025 20:55

CGastrell added 5 commits September 5, 2025 10:18

adapt process to use two letter country code, derive state from it

9e75c60

remove debugging code

f73861b

remove field-phone registration and handlers

57ca513

deprovision default when not using country selector on phone field

758c73b

cleanup useless code

43301df

CGastrell requested review from simison and a team September 5, 2025 19:22

CGastrell added 6 commits September 5, 2025 16:33

address PR comments

baad8ce

inherit background color so input background is honored, but it's tri…

9fc296b

…cky, needs testing

adjust colors to inherit from current

dd6a3e9

address more PR comments

c4c370c

need to rebuild css class names as they come with 'class=' attached, …

8a703ba

…including quotes

fix test for phone input

4cd77f6

CGastrell added 7 commits September 8, 2025 02:17

use provided styles for dropdown

6507d50

address bug with calculated probe styles: use browser default 1.2 ins…

c4afe56

…tead of 'normal'

address width and positioning issues

680112d

fix styles colliding with defaults, use presets for color highlight

b20b86a

use fallback color as it's more reliable than the detected background

869e9bd

change down arrow, use svg instead of pseudo element

f50b779

use detected radius style when possible

0bb8821

lezama reviewed Sep 8, 2025

View reviewed changes

CGastrell added 2 commits September 8, 2025 16:01

fix animated and outlined styles on combobox

7d37060

use safe background color to avoid falling into transparent

2e8bd5c

lezama previously approved these changes Sep 8, 2025

View reviewed changes

CGastrell added 2 commits September 8, 2025 20:05

inherit styles from block props

e8cbfcd

fix some quirks on editor styles to match frontend

dab8d26

CGastrell dismissed lezama’s stale review via dab8d26 September 8, 2025 23:05

CGastrell merged commit fbffda8 into trunk Sep 9, 2025
67 checks passed

CGastrell deleted the add/forms-fancy-country-dropdown branch September 9, 2025 16:06

github-actions bot removed the [Status] In Progress label Sep 9, 2025

CGastrell added a commit that referenced this pull request Sep 9, 2025

Revert "Forms: add searchable country dropdown for phone number (#45018…

7936e78

…)" This reverts commit fbffda8.

CGastrell mentioned this pull request Sep 9, 2025

Revert "Forms: add searchable country dropdown for phone number" #45119

Merged

CGastrell added a commit that referenced this pull request Sep 9, 2025

Revert "Forms: add searchable country dropdown for phone number (#45018…

6027678

…)" (#45119) This reverts commit fbffda8.

CGastrell mentioned this pull request Sep 9, 2025

Forms: add combobox for phone country selector #45120

Merged

3 tasks

	width ? ` jetpack-field__width-${ width }` : '',
	width ? `jetpack-field__width-${ width }` : '',

	width ? ` jetpack-field__width-${ width }` : '',
	{ `jetpack-field__width-${ width }`: width },

	title: __( 'Phone Input', 'jetpack-forms' ),
	title: __( 'Phone input', 'jetpack-forms' ),

	'A compound input for phone numbers with international support.',
	'Phone number input.',

Forms: add searchable country dropdown for phone number #45018

Forms: add searchable country dropdown for phone number #45018

Uh oh!

Conversation

CGastrell commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

github-actions bot commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 29, 2025

Uh oh!

jp-launch-control bot commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

enejb left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

simison commented Sep 3, 2025

Uh oh!

CGastrell commented Sep 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

CGastrell commented Aug 29, 2025 •

edited

Loading

github-actions bot commented Aug 29, 2025 •

edited

Loading

jp-launch-control bot commented Aug 29, 2025 •

edited

Loading