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.
If you found this article helpful, please share and follow on social media.
Leave a Comment Below...