Form in modal window not working

Permalink
Hi there,
I have rebuilt my website, and the forms are not working
I created a stack with an express form inside, and then in several pages I added a modal block and inserted the stack inside. Everything looks great, but when I submit the forms, they go to a 404 error.
You can see it in beautebook.com/pricing
Any help?
As usual, thank you!

byvictoria
 
frz replied on at Permalink Reply
frz
Have you tried the form directly in the modal without the stack?
What did you use to make the modal window?
Have you tried pointing the form at a different page for results?

Wouldn't shock me if the form didn't behave well in a modal, or from a stack, as it calls back to itself.
byvictoria replied on at Permalink Reply
byvictoria
Hi Franz,

Have you tried the form directly in the modal without the stack?
The modal block doesn't have that option, does it?

What did you use to make the modal window?
I added the modal block from Fundamental, which has the option to add a stack

Have you tried pointing the form at a different page for results?
Yes I did, and I have tested the email set up and a stand alone form as well and they all work.

You can see it in this contact form:
http://96.127.142.114/~bluekite/beautebook.com/contact...

Thank you!
V.
byvictoria replied on at Permalink Reply
byvictoria
Just in case, this is my environment data

# concrete5 Version
Core Version - 8.5.2
Version Installed - 8.5.2
Database Version - 20190925072210

# Database Information
Version: 10.3.22-MariaDB
SQL Mode:

# concrete5 Packages
Background Image and Overlay (0.9.9), Fundamental (4.0.7), HTML+PHP Code Block (1.0.2), Portfolio Grid (1.1.2), Rescan All Files (0.1.5), Simple Gallery (1.0.9), Whale OWL Carousel (2.5.8)

# concrete5 Overrides
blocks/express_form/templates/beautebook/view.js, blocks/express_form/templates/beautebook/view.php, blocks/express_form/templates/beautebook/view.css, blocks/express_form/templates/beautebook, blocks/express_form/templates, blocks/express_form, blocks/autonav/templates/services/view.php, blocks/autonav/templates/services/view.css, blocks/autonav/templates/services, blocks/autonav/templates, blocks/autonav, blocks/fundamental_pricing_table/templates/beautebook/view.php, blocks/fundamental_pricing_table/templates/beautebook, blocks/fundamental_pricing_table/templates, blocks/fundamental_pricing_table, blocks/portfolio_grid/templates/portfolio/view.js, blocks/portfolio_grid/templates/portfolio/view.php, blocks/portfolio_grid/templates/portfolio/view.css, blocks/portfolio_grid/templates/portfolio, blocks/portfolio_grid/templates/portfolio-3-col/view.js, blocks/portfolio_grid/templates/portfolio-3-col/view.php, blocks/portfolio_grid/templates/portfolio-3-col/view.css, blocks/portfolio_grid/templates/portfolio-3-col, blocks/portfolio_grid/templates/portfolio-6-col/view.js, blocks/portfolio_grid/templates/portfolio-6-col/view.php, blocks/portfolio_grid/templates/portfolio-6-col/view.css, blocks/portfolio_grid/templates/portfolio-6-col, blocks/portfolio_grid/templates, blocks/portfolio_grid

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
LiteSpeed

# Server API
litespeed

# PHP Version
7.2.28

# PHP Extensions
bcmath, bz2, calendar, Core, ctype, curl, date, dba, dom, enchant, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, intl, ionCube Loader, json, ldap, libxml, litespeed, mbstring, mysqli, mysqlnd, odbc, openssl, pcntl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_sqlite, Phar, posix, pspell, readline, Reflection, session, shmop, SimpleXML, soap, sockets, SourceGuardian, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tidy, timezonedb, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 180
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 150
max_input_vars - 6000
memory_limit - 512M
post_max_size - 64M
upload_max_filesize - 80M
ic24.api.max_timeout - 7
ldap.max_links - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
JohntheFish replied on at Permalink Reply
JohntheFish
What modal block are you using?
JohntheFish replied on at Permalink Reply
JohntheFish
Just tried your form

Whilst the test site form is at
http://96.127.142.114/~bluekite/beautebook.com/contact...

After submit the modal tries to redirect to
https://www.beautebook.com/~bluekite/beautebook.com/contact/submit/4...

For the test site, the url should be something like
http://96.127.142.114/~bluekite/beautebook.com/contact/submit/499#f...

I suspect an incompatible configuration. For example, if you have set the canonical URL or manually entered a URL for the submit page?

Also, what happens with the same form block directly on the page, or the same stack directly on a page? (ie, is it the form that has an issue, the modal that has an issue, or the stack that has an issue?)
byvictoria replied on at Permalink Reply
byvictoria
Yes, it had a canonical url and the form was supposed to redirect to the home page.
I took all of that out, and tried again. After filing the contact form, I get a 404 on this url
http://96.127.142.114/~bluekite/beautebook.com/contact/submit/521#f...

I have tried both the form and the stack with the form, both without the modal, and it works. You can see it here
http://96.127.142.114/~bluekite/beautebook.com/forms/contact-form...

The modal is the modal block that comes with the Fundamental theme.

Thank you!
JohntheFish replied on at Permalink Reply
JohntheFish
The test contact is set up to return to the same page, not to redirect to the home page. So it doesn't eliminate that possibility from the cause.

Have the test submits I made been recorded by the site?
byvictoria replied on at Permalink Reply
byvictoria
Hi John,
When you first tested the form, it was configured to be redirected to the home. After you told me about that and the canonical configuration, I edited the block so it wouldn't redirect anywhere, and took out the canonical url.
Now the form shouldn't redirect, at least according to the option I selected from the block itself.
Would you like the login credentials for the site?
Thank you again...
V/
JohntheFish replied on at Permalink Reply
JohntheFish
Did any of my tests of the modal form get through?
byvictoria replied on at Permalink Reply
byvictoria
No, they didn't....
JohntheFish replied on at Permalink Reply
JohntheFish
In that case its the submit url that is not being handled.

I am wondering if its something to do with your site URL being an IP address and the ~/home path. Perhaps something in that is throwing the core out. You could try it all at a more usual URL and see if that affects the error.
byvictoria replied on at Permalink Reply
byvictoria
Hi again John,
No, it is not the url, I had my domain pointing to the website and I had to take it out again because I realized the forms weren't working....
JohntheFish replied on at Permalink Reply
JohntheFish
Looking in the dev console at the modal/stack contact form and the inline form, the difference between the two is that opening the modal takes the previously hidden modal content and appends it at the end of the document, outside of what concrete5 would normally consider to be the page.

All other aspects of the 2 forms are equivalent. Same data submitted. URL building is the same.

Can you try turning off the captcha and see if that makes a difference.
byvictoria replied on at Permalink Reply
byvictoria
Hi John,
The captcha is on a custom made block template, I took it off now, you can check it at
https://www.beautebook.com/contact...
Thank you!
V.
JohntheFish replied on at Permalink Reply
JohntheFish
Tested, same bug. With that being eliminated, the only cause remaining is the form being moved in the DOM when the popup opens.

There may be an option in the popup JS that decides how it attaches or chops up the DOM (there is for the core lightbox). You could adjust that to keep the form in the same place or at least inside the c5 page (rather than moving it outside as the Foundation JS does).

I have implemented similar reveals of forms using my Magic Tabs and Button Nav addons without issue. But my reveals all keep the form markup in the same place in the DOM and show that, rather than chopping it about the DOM.
byvictoria replied on at Permalink Reply
byvictoria
Thanks a lot John!
I'll take a look into that...
byvictoria replied on at Permalink Reply
byvictoria
I got your form :-)

Name:
JohntheFish

Email address:
john@xxx.co.uk

Subject:
Work with us

Message:
Testing inline form
byvictoria replied on at Permalink Reply
byvictoria
Hi John,
Thank you for your message...
I am using the modal block that comes with the Fundamental theme.