-
AuthorPosts
-
March 30, 2023 at 9:36 pm #1403044
I’d like to use a contact form shortcode in my megamenu, I can get it to show up by pasting the shortcode in the “Navigation Label” but it does not submit or validate. Is this possible?
April 1, 2023 at 8:01 pm #1403241Hey jaimemerz,
Please include a link to your page and an admin login so we can examine.Best regards,
MikeApril 4, 2023 at 8:26 pm #1403549This reply has been marked as private.April 5, 2023 at 5:39 pm #1403619Hi,
Thanks for your patience and the link to your site, I tested your menu form in a mega menu item on my demo site and it gave me the success message, so it seems that it should work.
I see your child theme has some customized files, have you tested with the parent theme activated so the customized child theme files are not used? Also try with your plugins deactivated, perhaps there is a conflict.Best regards,
MikeApril 7, 2023 at 10:32 pm #1403842Thank you for your reply. Through trial and error we have found that the styles.css file in our child theme is the cause of the form not working. When we remove it from the child theme directory, the form will validate and submit. However when we do not have the styles.css file in the child theme directory none of our customizations to the theme (including ones we’ve done in the parent theme and in Quick CSS) will load. Currently our styles.css file in the child theme directory is empty. It has no CSS code in it save for this:
/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*//*Add your own styles here:*/
If you check out the link again you will see what I mean. Do you know why this would be?
Thanks!
April 8, 2023 at 5:38 pm #1403888Hi,
Please note that when you remove the child theme style.css it breaks the child theme and deactivates it:
I recommend restoring it so that you can export your child theme settings at Enfold Theme Options ▸ Import/Export ▸ Export Theme Settings File
Then to test the parent theme you can activate it and import the child theme settings so you don’t lose your customizations.
The cause is more likely the customized files in the child theme.Best regards,
MikeApril 11, 2023 at 12:29 am #1404077Thank you Mike for your reply. I’m getting closer! We have done what you said and have been able to determine that the form will not validate or submit on the Parent when the main menu is set to “display as icon”. It will however validate and submit when we have the main menu set to “display as text”. Any ideas on why that would be?
April 13, 2023 at 1:25 am #1404290Hi,
Thanks for the feedback, I see what you mean but I don’t see any errors in the browser console, will the form submit if it has no required fields?Best regards,
MikeApril 21, 2023 at 8:47 pm #1405200I just removed all required feels and the form still does not submit when the main menu is set to “display as icon”.
April 22, 2023 at 3:00 pm #1405232Hi,
Thanks for the feedback, I found that the form is wrapped in the menu element link attribute, even though you have no link set the “a” still has “#”
while I can unwrap the link from the menu item with this:function custom_script() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ $('#avia-menu').one('click', function(){ $('#av-burger-menu-ul .menu-item-3979 a').contents().unwrap(); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'custom_script');
This didn’t help, so I then tried on my test site to append the contact form to the menu and while this worked the form action always reloaded the page so you don’t see the ajax response. So I don’t think this is going to work.
But I believe that I have found a workaround, on my test page linked below I have the desktop menu set to icon and full width like your site, but I have no menu items, instead on the homepage I have a full-width contact form with the font set to light and transparent, and I use this css to hide the contact form until the menu overlay is shown and then the menu overlay is hidden, giving the effect that the contact form is inside the menu:
and it shows the ajax response.
#top.home form.avia_ajax_form { display: none; } .av-burger-overlay-active #top.home form.avia_ajax_form { display: block; } .av-burger-overlay-active #top.home #header_main .av-burger-overlay { display: none !important; } .av-burger-overlay-active #top.home #wrap_all #av_section_1 { background-color: #000; } .av-burger-overlay-active #top.home .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 1; } .av-burger-overlay-active #top.home .av_header_transparency .logo img.alternate { opacity: 0; }
Try my test page and see if this might be something that would work for you.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.