We’re often asked why our widgets perform significantly better than the older digital campaigning tools they’ve replaced. The answer isn’t straightforward—it’s a mix of multiple factors, with no single magic solution. Instead, it’s about paying attention to the small details and making continuous improvements.
One of our latest enhancements, which was partly sponsored by Greenpeace Germany, focuses on the phone number field (please note: it is not a a default feature but an optional one).
Our goal was to make it easier to accept phone numbers in different formats, whether in the national style like ‘040 306 180’ or the international format like ‘+49 40 306 180.’ We aimed to be flexible and permissive, allowing various ways people enter phone numbers—such as ‘(040) 306-180’ or ‘040/306 180’—and then automatically reformatting them into a consistent, standardized format.
Of course, we also wanted to handle the different formats and digit lengths of phone numbers from various countries.
We’d love to share some insights on how we made these improvements to our phone number field.
Html 5
Browsers have recently introduced a couple of features which can assist with form filling.
Depending on your device and its configuration, you might be able to auto-fill forms using information already stored on your device. To help with this, we added a hint (using the autocomplete="tel" attribute) to indicate that the field is expected to contain a phone number. Some plugins or devices can use this to offer a quick option for users to paste their phone numbers with a single click. We’ve applied similar hints to all fields in the form. However, not all browsers fully support this feature yet, so while it can make things easier, it doesn’t entirely eliminate the chance of mistyping.
Another recent enhancement for web forms is the ability to specify the type of content expected in a field. For example, designating a field as “email” will prompt an automatic warning if an “@” symbol is missing.
For phone numbers, we’ve used the “tel” promt, but again, validation is inconsistent across browsers and devices. Most of them simply check for digits (or a “+” at the beginning) without verifying if the the number of digits is correct.
We’ve implemented these improvements to future-proof our forms, hoping that newer versions of browsers and devices will support them better in the coming years. While these updates provide some benefits, these are, admittedly, limited in the immediate term.
Local validations
For German phone numbers, we’ve taken an additional step by adding a validation process. This involves stripping out anything that isn’t a digit or a “+” symbol, checking the length, and displaying an error message if the number is too long or too short.
Interestingly, determining the correct length for German phone numbers turned out to be more complex than we initially thought. For example, short codes like “112” (the emergency number) are technically valid but not for supporters taking action. Similarly, very long pager numbers still exist. With feedback and help from German campaigners, we refined the criteria to accept only the numbers their supporters commonly use.
To make this clear to users, we reformat their input by adding “+49” (the German country code) at the start and display a small German flag as a visual cue.
Our own validation micro-service
We wanted to go even further and validate phone numbers from every country.
We can determine the appropriate format based on either the country code (e.g., “+33 142928123”) or the selected country (e.g., France), which might use a local format (like “01 42 92 81 23”).
To achieve this, we’ve identified an open-source project which maintains a comprehensive list of countries along with all valid phone number formats and guidelines for reformatting.
Given the complexity and size of this list, we developed a separate server dedicated to this task. This server checks if a phone number is valid, reformats it if necessary, and identifies the country associated with it.
With this system in place, we can validate phone numbers from nearly anywhere in the world. While it’s unlikely to be 100% accurate, it should significantly improve the number of correctly formatted numbers, helping you connect more effectively with your supporters through their preferred channels.
Privacy first
As with all our features, we prioritize the security of your supporters’ data. That’s why we chose to implement our own phone number validation service. To add an extra layer of security, we don’t send the actual phone number for validation, instead, we mask certain digits. For example, instead of sending ’01 42 92 81 23′ for validation, we send ’01 42 92 81 99′. If the masked number is valid, so is the real one. This way, even if our service or its encrypted traffic were compromised, the compromised phone numbers would not be the real ones belonging to your supporters. Our guiding principle is that the best way to prevent data leaks is not to collect the data in the first place.
This approach also means you won’t need to adjust your privacy policies or GDPR-related documents, keeping compliance simple and straightforward.
Should you add the phone filed on your form?
It’s important to keep in mind that shorter forms are generally more likely to be completed by visitors. So, we typically recommend minimizing the number of fields, even if some of them are not mandatory.
If you decide to ask for a phone number, it should be a though-through choice made after internal discussions, and with a clear plan for how the information will be used. If there isn’t a specific, immediate need, it’s usually best to avoid collecting extra information ‘just in case’—both in order to protect privacy and to improve your form conversion rates.
That being said, phone numbers open valuable communicatin channels, allowing you, for instance, to send SMS notifications for time-sensitive updates. There are numerous campaign tactics and communication strategies where phone numbers can be highly effective. We’d be happy and to explore these options with you and help you determine if they might support you in achieving your campaign’s goal!