jdi-company/smart-phone-for-ninja-forms

This plugin is an addon to the Ninja Forms plugin. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

Ninja Forms SPN Addon

Wordpress plugin for entering and validating international telephone numbers based on International Telephone Input. It adds new field to Ninja Forms, a (searchable) country dropdown to any input, detects the user's country, displays a relevant placeholder number, formats the number as you type, and provides comprehensive validation methods.

Installation

1. Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation.
2. Activate ‘Ninja Forms‘ plugin through the ‘Plugins’ menu in WordPress.
3. Activate ‘Smart Phone Addon for Ninja Forms‘ plugin through the ‘Plugins’ menu in WordPress.
4. Go to Ninja Forms > Add New.
5. Press the ‘Add new field‘ button.
6. Select ‘Smart Phone‘ field.
7. Change the settings in the Restrictions section to suit your needs (play with Storybook).

Features

• Allow IP Lookup

Change default country depends on user IP

• Show Selected Dial Code

Display the country dial code next to the selected flag. Play with this option on Storybook (using the React component).

• Default Country

Country in the input by default

• Preferred Countries

Specify the countries to appear at the top of the list.

• Only Countries

In the dropdown, display only the countries you specify

• Allow Dropdown

Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.

• National Mode

Allow users to enter national numbers (and not have to think about international dial codes).

• Auto Hide Dial Code

If there is just a dial code in the input: remove it on blur or submit. This is to prevent just a dial code getting submitted with the form. Requires nationalMode to be set to false.

• Exclude Countries

In the dropdown, display all countries except the ones you specify here.

• Format On Display

Format the input value (according to the National Mode option)

Compatibility with Ninja Forms addons

• Ninja Forms: OK | v3.8.0
• NF Conditional Logic: OK | v3.1
• NF Multi-Part Forms: OK | v3.0.26
• NF Layout and Styles: OK | v3.0.29

smart-phone-for-ninja-forms's Issues

Hot Fix | Critical Error

Contact person(person, e-mail):

@yaroslav-borodii

Description:

Plugin breaks Ninja Forms settings page.

Steps/Link to reproduce the bug:

1. Go to the Ninja Forms Settings page
2. It should show a critical error.

What is the expected correct behavior?

It shouldn't show critical error.

Important logs and/or screenshots:

Environment (browser, device, software version, operating system):

Chrome, MacOS, Ninja Forms Latest, Smart Phone Latest, WordPress Latest, PHP 8.0

Possible Fix:

Remove:
includes/class-ninja-forms-spn-addon.php
Line 183: $this->loader->add_filter( 'ninja_forms_plugin_settings', $plugin_admin, 'add_select_multiple' );

Phone Number disappears on "clear successfully completed form" event

Contact person(person, e-mail):

@yaroslav-borodii

Description:

When I activate CLEAR SUCCESSFULLY COMPLETED FORM?, Smart Phone Field breaks on form submit. I guess it happens on NF reinitialise.

Steps/Link to reproduce the bug:

1. Create a New Ninja Form;
2. Add Smart Phone Field to the Form;
3. Go to the Advanced tab at the Form Builder Page -> Display Settings -> activate CLEAR SUCCESSFULLY COMPLETED FORM?
4. Deactivate HIDE SUCCESSFULLY COMPLETED FORM?
5. Save it;
6. Create Testing page;
7. Add Ninja Form which we created before;
8. Go on Testing page;
9. Try to submit form
10. Smart Phone Field should be broke.

How does the bug behave?

As I said, this breaks the logic and does not allow you to fill out form again

What is the expected correct behavior?

The form should look the same as when you load the page, with a list of countries and all the logic of the work.

Important logs and/or screenshots:

Settings:

On page load:

After submit:

Environment (browser, device, software version, operating system):

Chrome, MacOS, Ninja Forms Latest, Smart Phone Latest, WordPress Latest, PHP 8.0

Possible Fix:

Reinitialise intltelinput after clearing the form

Smart Phone Field doesn't validate value

Contact person

@yaroslav-borodii

Description

Priority: High
Severity: Medium

Description: When trying to submit a form using text in the Smart Phone field, it will be accepted and continue without any validation. The same thing happens if I enter more digits than expected.

Expected Result:

• Only numbers should be allowed (users cannot enter a letter from keyboard, etc. in the Smart Phone Field);
• Admin can choose which type of validation to use;
  For further details, please see the Additional Information section.
• New Feature should be compatible with old-created forms;
• Errors should be displayed the way Ninja Forms does.

Actual Result:
Smart Phone for Ninja Forms is accepting text and symbols when you enter a phone number.

Steps:

1. Create a new form or use the old one;
2. Try to type text via keyboard or something else;
3. Fill in the remaining fields as required;
4. Submit the form;

Additional information:

• https://github.com/jackocnr/intl-tel-input#utilities-script

Attachments

Check what’s wrong with SPN locally

The problem is that it doesn't load correctly locally.
We need to check why and fix it.

Plugin doesn't work with Ninja Forms multistep addon

Hi, I installed the smartphone addon for ninja form and it broke my multi step form.

Basically, before the activation, all the form where 3 steps. Now it’s all on the same page.

I didn’t do nothing, just activated the plugin.

Ninja form backend is still set on multistep.

How can I solve?

The plugin hasn't been tested with the latest version of WordPress

There is a new WordPress version that the plugin hasn't been tested with. Please test it and then change the "Tested up to" field in the plugin readme.

Tested up to: 6.4.3
Latest version: 6.5

This issue will be closed automatically when the versions match.

Does not determine the IP address of the user's country

Hi. There is no automatic substitution of the flag and country code, always selects the default country +44 United Kingdom. I tried it from different IP addresses, but it doesn't work.
The checkbox for Allow IP Lookup and SHOW SELECTED DIAL CODE is set. How to fix it?

Wordpress 6.4.3
PHP 7.4

Problem with Elementor Plugin | Video option

This plugin does not work with the Elementor plugin...

Specific error in the Video option. Videos not working

The plugin hasn't been tested with an upcoming version of WordPress

There is an upcoming WordPress version in the release candidate stage that the plugin hasn't been tested with. Please test it and then change the "Tested up to" field in the plugin readme.

Tested up to: 6.4.0
Upcoming version: 6.5

This issue will be closed automatically when the versions match.

Elementor Plugin

User Request

I've been using the Smart Phone Addon for Ninja Forms plugin for my ninja forms, and I'm finding it makes some functionalities from the Elementor Builder plugin crash. Making them unusable, or not letting the Elementor plugin screens load at all. I've managed to deactivate your plugin temporarily while making elementor changes, but I'm wondering if there's anything else that could be causing the issues, or if you've stumbled upon other users having similar issues.

Prefix not stored

Hello! I’m using your plugin on this page https://www.pdgboattours.it/#book

The prefix won’t save/show in the Ninja Forms Submission page. Is it a bug or a config problem? Any recommendation? Thank you so much!

[SPN] Install intltelinput with NPM, not static files

Contact person(person, e-mail):

@yaroslav-borodii

Userstory

As a developer, I want to use intltelinput using npm, so that we will decrease plugin size on 2.5MB

Description

We have vendor folder in the plugin and it's size 2.5MB.
We can use intltelinput with npm, so it will decrease plugin's size.
It will be easy to update in the future.

More info(images, documents, attachments):

• https://www.npmjs.com/package/intl-tel-input
• 

Acceptance criteria:

1. Plugin's folder will not include vendor folder
2. We can use intltelinput via npm using import feature
3. Remove all intltelinput dependencies in PHP (for now plugin enqueues intltelinput as different/external script)

Test description:

1. Check if EVERY feature works with old and new NF forms
2. Compare our version with the latest version of intltelinput
   2.1. Check if we should change our logic according to the latest update

Before the release:

After the release:

[SPN] Check plugin for compatibility with PHP version 8.2 & WordPress 6.3.2

Contact person(person, e-mail):

@yaroslav-borodii

Description:

We need to check for compatibility with PHP version 8.2 & WordPress 6.3.2

Last Tests?

• PHP Version 8.0
• WordPress 6.3.0

Version to test?

• PHP Version 8.2
• WordPress 6.3.2

Before the release:

After the release:

Responsive issue in Elementor

Hi there,

I added the smart phone field in my Elementor built website. It works without problem in desktop but when I checked in my mobile phone it's just showing the phone filed and the country code and flags are not showing. So I installed the plugin in a different website , that I built with WP page bakery and it is working without any issue in mobile. Could you please check that issue and let me know how to sort out this issue.? I have attached the screenshot from my mobile, please have a look. Thanks in advance