Web form's JS does not run after embedding snippet under a WordPress page

Forms Public Forms
1

Hello:

Our web-enabled form's JS code does not run after embedding the snippet under a WordPress page. Are there any suggestions to allow for the code to run under a WP page? All of the code runs under the fd.rendered(function (vue) {.

The code blocks consist of hiding and showing fields based on the selection under another field. There's also JS code that changes some fields from not required to required if, they show (required) or are hidden (not required). In addition, a default value is being set for a drop-down field. All of which will now not execute properly after embedding the snippet under a WordPress page. Please advise.

Thank you,

BlueWhale

2

Dear @BlueWhale,
Can you link the page that you have? Are there any errors in the browser's console?

3

Hi Nikita,

Here's the io link where the JS functions as expected - https://pfm.plumsail.io/7a321f47-db4d-4dbe-8ac9-eb3d6ce8faaf

Here's the link to WordPress page with the code snippet embedded in it. As mentioned, the JS does not run properly here.
https://www.prisonfellowship.org/vendor-onboarding-form/

Thank you,

BW

4

Nikita,

Another issue that was just noticed within the Phone Number (Optional) field on the first page is that input mask of (000) 000-0000 is configured to capture a U.S. formatted phone number. However, for some reason this mask allows for 4 digits to be entered between the parentheses () and does not limit it to 3 digits as expected. Are the parentheses () causing a conflict in the mask? Should we implement a mask of 000-000-0000 instead.

Thanks again,

BW

5

Dear @BlueWhale,
Not sure what is not functioning, I can see that on the second step the fields are hidden/shown depending on the choice of supplier's bank account type US or international. What logic is not working? Have you tried Incognito mode of the browser?

Also, can't input more than 3 digits in the masked field. What browser are you using?

6

Here's a video of how it runs for me in the Incognito mode of Google Chrome:

7

Hi Nikita,

Today, we resolved the JS not executing issue by embedding the link in an iframe tag, as opposed to using the snippet. All JS now runs as expected. In fact, I was just about to update this ticket.

In reference to the issue with the phone number, I am using both Chrome and Edge. When initially entering the phone number it only accepts 3 digits within the parentheses. However, when I or the submitter returns to the phone number field, it will accept a fourth character. It seems the submitter is able to overwrite the open paren with a number. Attached is an example (.png) of the output when this occurs. Any suggestions.

Btw, this is our org's first Plumsail form, as you likely could tell. We aim to get better at using the tool to build and deploy forms.

PhoneNumberField

Again, thanks for you support.

BW

8

Dear @BlueWhale,
Unfortunately, we were unable to reproduce:

If you can, please, record a video for us.

Also, to solve the issue, you can add additional validator to the field:

fd.rendered(function(){
    fd.field('MaskedText1').addValidator({
        name: 'Phone validator',
        error: 'Please, enter correct phone',
        validate:function(value){
            return /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(value)
        }
    });
});
1 Like