Expandable form in Popup

  • Resolved wrbkelley

    (@wrbkelley)


    3 years, 9 months ago

    What I would like to do is have the form fields expand like they do on the example page I gave, but when I add the javascript to the Gravity Forms javascript area for a form that is embedded into Popup Maker, it triggers (because I have a console log call say Click! to show me that it is working) but the fields do not expand

    		$( ".expand" ).wrapAll( "<div class='expand-div' />");

		$("#input_10_3").one("focus", function(){
			$(".expand-div").slideToggle(1000);
			console.log( "CLICK!" );
		});

    is the javascript that I am using but it doesn’t wrap the elements classed as ‘expand’ with an expand div. I imagine that I need to target the pop-up itself so the ‘.one’ is not accurate.

    Any advice would be appreciated.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support mark l chaves

    (@mlchaves)

    3 years, 9 months ago

    Hey @wrbkelley,

    Thanks for writing.

    We saw your working expand example and, we looked at your code.

    Here’s what we think:

    1) First (as you probably know), this isn’t a plugin-related problem. It’s more of a custom code exercise for jQuery, HTML, and CSS.

    2) We don’t see any expand classes in the markup for your popup. But, we see 10 instances of that class in your Register For Expert Advice form at the bottom of the page.

    Since the expand class isn’t in the popup anywhere, this LOC (line of code) won’t do anything for that popup.

    $( ".expand" ).wrapAll( "<div class='expand-div' />");

    Suggestion: Try adding the expand class to the elements you want in the form inside the popup.

    3) You’ll definitely see the console.log message because your listener is correct. But, this next line won’t do anything for that popup either since your previous LOC doesn’t do the wrapping you expect.

    $(".expand-div").slideToggle(1000);

    Anyway, when we randomly add the expand class to a form field in the popup, your slideToggle() call fires.

    Here’s a demo.

    https://share.wppopupmaker.com/12uLoKpD

    We hope that helps.

    Please open a new thread if you have any questions specific to Popup Maker.

    Have a great day 🙂

    • This reply was modified 3 years, 9 months ago by mark l chaves. Reason: Corrections
    Thread Starter wrbkelley

    (@wrbkelley)

    3 years, 9 months ago

    So it turns out this post was unnecessary. I discovered that I can get the form to expand if the popup is the only Gravity form on the page. I was trying to use the javascript on a page with two Gravity forms and one conflicted with the other one. Once i moved it to its own page, it worked perfectly.

    Maria T

    (@mariatogonon)

    3 years, 9 months ago

    Hello @wrbkelley – thanks for letting us know!

    Happy to hear that it worked properly for you.

    Yes, you are correct! Note that most form plugins do not support using the same form in more than one place on the page. Since popups are hidden in the footer of your site and on the page, if the same form is inserted on the page elsewhere it can cause rendering or submission issues.

    Hey if you have a moment, could you please rate the plugin?

    We’d appreciate sharing your experience with everyone.

    Have a great day!

    🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Expandable form in Popup’ is closed to new replies.