Malformatted form inputs with combination of scripts - what's correct?

[robertandrews]

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...

1. Bootstrap 4 advises http://code.jquery.com/jquery-3.1.1.slim.min.js
2. Propeller advises http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
3. Custom Form 7 uses http://www.contexthq.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0
4. 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&#038;render=explicit&#038;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&#038;render=explicit&#038;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... ?

Head...

<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.contexthq.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

Foot...

<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&#038;render=explicit&#038;ver=2.0'></script>

[piyush-digicorp]

Hi,

We will look into it and will get back to you ASAP.