Joe Kevlex asked 12 hours ago
Hi,
I created a couple of landing pages for my client's website, and upon checking the pages' source, I was surprised to see the customized HTML I made for the embedded multi-step form on another landing page. How do I limit these customized HTML to appear only where I embed my multi-step Formidable Forms form. And, why does this happen? I mean, granted, I enabled Form Abandonment and Send API data and other Formidable Forms add-ons. Shouldn't the custom HTML only appear on pages where I embedded the FF form?
Oh, yeah. And, I cloned/duplicated my original page with the embedded form on an Elementor popup. I needed to duplicate parts of the original layout; thus, I cloned the original but made sure not to copy over the embedded multi-step form. I can't find where the custom HTML is on the new page/s. But it's there when you test and view the page source.
TYIA.
Victor Font Staff answered 6 hours ago
You have a very complex development environment with a lot of moving parts. You don't mention how you built the landing pages. There are several ways to build landing pages including a Formidable add-on. You mention Elementor is involved. You mention custom HTML but not whether you are referring to a custom HTML field or a code snippet executed through a form hook. You haven't given us a lot to go on to help diagnose the issue. In a general sense, Formidable code belongs on Formidable pages. Do you have Formidable set to load its jQuery site wide or on Formidable pages? If you created a snippet to display the custom HTML, code snippets are usually loaded everywhere unless specified in their setup.
Joe Kevlex
replied 4 hours ago Right. Yuh. Most of the website's pages were developed using Elementor Pro, with tons of pages even before I rolled into the project. I recently installed Formidable Forms (FF) Business for a multi-step form (that branches out into a few branches) embedded in an Elementor popup. I also installed the "Form Abandonment" add-on with it.
In this recent campaign or project, I added three Elementor landing pages and four Elementor popups, where two of these popups have an embedded FF form each. Yes, one of these forms is the multi-step form mentioned earlier. The other is just a simple contact form (not the problem).
For the multi-step form, I used a chunk of JavaScript to be able to implement the design preferred by the client, which requires a few multi-step branches (imagine a small choose-your-own-adventure book where multiple conditions lead you to different paths). I placed this custom code in the multi-step FF form's "Settings" > "Customize HTML" > "After Fields." That's just in one FF form, that's embedded in one of the Elementor popups, that's displayed in just one of the Elementor landing pages.
So, the multi-step FF form is working great; same as the chunk of JavaScript in it. I also made sure that the pop-up only shows up or is tied to just one landing page. I did that using Elementor's "Display Conditions" settings, making sure that I exclude the other landing pages so that the popup won't get embedded in the others.
Then, on this other landing page, which didn't use the popup and didn't embed any of the FF forms I created, I found in the page's source the customized code that I made for the multi-step FF form for the other landing page. I find it odd, then I remember I activated "Form Abandonment" and enabled its options.
Now, I'd like to know how to limit the customized code that I placed in that one FF form's settings to just the popup it was supposed to be embedded in. Right now, I see my JavaScript, along with some hidden FF form elements, where it shouldn't be.
"Do you have Formidable set to load its jQuery site wide or on Formidable pages?" Sorry, I don't know where to set this. I just used FF for those two embedded FF forms I mentioned earlier.
Please login or Register to submit your answer
