Using Formidable in Modal Issues with Conflicting Scripts https://careers.greatnhrestaurants.com

[Scribbit]

I reached out to Formidable and they are saying that the issue is coming from Xtheme pro.

"If you switch your theme to the default WordPress theme that I installed, and also disable the code snippet you added (to remove Bootstrap script) and check this page https://careers.greatnhrestaurants.com/careerformidable/. Your date field is correctly rendered in the modal pop-up.

That is very strange. I’ve tested the Bootstrap Modal add-on on my dev site and I’m not seeing the error that is showing in your developer console. There must be something unique to your site that is interfering with Formidable and causing the issue.

You can get in touch with the theme developers so they can take a look at the conflicting script for you."

NOTE; This was added to help but it’s something wrong with Xthem Pro that is conflicting scripts…

add_action(‘wp_footer’, ‘remove_bootstrap_js’, 1 );
function remove_bootstrap_js(){
wp_dequeue_script( ‘bootstrap’ );
wp_dequeue_style( ‘bootstrap’ );
}

[friech]

Hi @Scribbit,

Thank you for writing in, can you clarify what modal you’re referring here? I’ve checked this page and that Click here link is not an element of Cornerstone, can you try using the native Modal element instead.

Cheers!

[Scribbit]

The form is on the homepage https://careers.greatnhrestaurants.com when you click “Apply Now”, that is how we want people to be able to send an application but the scripts error is not allowing full functionality. As noted, the issues with Modal closing, the calendar date picker is not working, etc. Thanks in advance

[marc_a]

Hi @Scribbit,

I am not quite sure why the date picker is not working with the modal element because when I tried to add the formidable shortcode on a normal page, the date picker is just working fine using our theme. I also don’t see any script error using the google console that’s why it is hard for us to determine the root cause of the issue. To continue to work with your website, I suggest that you use the ConvertPlus plugin as an alternative option for the Modal element. Please see the secure note for more information.

• https://theme.co/docs/convertplus

Hope that helps.

Thank you.

[Scribbit]

Issue with that is I don’t want the form to just automatically show up on the page. It should be because user clicked Apply Now button. I also want this on the homepage not some separate content page.

So why won’t it work on homepage which is the careers page in a modal? That is what I am saying is where the script error is happening.

[Scribbit]

The careers page (which is the homepage) uses only the page header in XTheme, I think that has something to do with it? Somehow the script is not being ready correctly because the content and footer are not used with that page template.

[friech]

Hi Scribbit,

This could be a bug, but this could also be how this (careers) page is built. We could still make this work, let’s use the ConvertPlus to add the form on the content. To do this on the ConvertPlus modal configuration, turn off all the Smart Launch so the ConvertPlus modal will not show (you don’t need to trigger this modal).

Then optional, you can enable this hidden ConvertPlus modal only on the (careers) page https://i.imgur.com/0AXjQvd.png

Hope it helps,
Cheers!

[Scribbit]

Thanks, but I want the careers form only to be displayed when user clicks on APPLY NOW button. Are you saying that is possible, if so how? Also, why is the Modal feature not compatible?

[ruenel]

Hello @Scribbit,

I am another staff checking. I have checked your homepage header and all the element settings seem correct. When I click the red “Apply” and “Apply Today” buttons, it launches the modal which displays the form. The date field is also displaying as expected on my end. This is what I am seeing:

Please be advised that each field on the form are using element IDs. An element ID must be unique so the form must be used or inserted once to prevent any JS script errors. I would highly recommend that the red “Apply” button will be the Modal element and then the “Apply Today” button should be an ordinary button element which once clicked, will trigger to open the modal element. You can do that by adding a toggle hash my-form in Modal > Customize element settings:

And then in your button element, simply add #my-form link to trigger the modal.

Hope this helps.

[Scribbit]

Thank you very much! That actually helped a lot!!!

There’s still a glitch happening when user toggles the date picker left or right arrows moving from month to month. Do I need to ad ‘ID’ to the form div for the date pickers to not close the modal?

And when submitted the “Thank You” message doesn’t show correctly, looks like an issue with scrolling?

[christian]

Hey @Scribbit,

I see the issues you described. I understand that Formidable Forms support said this is a theme issue because the issue only happens in Pro. However, because this is a script conflict between a 3rd party plugin and our theme, we cannot provide support for this other than showing you an alternative like what Runel suggested.

The real solution here would either be:

1. You consult with a 3rd party developer to create a custom function so that elements of Formidable won’t conflict with the functions of our theme.
2. Don’t use the Modal. Instead, create a page for your Formidable Form and redirect Apply Today button to that page. Set Button the Target to Blank so it opens in a new tab so that your user can still continue viewing the home page.

---

Regarding the Thank You message, there is no solution to that. There is scrolling because the form (1st step) is very long. The modal height is already calculated for that only so after submitting the form, the view stays at the bottom of the modal and your Thank You message is above the Modal. You will not have this problem if you choose solution 2 above.

Thank you for understanding.

[Scribbit]

Since this is using the formidable modal I would think support is warranted… thanks and hopefully we can resolve as this feature is desired

[ruenel]

You are most welcome.