Form does not submit correctly when detached and then reattached to DOM.

Thank you for your patience as we got through a holiday weekend in the US.

For the non-minified version of the JS file, you’d want to use define( 'SCRIPT_DEBUG', true );

Regarding the js in question, looks like it’d be from the following:

https://cloudup.com/c5fQymGVVXW

Is there a spot where the modal popup version is in place? the version I see in the sidebar now is just a page refreshing one. From the code-level detail, it looks like it’s probably getting caught on some part of the form processing that returns early, but doesn’t provide better context.

If you’re adventurous, you can check out includes/class-process-form.php around line 115, which is where the method is that handles the processing.

Hi, Thanks for the replies.

You were right, I had the context wrong and was not moving the wrapper with the form. This has gotten me a bit closer. It seems I’m now sending the data to the server, but I get neither an email nor added to the constant contact list. I hit the submit button and nothing obvious happens although it does make an AJAX call to the server.

When you say:

Is there a spot where the modal popup version is in place? the version I see in the sidebar now is just a page refreshing one.

Do you mean that there’s a setting in the plugin where I can choose one version or the other?

Thank you!

Do you mean that there’s a setting in the plugin where I can choose one version or the other?

With regards to that part, I just meant that I was using what I believe was a Constant Contact based form from our plugin, found in the sidebar, but it did nothing with regards to a modal popup like you’re trying to work with. So I wasn’t sure if that was the form you were debugging or if it was something else.

With the AJAX, I believe console errors could be coming through for your browser dev tools. If not, then it’s possible that the processing of the form is getting caught on one of the following:

// Don't check for submitted if we are doing it over ajax.
if ( ! $is_ajax ) {
	// If we don't have our submitted action, just bail out.
	if ( ! isset( $data['ctct-submitted'] ) ) {
		return;
	}
}

// If we don't have our submitted form id, just bail out.
if ( ! isset( $data['ctct-id'] ) ) {
	return;
}
// If we don't have our submitted form verify, just bail out.
if ( ! isset( $data['ctct-verify'] ) ) {
	return;
}

May help to make sure those are being included in the modal you’re trying to work with.

Ah, I see what you’re saying now.

I unhid it so I could do my troubleshooting.

Right above it is a link “Join Our Mailing List”. This detaches the form you were looking at and appends it to the popup overlay.

Looking this over, your modal popup should have all those fields I pointed out in the previous response, but I can’t guarantee they’re validating as well, from my end of the spectrum.

As an alternative approach, that I haven’t directly tested, and may or may not fit your needs, consider the following. Perhaps instead of detaching and fetching the form from the widget, embed the form code in the footer of the page, and hide it by default. Then when you click/trigger whatever you make the trigger to display the form, un-hide via js/css and have it pop up at that point. I know it’s something we’ve done in the WP admin for the plugin’s pages. Essentially have all the CSS in place to position it where you want, except a display:none; on it at first that gets removed upon clicking.

Alright. I did it the way you suggest, hiding and positioning it in the CSS and then showing it when the user clicks the link it just shows it. That worked well. Then I check for the success/error classes and pop it back up when the page reloads.

It’d be awesome if there were a way to submit the form and receive the response without a page reload, but this works fine for me now.

Thank you so much for the help!