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!
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!
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.
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.
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
# 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
What modal block are you using?
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?)
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?)
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!
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!
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?
Have the test submits I made been recorded by the site?
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/
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/
Did any of my tests of the modal form get through?
No, they didn't....
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.
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.
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....
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....
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.
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.
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.
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.
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.
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.
Thanks a lot John!
I'll take a look into that...
I'll take a look into that...
I got your form :-)
Name:
JohntheFish
Email address:
john@xxx.co.uk
Subject:
Work with us
Message:
Testing inline form
Name:
JohntheFish
Email address:
john@xxx.co.uk
Subject:
Work with us
Message:
Testing inline form
Hi John,
Thank you for your message...
I am using the modal block that comes with the Fundamental theme.
Thank you for your message...
I am using the modal block that comes with the Fundamental theme.
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.