You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi, I have been trying to solve this problem on WordPress StackExchange for several days now.
The aim is a contact form opening in a Bootstrap modal upon a button click in my site header. Here is my intended setup:
WordPress site running a custom theme...
Theme hand-built using Bootstrap 4 and Propeller, which you are aware of.
Contact form handled by Wordpress plugin called Contact Form 7
Plugin called Bootstrap for Contact Form 7, to make CF7 forms use Bootstrap mark-up.
I have overcome the issue of how to hard-insert a Contact Form 7 form in to a PHP theme file, using Wordpress' do_shortcode function.
But I had two outstanding issues:
Form mark-up should use Bootstrap and Propeller mark-up and classes.
Form submission was not happening using Ajax as it should with Contact Form 7. On submission, modal should have closed - instead, submission loaded a next-action page.
I think I overcome the mark-up issue by finding out how to construct a Contact Form 7 form using custom mark-up and classes, but also by using the WordPress plugin Bootstrap for Custom Form 7. With that combination, I have got the attractive Material Design text inputs you list on your docs.
But I can't seem to get everything I want, and I think it is the combination of Javascripts that is at fault...
Here is the combination I have been using, and why...
Custom Form 7 uses http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0
Bootstrap for Custom Form 7 plugin uses http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2
Note that, to comply with 1. above, I am deregistering WordPress' own built-in version of JQuery and registering http://code.jquery.com/jquery-3.1.1.slim.min.js
With that combination, here is my relevant scripts section...
<script type='text/javascript' src='https://code.jquery.com/jquery-3.1.1.slim.min.js?ver=3.1.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/www.contexthq.com\/wp-json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/themes/context/js/propeller.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&ver=2.0'></script>
However, the problem here is that ajax submission does not take place upon form submission - on submit, it just loads to the next page.
Now, if I let WordPress use its own version of JQuery, my scripts section looks like this...
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/www.contexthq.com\/wp-json\/","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-content/themes/context/js/propeller.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&ver=2.0'></script>
In this scenario, ajax submission does take place successfully - but it spoils the formatting of my form input labels... text in the inputs is overwriting the labels themselves.
If I let WordPress use its own version of JQuery and disable all Propeller CSS and JS, everything works okay - but that's because I am losing all the nice Material Design of my site, including the inputs and labels.
However, I have just made an additional finding...
If I remove the Propeller class .pmd-textfield-floating-label from my form inputs, the form input formatting is just fine. With no text movement/animation expected, there is no overlap. I just a) have to live without floating labels and b) I notice that the input boxes are not using the Roboto font.
I am happier now that I have found this solution, but I am still curious... first, is there anything wrong with .pmd-textfield-floating-label?
Most importantly, what JS does the combination of Bootstrap 4 / Propeller really need? Do you see any conflicts in what I have currently... ?
Hi, I have been trying to solve this problem on WordPress StackExchange for several days now.
The aim is a contact form opening in a Bootstrap modal upon a button click in my site header. Here is my intended setup:
I have overcome the issue of how to hard-insert a Contact Form 7 form in to a PHP theme file, using Wordpress'
do_shortcode
function.But I had two outstanding issues:
I think I overcome the mark-up issue by finding out how to construct a Contact Form 7 form using custom mark-up and classes, but also by using the WordPress plugin Bootstrap for Custom Form 7. With that combination, I have got the attractive Material Design text inputs you list on your docs.
But I can't seem to get everything I want, and I think it is the combination of Javascripts that is at fault...
Here is the combination I have been using, and why...
http://code.jquery.com/jquery-3.1.1.slim.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0
uses http://www.contexthq.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2
Note that, to comply with 1. above, I am deregistering WordPress' own built-in version of JQuery and registering
http://code.jquery.com/jquery-3.1.1.slim.min.js
With that combination, here is my relevant scripts section...
However, the problem here is that ajax submission does not take place upon form submission - on submit, it just loads to the next page.
Now, if I let WordPress use its own version of JQuery, my scripts section looks like this...
In this scenario, ajax submission does take place successfully - but it spoils the formatting of my form input labels... text in the inputs is overwriting the labels themselves.
If I let WordPress use its own version of JQuery and disable all Propeller CSS and JS, everything works okay - but that's because I am losing all the nice Material Design of my site, including the inputs and labels.
However, I have just made an additional finding...
If I remove the Propeller class
.pmd-textfield-floating-label
from my form inputs, the form input formatting is just fine. With no text movement/animation expected, there is no overlap. I just a) have to live without floating labels and b) I notice that the input boxes are not using the Roboto font.I am happier now that I have found this solution, but I am still curious... first, is there anything wrong with .pmd-textfield-floating-label?
Most importantly, what JS does the combination of Bootstrap 4 / Propeller really need? Do you see any conflicts in what I have currently... ?
Head...
Foot...
The text was updated successfully, but these errors were encountered: