Integrate PayPal into Contact Form 7

– Posted in: Plugins, Tutorials

I use the Contact Form 7 plugin (created by Takayuki Miyoshi ) for all my WordPress websites. I love how easy it is to work with and create forms.

The other day, I was throwing together a form to offer some web security for my clients. I wanted to have a web form that would allow them to give all pertinent information and include payment. However, I had a tough time figuring out how to do that. I searched all over the Internet for any way to work this out and finally came across some information that I thought might help. But it was not complete. Finally, I fiddle around with my form and the ideas I had come across on the Internet.  The result works well, so I thought, perhaps I should write a little tutorial in case there are others who might be confused.

Let’s assume for the sake of time, that you have your form all set up except for the PayPal part. We’ll move from there.

In order to integrate PayPal into Contact Form 7, you need a PayPal button. To get that, you need a PayPal account.

Go into the Merchant Services and create your button as if you were going to add this button to your website. I made mine a Buy Now button because it is a service I am offering. Make sure you make your button complete. If you need to customize your button with some advanced features, such as dropdown menus, you would do that at this point.

You may not know this, but you can change where Contact Form 7 redirects after submission. All you need is a URL. So, let’s look at what we need from the PayPal button.

When you save your button, you are sent to the page that has the code for your buttons. The URL needed for this procedure is on the “Email” tab. Copy the whole URL, including the id number.

Integrate PayPal in Contact Form 7 - PayPal Button Code

The simplest way I’ve found to do this is with a little JavaScript action hook – on_sent_ok. I’m not real savvy using JavaScript, but I’ve learned a few things along the way. This hook lets you specify a JavaScript code to run after your form submission is successful.

Now, let’s jump back to our contact form. Down toward the bottom of your contact form management page is a section labeled, “Additional Settings.” Take that URL that you copied and paste it in the box supplied.  

on_sent_ok: "location = 'http://example.com/';"

Integrate PayPal in Contact Form 7 - Additional Settings

Finally, save your form and try it out. After you fill out the form and hit submit you should be automagically redirected to your PayPal Payment page. If it doesn’t work, you may need to check to see if Ajax is working correctly on your site. Remember, this is a JavaScript hook; therefore it needs JavaScript to make it work.

Thank you for visiting my blog. I hope this little tutorial has helped you in some way. Please leave me a comment below.

1 comment… add one
Tim January 8, 2015, 9:57 pm

I was getting a “Page Not Found” error from PayPal once I was redirected. It said it was from an outdated bookmark.

Here’s a thread with a solution that worked for me: https://stackoverflow.com/questions/20478657/im-trying-to-ingegrate-paypal-payment-with-contact-form-7-in-wordpress-and-my/27853820#27853820

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.