January 15

Integrate PayPal Button with Contact Form in WordPress


[UPDATE: 04/01/2015 Paypal re-direct revision. Added test form with auto-redirect after form submission.]
[UPDATE: 10/26/2013 Addition of the ‘on_set_ok’ action handler for the “Additional Settings” section.]

This is a tutorial I wrote to demonstrate how you can add a PayPal button to a WordPress site by integrating it with a contact form.

It works by allowing the visitor to submit a form and having the Paypal button appear automatically. The updated version, re-directs to your paypal payment page instead.

I’ve seen too many websites that offer a service with no request from the user and only a payment.  We know you want to get paid for your service, but most likely you need some input from a client. This is how to improve your payment process.

The requirements are: WordPress, Contact 7 form plug-in, and PayPal.

Here are the steps:
Install and activate the necessary plug-ins. Contact Form 7. Captcha for stopping BOTS and Contact Form to DB Extension are optional, but I strongly recommend them so you can track orders using the database.


1. The activated plug-ins will appear in the left column of the admin page.  Click on Contact and create  a new form with the “Add New” button.

2. Fill out the form with questions relevant to your service so your prospect feels you understand them from the get-go.  SAVE THE FORM.  Don’t forget this, because if you navigate to a different page, your changes will be lost.

contact form

3. Create your purchase button in PayPal and copy the code (this starts with the <form> tag).  Back in WordPress scroll to the section Messages and paste the PayPal button code.  Whatever content is here will appear after user clicks the “Send” button. Go to this link https://www.paypal.com/webapps/mpp/merchant-services-hub to create a paypal button.

4. Save the form again or in case you forgot to in step #2. (I usually don’t save when necessary)

5. Highlight and copy the short code after you save the form.  It starts with [contact-form-7 404 "Not Found"]

form messages

6. Go to the page you intend to have your order button and paste the short code.  Save and view that page.

paypal button

After a user submits the order form, the PayPal button shall appear.  Take note of the extra text I added to instruct the user if they don’t Pay their order will not be confirmed.

UPDATE (Tested in Chrome, Firefox, and IE11):
Alternatively you can add an automatic page re-direct to the Paypal payment page using the action handler ‘on_set_ok’.  This uses the unique id link provided from Paypal and loads that payment page, but it takes a few seconds. Add the following code to the ‘Additional Settings’ section of the Contact Form page as seen in the screenshot.  I collapsed several tabs above ‘Additional Settings’ so you can find it easier.

[code]on_sent_ok: “location.replace(‘https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&additional_params_from_your_button_go_here’);”[/code]

Get the specific parameter string from paypal by accessing merchant services:



Now that you have the entire link, paste in to the Additional Settings box like so:

advanced setting

Here is a functioning form with a re-direct to paypal, just enter your name and type yes:

Example Form

Email address

For more info regarding the additional settings, see the plugin’s documentation http://ideasilo.wordpress.com/2009/05/31/contact-form-7-1-10/  Since it takes a few seconds to load, you should replace the ‘Sent Message’ which I wrote in step 5 to something like “Please wait – You are being re-directed to the payment page.”

Another thing I recommend is adding two pages in WordPress for orders:  Payment Completed, and Order Incomplete. These will be good for “user friendliness”.   I hate trying to buy something online which takes me to a separate website with no design, because you lose a sense of security and cancel the order.  Another reason you will find studies showing “design is important”.

The completed page can notify and assure the “buyer” their order has been started immediately with a order reference number.  Whereas the order incomplete page can ask the user for feedback as what would they want improved since they cancelled.

If this tutorial helped you or you think something is missing, please write a comment below.

Tags: , , ,

Posted January 15, 2012 by Tom in category "Sales


  1. By Jeremy Myers on

    This was a helpful guide. Thank you.

    You mention at the end that it is a good idea to create two pages: Payment complete and order incomplete. Once created, how do you direct a buyer to one or the other of these pages?

    1. By Tom (Post author) on

      You’re welcome. When you create a payment button in Paypal’s website, there is an option there for typing 2 URLs.

  2. By ben on

    what if i need a drop down choice of different payment prices for different services offered? how would i do that ? and how do i make sure that the form comes to my email ?

    1. By Tom (Post author) on

      Ben, I suggest creating separate Paypal buttons for various prices. It is much easier than having to code one payment button with different prices and yes it requires coding.
      I did this for a different site using a “pricing table”, take a look at examples at http://www.smileycat.com/design_elements/pricing_tables/ and http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/

      It is the most popular and usable design pattern for comparing prices.

  3. Pingback: Wordpress Tweaks | Pearltrees

  4. By twohedz on

    Thanks for posting this. I am going to implement it very soon. I presume I can style the Paypal section easily enough.

    With the additional order pages (Payment Completed, Order Incomplete) you recommended, where do you define returning to one or other of them depending on the success or failure of the payment?

    Great stuff – thanks again

    1. By runastartup on

      You’re welcome. You can define the URLs for success/cancel payment while logged into Paypal. It is an advance option when creating a Paypal Buy button.

  5. By Lillie Ruby on

    Having 2 problems, Captcha isn’t working with the contact form. That may because I’m not undersatnding where to place it or if I have to actually place it. Also, after I select the paypal button, the form responds, ” Validation errors occurred. Please confirm the fields and submit it again” and never makes it to paypal. The same button residing by itself on the page connects to paypal properly, so I know the paypal button is functional…..back to try again.

  6. By moonpick on

    This is great, I was actually looking for something like the Contact form to DB Extension. The reason is because I do this differently…Instead of showing the button pop up, simply clicking send redirects them to the paypal page. There was no way of tracking orders, now with the DB extension it works, thanks!

    The way I do it (I think it’s a better way) is to add the following in the “Additional Settings” in CF7:

    on_sent_ok: “location.replace(‘https://www.paypal(.)com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YourButtonID’);”

    Replace “YourButtonID” with the value=”RandomNumbersHere” you find in the button you generated from paypal. This is a much more effective way! Hope this helps someone!

    1. By Tom (Post author) on

      Sounds good. I’ll have to test that method myself. Where did you get the info about what goes into “Additional Settings” ?

    2. By runastartup on

      Sounds good. I’ll look into it, however how do you know what to enter in the “Additional Settings” section of CF7?

    3. By twohedz on

      @moonpick:disqus – I’ve implemented your version – thanks for sharing. Your way means one less drop-off point on the way to make a payment.

  7. By VisualStar on

    @ Moonpick , really love your way ! Thank you for this. Only… is it possible send the “os1” field/variable with it ? Because we have recurring billing options on our website and we want to fetch the username and send it to paypal when the client makes the payment. Is this possible ?

  8. By Sian on

    Thank you for your tutorial. I’ve followed along and it’s working really well. One thing I’ve noticed is that when the form is submitted and the Paypal options/button appear bellow the form the values entered into the form disappear. Is there anyway to stop this from happening? I think it may confuse my customers who may think they need to input their details in the form again before making payment

    1. By Tom (Post author) on

      That would have to be set in the plugin options for the contact form, but i’m not sure why you would want that. Since when 99% of forms are submitted successfully they show a confirmation and clear the fields for the next submission.

  9. By Sian on

    Thank you for your tutorial. I’ve followed along and it’s working really well. One thing I’ve noticed is that when the form is submitted and the Paypal options/button appear bellow the form the values entered into the form disappear. Is there anyway to stop this from happening? I think it may confuse my customers who may think they need to input their details in the form again before making payment

  10. By Stephen Leung on

    Thanks for the article. The email confirmation will send by paypal, right? Also, for the thank you page, if I added the buy now button, customer will leave my site, how can i setup a page and say thank you when they leave?

  11. By ivo on


    Thanks for the great tip. But probably I am missing something. For the second step, I am adding the code: on_sent_ok: “location.replace(‘https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BUTTON-ID-HERE’);” adding the Button ID, but the form only refreshes on the page. Is there something I am doing wrong?


    1. By Tom (Post author) on

      Hi Ivo, it appears that Paypal no longer uses only a button ID, but there are additional parameters to paste. So when you get your Paypal button code, copy and paste the entire URL into the additional settings box. I have updated this post to reflect the changes.

  12. By Marius on

    Hey, i copied your redirect to paypal page code and made changes, but it did not work. I realized that quotation marks have different formatting. Remove formatting from “, ‘ and ; symbols to make redirection work.

    1. By Tom (Post author) on

      Well if you paste your button code or a link to where it’s located, maybe I can troubleshoot it.

  13. By Jules on

    Thanks for the tutorial! Such a great solution except for one thing:
    When redirected to PayPal, if the individual doesn’t complete the transaction, the form submitted … but there’s no payment. For purposes of a registration for an event, you have to compare your form submissions with your PayPal receipts to see if anyone didn’t pay.

    1. By Tom (Post author) on

      You’re welcome Jules. You’re right about matching the form sent with the payment, but in that situation it is better to code the payment using Paypal’s API

  14. By Weston on

    I like this idea. Thank you. However, I discovered it isn’t working in Internet Explorer. When you try to “add to cart” it just sits there. No errors. It just will not do anything. It works fine in other browsers.

    1. By Tom (Post author) on

      Which version of IE? I just tested it on Windows 8 with IE11 and it works fine. Try upgrading your IE browser.

  15. By Danny on

    Thanks for this. I added a little tweak.

    Set the on ok to run a function on_sent_ok: “myFunction();”
    and then added a function to pull quantity from the form and add that to the paypal button

    function myFunction() {
    var numbers = document.getElementsByName(“how-many-people”)[0].value;
    document.location=’https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BUTTONID&quantity=’+ numbers;

Leave a Reply