Style new CNCF country fields

[cjyabraham]

To address #864

• [x] Style country field in footer
• [x] Style country field in Kubeweekly form
• [x] Revert 1d9f3f1 before deploy

[thetwopct]

Could we group these fields better? I've tried to do it in HubSpot but can't find the form you're using

IMO, it would be better to have first, last, email, select country, select language

This is getting to be a pretty long "newsletter signup" form, where a company would normally just ask for an email only. Can we deploy this on 1st July so we can easily measure before and after signups?

[cjyabraham]

Ok, I re-ordered the fields. Here's the form if you want to edit but we won't go live with that form. We'll modify the old one.

Agreed the form is getting long. I've pushed back and asked questions about why we need Country but didn't get much of a response. Yes, let's go live on July 1 then.

[thetwopct]

At full width the inputs do not all fit on one line anymore ☹️, so we have to adopt 2 rows. I kinda dislike a completely equal 3 x 2 layout, but then I also dislike the long thin line of email. Do you prefer any version over another?

Version 1

Version 2

Version 3

Version 4

[cjyabraham]

I vote for Version 4.

[thetwopct]

1) For Kubeweekly - country is not a required field, should it be?

2) For the country list, is it possible to remove this blank entry? In theory this could be seen as a choice I guess?

3) Can we move Ireland in to order instead of being at the end of the country list?

For Kubeweekly, I tried to set a different selectbox color for placeholder, choices and selected but it's not possible. To make it look consistent, I've changed the placeholder color to be black, which then fades out when the user gives the input focus.

https://github.com/cncf/cncf.io/assets/10615884/b6a45d3e-ce6f-40ff-996f-bc250e56ef3c

4) I added a change to the tech radars in the header.php as I was getting locally an error for them. It's moving an array check earlier.

[27-Jun-2024 05:24:25 UTC] PHP Fatal error:  Uncaught TypeError: array_slice(): Argument #1 ($array) must be of type array, null given in /app/web/wp-content/themes/cncf-twenty-two/components/header.php:164
Stack trace:
#0 /app/web/wp-content/themes/cncf-twenty-two/components/header.php(164): array_slice(NULL, 0, 3)
#1 /app/web/wp/wp-includes/template.php(812): require('/app/web/wp-con...')
#2 /app/web/wp/wp-includes/template.php(745): load_template('/app/web/wp-con...', false, Array)
#3 /app/web/wp/wp-includes/general-template.php(206): locate_template(Array, true, false, Array)
#4 /app/web/wp-content/themes/cncf-twenty-two/page.php(10): get_template_part('components/head...')
#5 /app/web/wp/wp-includes/template-loader.php(106): include('/app/web/wp-con...')
#6 /app/web/wp/wp-blog-header.php(19): require_once('/app/web/wp/wp-...')
#7 /app/web/index.php(6): require('/app/web/wp/wp-...')
#8 {main}
  thrown in /app/web/wp-content/themes/cncf-twenty-two/components/header.php on line 164

5) Is it possible to style the drop-downs in the embedded Contact form?

[cjyabraham]

1. For Kubeweekly - country is not a required field, should it be?

Yes. I can make sure this is required on the real form when we deploy.

2. For the country list, is it possible to remove this blank entry? In theory this could be seen as a choice I guess?

I think having this blank line is the only way to unselect a value after one is selected. I'm not sure if that's needed, however, it doesn't seem to be causing any problems otherwise.

3. Can we move Ireland in to order instead of being at the end of the country list?

Done.

5. Is it possible to style the drop-downs in the embedded Contact form?

There doesn't seem to be any options here to style this field but what's wrong with the current style anyway?

[thetwopct]

5 - Its using a gradient background where other fields have a solid color

[cjyabraham]

The "g" in language and "y" in country seem to be getting cut off at the bottom slightly. Could you make this adjustment:

5 - Its using a gradient background where other fields have a solid color

That only seems to be the case in Safari? Maybe it's just Safari's native stylesheet?

[cjyabraham]

On mobile (width < 500), the form field's text seems to stand quite far off the line. Could we make it more consistent with desktop views:

[thetwopct]

I have fixed those issues and this is ready for final review and merge.