I ran into an issue recently where I had a page full of case study excerpts. The client wanted to have the visitor request the full version of the case study through a modal that included a contact form.
I had multiple issues to solve:
- What modal would allow me to use Contact Form 7?
- How could I know which case study a visitor was requesting without setting up a separate contact form for over 20 different case studies?
After researching various options, including some modal plugins, but found them to be too limiting. So I decided to “roll my own” using Bootstrap’s modal as I knew it would be responsive so it would suit my needs for this responsive project.
For the source files, visit the GitHub page.
- Contact Form 7
modal.css(found in the GitHub repository)
- An array of items that have their own post ID (meaning you add them via post, page, or custom post type).
- The code in
##How to Use
###1. Install and activate the Contact Form 7 plugin
###2. Enqueue your CSS and JS for the modal
modal.js file and the
modal.css file to your theme directory. Load them property by adding the following to your
functions.php file in your theme:
Check your DevTools to make sure the modal scripts are loaded.
###3. Add a New Contact Form
Include whatever mail tag you need in the Message Body section of the contact form interface. This will let you know which item your user is requesting. For example, I named each of my case studies so I called the
[_post_title] tag in my contact email.
###4. Create or Edit a Template File and add the code in the
This can be one of your existing templates (
###5. Style your items as you wish!