Contact Form 7 inside a Bootstrap 3 modal… possible? Yup!


Contact Form 7 Inside a Bootstrap Modal?

Avatar for Ben Kaminski  

October 24th, 2014

24 comments

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.

*This tutorial assumes knowledge of both the Contact Form 7 plugin for WordPress and the Bootstrap 3 modal. You can learn more about Contact Form 7 and Bootstrap 3 Modals by clicking those links!

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:

Contact Form 7 Inside Bootstrap 3 Modal

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!



Leave a Comment Below...

Your email address will not be published.

This article currently has 24 comments.

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

    @VietPham, good call! I always assume (which I know isn’t correct) that most are already putting the BootStrap JS in the footer, but — you’re right, and I agree — those that are having issues might want to look at this recommendation. Thanks Viet Pham! 😎

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

Hey!

How to make this contact form stick to the page after contact form submission?

Can you help me please?

Please reply ASAP!

    Avatar for Ben Kaminski

    Ben Kaminski
    Post author

    Learn Javascript dude!
    πŸ€”πŸ€“πŸ˜€

    No, seriously… I need more information other than “stick” to be able to help. Please contact me.

HEY! I followed your steps and made a contact form. But when I click on send button, instead of showing ‘Thank You’ message, modal fades out. Is there any way to stick modal to the page even after clicking send.

Hope you’ll reply my message.

Thank you!

Hi there

Everything works just great but I got a question: what if there are required field?

In my case, the fields become unclickable.

Thanks

Marius

    Avatar for Ben Kaminski

    Ben Kaminski
    Post author

    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.

Hey this was super useful! thanks! other quick question – in mobile the input text areas are running over the edges of my modal window. Not sure how to fix this.. i’m sure its basic but i’m stuck on it! πŸ™‚

    Avatar for Ben Kaminski

    Ben Kaminski
    Post author

    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!

Thank you so much! I was trying to use advanced custom fields, with the ACF + Contact Form 7 additional plugin, and couldn’t get it to work with the modal. You saved the day!

My friend, if you ever travel to Bucharest, I have a beer for you!

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~

    Avatar for Ben Kaminski

    Ben Kaminski
    Post author

    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.

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.

    Avatar for Ben Kaminski

    Ben Kaminski
    Post author

    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.

Hey! This is fantastic, thank you for putting this up. I am hoping you’ll clue me in on how to do the cancel button? Everything works, except that part, and I agree it’s necessary since it’s a modal…

THANKS SO MUCH!!

    Avatar for Ben Kaminski

    Ben Kaminski
    Post author

    To get the cancel or close button to work, assuming you’re using Bootstrap 3 would be like this:

    It’s the “data-dismiss=”modal” which fires the script to close the window.
    Hope it helps!

Thanks for that. Really useful.

Thanks! This tutorial save me a lot of research time.

Related: , , , , ,

Footer Meta:


Copyright © 2009 - 2017 benkaminski.com