Integrate PayPal Button with Contact Form in WordPress

[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 submit a form and having the Paypal button appear automatically.
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. (Video tutorial also available)

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

What else do you want in this tutorial?

View Results

Loading ... Loading ...

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.

plugins

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.

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:
Alternatively you can add an automatic page re-direct to the Paypal payment page using the action handler ‘on_set_ok’.  What this does, is uses the unique id 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.

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

advanced setting

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.

23 Comments on "Integrate PayPal Button with Contact Form in WordPress"

  1. Jeremy Myers says:

    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?

  2. ben says:

    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 ?

  3. ben says:

    forgot to begin with – firstly – thanks for the great tips and helpful page !!

  4. Toni says:

    This absolutely works. No plug-in that I’ve encountered was able to do this. Than you much!

  5. twohedz says:

    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

  6. Lillie Ruby says:

    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.

  7. moonpick says:

    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!

    • Tom says:

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

    • runastartup says:

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

    • twohedz says:

      @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.

  8. VisualStar says:

    @ 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 ?

  9. uno-de-piera says:

    Thanks.

  10. Sian says:

    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

    • Tom says:

      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.

  11. Sian says:

    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

  12. Stephen Leung says:

    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?

Trackbacks for this post

  1. Wordpress Tweaks | Pearltrees

Got something to say? Go for it!


+ five = 12