Contact Form 7 inside a Bootstrap 3 modal… possible? Yup!
Obviously the title says it all but when I was searching for a way to accomplish this, I could find nothing! I was actually kind of shocked. That, in-turn, sparked my interest and I decided to give something a try. The solution I came up for this was actually rather simple I was just approaching it the wrong way. I’ll explain later.
A Bootstrap modal, as you should be familiar with, looks something like the image above, underneath the title.
This image was taken from Bootstrap’s website so it’s the most basic modal one could create using only Bootstrap’s CSS. Anyhow, the Bootstrap reference guide on the website gives you those nice “close” or “save changes” buttons by default in their sample code. After many hours wasted trying to get those built in buttons to work with WordPress and Contact Form 7, I decided to take a different approach.
My thought process was this: Contact Form 7 uses shortcode that you place inside a WordPress page and it spits out a nice web form that you created. Many WordPress users rely on Contact Form 7 for their form-building needs. Being able to use this form within a Bootstrap modal is rather exciting to me. I understand if you’re not as excited as I am but here’s how I did it.
Being a WordPress Theme Developer, I am always on the Codex. So, sometimes I’ll remember seeing something in there, then at a later date when I actually need it like now I go back and search for it. I remembered seeing something called:
So, the name really says it all right there “do_shortcode”, in other words… process the shortcode. Contact Form 7 relies on shortcode, I can now use shortcode in my PHP files… see where I’m going here?
In my WordPress theme that I am creating, I have the normal files that are in every WordPress Theme and I also decided to make some include files. Especially for the modals… incase we wanted to have multiple modals with different forms in them. Also, I could only load the modals on pages that had the triggering buttons… anyhow regardless of how I did it, the modal code remains the same. The only thing we do differently here replace either your manually built HTML form or your “basic” modal code with some PHP. If you want to use different forms in different modals, I highly suggest using includes. Either way that’s up to you.
So my include file had the following code to display the modal. This is the code Bootstrap usually has you paste in your page. Although, I made a static HTML form in hopes that I could somehow connect that to Contact Form 7 so you will see a form in with the basic modal code:
My next step from there was to delete my pre-made form and just say bye-bye to it.
So, now I have to build the form itself in Contact Form 7 so I can get the shortcode it will produce to use in my include file. In trying to keep this tutorial short and sweet, I’m just going to use the basic built in contact form that comes with Contact Form 7. Said created contact form spit out a shortcode that looked like this:
Now that I have my generated shortcode, I can go to my include file for the particular form I’m using here and, well… “do_shortcode”!
Now that our PHP is doing shortcode, I was able to just place a Contact Form 7 generated form within a Bootstrap Modal! My result looks like this:
Some of you might notice I added a “cancel” button. Well, I did this because I liked having that option at the top and bottom of the modal window. I just added an extra line of PHP to be able to add a class to the newly created “cancel” button so I could style it and align it accordingly. I’m not going to cover adding the cancel button unless someone requests it of me. This tutorial should explain how to easily use the Contact Form 7 Plugin for WordPress inside a Bootstrap 3 Modal. Best part of this being, if you want to use multiple forms, you can make multiple include files, or if you only have one form, you can just add the code to your footer.php so it is loaded in every page. Very cool stuff!
I realize I kind of rushed through this so feel free to ask any questions.
As always, I hope you found this useful and I look forward to any questions, comments, and improvement suggestions!
Sept. 6 2017 Update:
I’ve noticed this post still receives a fair amount of traffic so I wanted to provide an update. This current website is running Bootstrap 4.0 Beta and while the syntax has changed a little, the same basic principals work. You can do some neat stuff with jQuery too, I’ll show you:
I’ve placed the Bootstrap modal code inside of an include file and call it from footer.php like this:
Here is the code, using Bootstrap 4, for the modal include I created:
A little scripty:
And since I wanted the “Contact” link in the navbar and right sidebar to fire the modal on a click event, as well as place the focus of the mouse in the first input field of the contact form (Your Name:), I wrote some simple jQuery to handle the events:
“userName” is the unique ID I assigned the “Your Name:” input field using the Contact Form 7 dashboard interface. The first function binds the modal to the click event of the class I created “bk-contact-modal”, the second function sets the focus of the mouse to inside the “Your Name:” input field so the user does not have to click, they can just start typing their name.
Try clicking on the Contact links in the navbar or sidebar for a working example using Bootstrap 4 and WordPress. The only problem I’m seeing so far is when the modal fires, it causes the page to scroll to the top. I’ll fix that and update here. Could be a bug since Bootstrap 4 is still Beta.
-happy coding.
I have followed this tutorial and the form displays fine, but my form doesn’t seem to perform any of the standard error checking nor does it actually send the email.
I have other forms included in the_content() on my site and they work fine. Are there any issues with embedding the short code in a template?
I have debugged my theme and found no errors.
Dave, check out the answer I left Andrew above. This sounds like conflicting Jquery or Javascript. Even though the theme had no errors, if it’s already programmed to close the modal “on submit” or “on click”, it’s doing what it’s programmed to do, so that would not produce an error. How you’re using your modal’s javascript can also interfere with existing scripting. In your modal’s HTML, do you use the “data-dismiss” data attribute? That might be interfering. Just some thoughts. Good luck Dave.
This is great and fairly basic for new users, nice! Big question is more along the lines of advances CF7 issues such as validation & modal closures.
When the CF7 form is put inside the bootstrap modal and the user clicks submit, the modal closes and the end user has no idea if their submission went through, or even to see if there were validation errors.. Has anyone came up or found a solution to this issue? I don’t see the purpose of using CF7 within a bootstrap modal if the modal does not stay open upon submit.
Cheeers~
Works fine for me. I would imagine, somewhere in your theme’s .js files, there’s conflicting scripting telling the modal to close or “dismiss” on click event or on submit event. Finding this script and modifying it would probably help in your case. It’s not going to be an error if its functioning properly. Knowing Bootstrap like I do, I bet this is a real simple script change.
For example, I have two separate modals with two contact forms in them, so my Jquery looks like this:
Yours might be set up differently. Hope this helps.
Hey Jamie.
You would fix this issue with the form fields in CF7 by wrapping them in Bootstrap from classes as such:
I’m actually using a mixture of Bootstrap and Fontawesome Icons here, but wrapping the form fields in the BS classes “input-group” and “form-group” should take care of the responsiveness of the inputs.
**Pay special attention to the classes added to the shortcode. I didn’t know that was even possible until recently, but you can add Bootstrap classes to the shortcode to help make the form more responsive.
Let me know if that works!
Hey Marius,
I’m not able to replicate this issue on the site I’m using this CF7 in modal on. If I click submit, the fields that require validation will show red, as well, I am able to click into the fields and edit my responses no problem. Is it possible that you may have a div covering the form? Perhaps the div has a set “z-index” that’s causing the issue. Usually when you can’t click into form fields, it’s a z-index issue. You could try setting the z-index of the input fields higher to see if that helps, but with me being unable to replicate the issue, it’s hard to diagnose. If you have a link, that would be helpful. Visit the contact page and send me the link if you would like further assistance. Thanks again Marius.
Hi Ben,
I was trying to send you a message from your CF7 form within the BS modal for testing but unfortunately it does not work anymore. I get “There was an error trying to send your message. Please try again later”. I have also an issue on my end from my smartphone. The focus on field is weird. Seems there is a gap between cursor and fields when typing. Do you also have the issue on your end?
Regards
Greg
Greg,
Thank you for informing me of this. I too am seeing the same error. I’ve been experimenting with page caching and minify settings. Although, since it’s a mail error, it probably has to do with my email settings in CF7, I also have some manual email setting overrides in my functions.php due to past errors with CF7. Either way, thanks again for pointing that out… I will correct this mess I have made and post here when complete.
Greg, you can reach me at “my first name” @ “my url address”
Thanks.
Of course, none of the above. ReCaptcha integration issue. Removed ReCaptcha for the time being, it was throwing console errors. The contact form functionality is restored. Give it another shot if you want. Again, thanks Greg. I appreciate the heads up.
Also, getting the same issue on iOS 11 as you mention above. My mobile traffic to this site is extremely minimal, although, that’s not an excuse to not fix. I should check from mobile more often.
Going to try removing the focus and see if that solves.
Going to have to further investigate, it’s not being caused by the modal focus state. There must be some CF7 CSS interference somewhere as it’s happening across all major browsers and a static BS4 modal doesn’t have the same condition.
Cheers
I think I might understand the issue some guys were faced. Do you put the bootstrap js or any other js in the header? You should try to move them to the footer and check again. Let’s me know if It works or not. Good luck to all!
P/s: I am talking about the modal bootstrap auto close when you click submit although some fields were wrong
Leave a Comment Below...