Change The Default Country Code On The Caldera Forms Better Phone Number Field

Caldera Forms by Caldera Labs is a brilliant form builder that lets you build responsive forms with a simple visual drag and drop editor. One of the available field types is an advanced Phone Number field that includes a drop-down of international dialling codes. The only hassle with this field is that it defaults to the USA dialling code which, if you’re in the States isn’t a problem but for everybody else…

In order to change this, all that you’ll need to do is add a tiny bit of PHP to your child theme’s functions.php file. If you aren’t using a child theme, it’s easy enough to create one with the Divi Child Theme Generator by Divi Cake.

The Code

You’ll want to change the country code to that of the country you want the Phone Number field to default to. In this example, I’ve set the default to GB. You can find a comprehensive list of the country codes on Wikipedia.

Adding The Code

Although you can add this code to your theme’s functions.php file, it isn’t advisable as this file will be overwritten the next time you update your theme. That is why it is highly recommended that you use a child theme. So, after that little lecture, let’s add the code. Head to your WordPress Dashboard, click on Editor under Appearance and then make sure you have the child theme’s functions.php file select. You should be looking at something like this:

Now, all that’s left to do is to add the above code the to bottom of this file, change the country code if necessary, and save it. Once you’ve done that, your default for this field will change to the country you specified.

Wrapping It Up

It’s a little odd that this can’t be set in the builder but I’m guessing the developers had good reason not to. Anyway, it’s easy enough to set it with this tiny bit of PHP. There are two other options that you might want to investigate like limiting the countries that are included or placing specific countries at the top of the list, you can check out all the options in the official documentation caldera_forms_phone_js_options.

Photo by Nick Fewings on Unsplash