Open Form in a Popup Using Avada Button

Home Forums Quform WordPress Open Form in a Popup Using Avada Button

This topic is: resolved
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #36654
    induspray
    Participant

    I want my form to open in a popup window, while triggered by a standard Avada button.

    No success so far, and I’ve tried many suggestions from previous posts (there seem to be so many different approaches and codes, which is a bit unsettling).

    I can NEVER get a popup window of any kind to show. At best, I get the form itself displaying *within my page* below the button (with barebones styling), which is obviously not the intent.

    (I can’t even get the popup to work while being triggered by a hyperlink… actually, I’m not even sure how to configure a hyperlink to do that.)

    My form is a typical “contact” form, with about 7 fields and a file upload option.

    The form is currently embedded into a normal full-size page on our website (using Quform shortcode inside a Code Block), where it displays properly, and works properly. We instead want to have the form open in a smaller-size popup window, so that visitors don’t lose their place on our website, plus feel like the form is something special.

    The possible options are to use:
    – Avada Popover element
    – Avada Modal element
    – Quform’s built-in popup feature

    Q: HOW CAN I BEST IMPLEMENT THIS PLEASE?

    Looking for the simplest, most robust, and future-proof method — with specific instructions (that a non-coder can follow).

    Would like to preserve the form’s display styling. I’m guessing that Quform’s built-in popup feature is the best approach?

    Any help hugely appreciated!

    NOTES:

    A. The shortcodes provided by Quform are:
    Standard: [quform id="2" name="quote_request_1"]
    Popup: [quform_popup id="2" name="quote_request_1"]Click me[/quform_popup]

    B. I’m running: Avada V-7.117, Quform V-2.20.0, WordPress V-6.5.2

    • This topic was modified 5 months, 2 weeks ago by induspray.
    #36656
    induspray
    Participant

    CORRECTION to last line above:

    B. I’m running: Avada V-7.11.7, Quform V-2.20.0, WordPress V-6.5.2

    • This reply was modified 5 months, 2 weeks ago by induspray.
    #36657
    induspray
    Participant

    also: I’ve seen references to inserting the shortcode into the page and “making it invisible”, but cannot figure out how to do that

    EXAMPLE:
    “…add the popup form shortcode or block to the page with no trigger content so that it is invisible: [quform_popup id="1"][/quform_popup]”

    it suggests to put into a Text Block element, but if I do that, the form simply gets displayed on the page, NOT in a popup window (and there’s no sign of any popup window)… I can’t find anyway to make it invisible

    I tried DE-selecting all 3 devices to display on (desktop, tablet, etc.), but that setting doesn’t take and always resets to all 3 being selected in blue

    Q: how exactly to I insert this code, and how do I make it invisible?

    • This reply was modified 5 months, 2 weeks ago by induspray.
    #36662
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #36663
    induspray
    Participant

    some progress…..

    I was able to stop the form from displaying on the page by doing what you suggested (“go to Forms – Settings – Performance and make sure that “When to load scripts/styles” is set to “Always””)

    did the other things as well, but when I click on the button, NOTHING HAPPENS

    Q: is there something else I need to do in the button settings?… eg. do I put something in for the button URL, or anything else?

    (PS: could not send you the Avada script zip file, my Gmail is blocking that type of file for security reasons)

    thank you!

    • This reply was modified 5 months, 1 week ago by induspray.
    • This reply was modified 5 months, 1 week ago by induspray.
    #36666
    induspray
    Participant

    as a test, I tried using the alternate basic method of triggering the popup form (via plain text link, instead of a button)… using the Avada Text Block element, I inserted this code into the page:

    [quform_popup id="2" name="quote_request_1"]Click me[/quform_popup]

    it also does NOT work

    in the rendered page, I can see the “Click me” text link, but hovering over it shows no target URL, and clicking on it does nothing

    note that when I hover over my BUTTON version, yes I do see a target URL displayed, but nothing happens when I click on it… otherwise, the button looks normal, and the rollover effect works

    #36667
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #36669
    induspray
    Participant

    OK, I’ve privately emailed you a link to a web page with a “test” button/link (that so far are not working)

    also, I did try toggling the 3-4 different popup script variations… did not fix

    • This reply was modified 5 months, 1 week ago by induspray.
    #36675
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #36678
    induspray
    Participant

    Ally:

    you said >> “For some reason the page has some JavaScript code that is effectively making any popup script loaded on the page useless. I don’t know what is loading this code, you could try checking if it is another plugin or the theme using this method: https://support.themecatcher.net/quform-wordpress-v2/troubleshooting/common-problems/plugintheme-conflicts

    OK, so I did some plugin conflict debugging as you suggested

    #1: I tried switching my theme to something other than Avada (I switched to “Astra”)… this did NOT fix (still no popup form)

    #2. I deactivated the plugin “FooGallery”, this did NOT fix (still no popup form)

    #3: I deactivated the plugin “FooBox HTML & Media Lightbox”, and the popup form FINALLY WORKED!!! (first time ever) *******

    the form seemed to display OK (but has no heading or intro text, which would be nice to have) — but it DID actually pop up!… see attached screenshot of the resulting popup form

    so now what?

    note: we definitely do use the FooBox Lightbox plugin on our website

    thanks,
    — Paul

    • This reply was modified 5 months ago by induspray.
    • This reply was modified 5 months ago by induspray.
    • This reply was modified 5 months ago by induspray.
    Attachments:
    You must be logged in to view attached files.
    #36685
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #36691
    induspray
    Participant

    RE: the fix “The FooBox option Disable Other Lightboxes at FooBox → Settings → Advanced must be turned Off for Quform popup forms to work. The option does not affect normal forms.”

    I tried this, but discovered that unchecking that option did NOT work

    however, when I also unchecked the next option “Try to deregister other lightbox scripts and stylesheets”, then it DID WORK

    so looks like BOTH options must be unchecked for the fix to work (my experience anyway)… see attached screenshot showing both unchecked

    I had to disable (uncheck) both of these:
    – Disable Other Lightboxes
    – Deregister Other Lightbox Files

    Q: will unchecking these have any adverse effects?

    • This reply was modified 5 months ago by induspray.
    Attachments:
    You must be logged in to view attached files.
    #36702
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #36704
    induspray
    Participant

    thanks…

    now I want to make my popup form wider, to eliminate having to scroll down… basically, I want the form to been seen in its entirety when it pops up

    I made a new “wide” version of our existing form, by utilizing a 2-column layout, and rearranging the fields within those columns… however, the displayed form is too narrow (see screenshot)

    if I try to modify the column settings, it limits my column widths to a total of 100 pixels, which is far too small (see screenshot)… how can I make this popup form wider please? thanks

    • This reply was modified 5 months ago by induspray.
    • This reply was modified 5 months ago by induspray.
    Attachments:
    You must be logged in to view attached files.
    #36710
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    • This reply was modified 4 months, 4 weeks ago by Ally.
Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy