Tory

No, it works fine that way.

Yea… thats the problem. The file is on the server, but when the plugin converts it, it doesnt work (it points to a 404)

Thanks Robin

Thanks for the reply!

I’m using GeneratePress theme and have not added any new plugins in months.

Sure. I used a link element that contained a data attribute, for example, data-city.

<a data-toggle="modal" data-city="New York" title="Form popup" class="open-AddDialog" href="#addDialog">Click Here</a>

When that link is clicked I use jquery to fire the pop-up.

<script>
jQuery(function($) {
    $(document).on("click", ".open-AddDialog", function () {
       var city = $(this).data('city');
       $(".modal-body #city").val( city );
    });  
});
</script>

That piece of JS pops up a Bootstrap Modal with the Contact Form 7 shortcode in it. (Bootstrap is optional, I’m just familiar with it, and it made implementation easier for me. You’ll need to load the BS 4 library if you use the code below).

<div class="modal hide" id="addDialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Form</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    [contact-form-7 id="1" title="CF7 Form"]
                </div>
        		<div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Make sure you add an id to your CF7 field. Using the example above, I added id=city. You can do this in the form editor by adding id:city (or whatever you want your id to be) to the field: [text city id:city]

Place all of the above on your page and when you click the link it should pop-up your CF7 form with the field pre-filled out with the text you put in the data- attribute in that link. In this case, it would fill out the City field in the form with New York.

Update: I noticed some of the CF7 js files were being unloaded on the page, so they are now loading, and when I get the error when trying to send an email, I see the orange border now.

And with the help of the Flamingo plugin, I was able to identify why it was being marked as spam. Everything is working now. Thanks.

It’s working now. Thanks!