Bootstrap v4 support

[joostthehost]

Hi there,

Are you planning on supporting Bootstrap v4 in the (near) future?
The first v4.0.0-alpha is out, and the second alpha is expected any moment. I don't expect to see mayor differences in the bootstrap form output/classes compared to bootstrap v3.

However, maybe it's an idea to start a v4 branch to start the work on this?

[felixarntz]

Hi back,

I have already thought about this... it would probably need to happen in a new plugin so that it does not break for users of the existing plugin that still use Bootstrap 3. However, your idea of a v4 branch sounds good, this would basically allow to manage both plugins in one repository - which is generally not a good practice, but since these two plugins would basically be exactly the same except for the markup, it might be the most efficient solution here.

Alternatively, we could add a switch to the existing plugin where Bootstrap 3 is default (for back compat), but one could choose 4 instead if needed. I don't really like this idea though, I think a plugin should serve one purpose - this sounds like a little overhead to me.

I've just started to use v4-alpha, and I'm working on two other plugin projects right now, but Bootstrap 4 for Contact Form 7 is definitely a plugin I have planned on creating. A realistic date for me to get to this would be some time January 2016. Sounds good?

[joostthehost]

:) nice to hear you already have considered this.

I agree with creating two separate 'plugins' for this cause. As for the different branches; i.m.o. the main branch should reflect the 'main' bootstrap version currently used by the public. Therefore, I could foresee the v4 branch replacing the current, v3 branch as it becomes more widely used in the next year or so.

I myself also started using the v4-alpha (for a site i'm trying to put together at the moment). It's my own site, therefore I'm willing to take the rist of using the alpha verion ;-)
Your planning for January 2016 is maybe a bit too slow for my liking, but then again; I don't want to rush you into things. Maybe I can help start the work on editing the existing markup etc. for compatibility with bootstrap v4?

[felixarntz]

Thanks for your offer to help! Like I said, I could do it in January (maybe earlier), but feel free to get started. I'm not sure how much has changed in v4 regarding the form markup, so maybe it's not even THAT much work :)

I just created a v4 branch. Simply fork the repository and work in that branch if you like.

To get started, basically all you need to work with can be found in the classes directory - all the Bootstrap 4 markup is being generated there. It would be perfect if we can keep it so that only these class files differ between the two plugin versions - this way, it's easy to maintain both simultaneously in case of admin improvements/issues etc.

Thanks again for your help, I appreciate it!

[joostthehost]

No problem :) I just forked the repository. I hope to get something started in the next couple of weeks :)

I just found this overview on the official 'Migrating from v3 to v4' support page. Could be helpfull!

[felixarntz]

I just released a new version, including the fix to the issue you discovered (but you probably saw that already). Anyway, just make sure you update your fork :)

[robertandrews]

I'd like to check in on this...

I installed your v4 branch (showing as 1.2.4 in plugin manager). With debug switched on, my WordPress back-end and front-end echoed the following...

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Notice: wpcf7_add_shortcode is deprecated since Contact Form 7 version 4.6! Use wpcf7_add_form_tag instead. in /home/mysite/public_html/wp-content/plugins/contact-form-7/includes/functions.php on line 357

Through the plugin manager, an update was available to 1.4.2. I updated, and this got rid of the error messages.

I had planned to write to say, I'm not sure if the resulting output in my form is Bootstrap 3, 4 or neither, but it looks a lot like the code has reverted to the standard Contact Form 7 output from before installing your v4 plugin ...

<div role="form" class="wpcf7" id="wpcf7-f1787-o1" lang="en-GB" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/#wpcf7-f1787-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1787">
<input type="hidden" name="_wpcf7_version" value="4.8">
<input type="hidden" name="_wpcf7_locale" value="en_GB">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1787-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
<input type="hidden" name="_wpcf7_nonce" value="c1b7b44242">
</div>
<p><label> Name (required)<br>
    <span class="wpcf7-form-control-wrap cxt-name"><input type="text" name="cxt-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Email (required)<br>
    <span class="wpcf7-form-control-wrap cxt-email"><input type="email" name="cxt-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Company (required)<br>
    <span class="wpcf7-form-control-wrap cxt-company"><input type="text" name="cxt-company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Subject<br>
    <span class="wpcf7-form-control-wrap cxt-subject"><input type="text" name="cxt-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
<p><label> Message<br>
    <span class="wpcf7-form-control-wrap cxt-message"><textarea name="cxt-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

However, I think I see the reason...
For some reason, WordPress had chosen to deactivate the plugin to an error. When I reactivated it, I now see a Bootstrap 4 form.

Now, in my case, I am hoping to achieve a couple of other things:

• My form is in a Bootstrap 4 modal, and I don't want the submission to load a page, I want it to close the modal. (Not only is that better but, as it stands, form validation feedback is not given until the whole page loads to the resulting destination page).

• I am using a Material Design framework called Propeller over Bootstrap 4, and I will need to accommodate some custom classes. That CSS also includes some custom classes for validation styles, which I may like to accommodate.

[wilmardo]

Disclaimer: Just started with Bootstrap and first time using this plugin

Yesterday I came across this plugin and started adapting it for Bootstrap 4 (since I am using v4), fork
Using the overview (linked by @joostthehost) I renamed the classes (simple search+replace) but the horizontal refactoring done in Bootstrap v4 is a bit to much for me since I am not home in your source.
Also the default output seems to be inline and not like CF7 vertical, is this something that needs fixing or is this the default?

Should I make a PR for these changes? Since it is not yet complete I am a little hesitant :)

[felixarntz]

@wilmardo Thanks for working on this! I think it would be best for this to live as a separate plugin. This one right here has always been for Bootstrap 3, and we cannot simply change that. An alternative would be to include both and add an option to choose between version 3 and 4, but I don't really like that since it would bloat the plugin and overcomplicate it. Once both plugins are in the repo, we should definitely clarify though that one is for version 4 while the other is for version 3.

[juliusbangert]

Hi, where is the best place to get the forked plugin that supports bootstrap v4? I went to the fork linked by @wilmardo above, but when I install it says 'Version 1.4.4 By Felix Arntz' and prompts me to update to 1.4.5 which I think is the original v3 plugin. What's the best thing for me to do?

[gidomanders]

The reason you get version 1.4.4 by Felix Arntz is because it was forked from that version. As long as the fork is not updated, WordPress will find an update for this plugin. You could just ignore the update message, since it is not that much of an important fix.

[willsza]

I'm having trouble using the input-group on bootstrap 4, anyone else?

[wilmardo]

@juliusbangert The fork is not in production state, I started with the v4 support in the hope to kickstart the development. The fork is more of a suggestion, the classes are up to date but as stated in my comment above but the changed horizontal alignment in bootstrap v4 has not been done.
Therefore the fork has not been updated since the comment, feel free to adapt and improve :)