How To Integrate Contact Form 7 With PayPal

How To Integrate Contact Form 7 With PayPal

This is something I've been looking to do for a while, and just now got around to do it. Basically I am going to show you how we created this form as a means of integrating PayPal with Contact Form 7 and ultimately create a seamless flow from website to order fulfillment. First of all, why don't you give it a go. Go on man don't worry, the tutorial will still be here when you get back.

[button-yellow url="https://foamers.net/client-payments/" target="_blank" position="left"] Check Out My Live Demo [/button-yellow]

Okay so the reason I decided to do a Contact Form 7 PayPal integration, is because I wanted to have simple way to automate my client payment process - the way it was before, when a client wanted to make a payment I would literally have stop what I was doing and go into my PayPal account to generate the invoice. And even then if the client didn't (or claim they didn't) get the invoice, I'd have to resend the whole thing over again. Needless to say that was super lame and irritating.

Then I remembered this plugin that I'm already very happy with called Contact Form 7. Contact Form 7 is like the Ricky Gervais of twitter followers, if followers were total downloads and average user ratings combined. @rickygervais; and I was already using PayPal, so I'm thinking "Hey a contact form 7 paypal integration makes sense, why not try to combine the two?"

I bet we could take the contact form 7 values (post or get) and pass them to paypal for payment and that shouldn’t be a problem, right?

I bet we could take the contact form 7 values (post or get) and pass them to paypal for payment and that shouldn’t be a problem, right?

So I did a few searches on how to integrate contact form 7 with PayPal and to my surprise I could not find a single thread about it (or rather, not one of any use). So here it is!


Creating a contact form in WordPress

Now assuming you've already installed the Contact Form 7 WordPress plugin (and are somewhat familiar with it) lets go straight into creating the form. If not, go to the Plugins tab, search for “Contact Form 7”, download, install, and activate.

Thant done, we are going to have to go into the settings page for Contact Form 7 and replace the context of the Contact form 1 Form field with the following.

<div id="hideme">
  <label for="id1">Client payment:</label>
  [text* name  watermark "Name"]
  [text* last-name  watermark "Last Name"]
  [email* email  watermark "Email"]
  [text* project  watermark "Project"]
  <label>Payment type</label>
  [radio payment-type label_first use_label_element "Deposit" "Full payment" "Donation"]
  [text* payment-amount  watermark "Payment amount ($)"] <small><i>Ex: $500.00, $1000.00, etc.</i></small> [submit  class:submit "Continue"] </div>
<div id="tip"> Upon confirmation you will be redirected to PayPal to enter in your credit card information. A PayPal account is <span>not required</span> to make a credit card payment. </div>

Now that the contact form is done we want to add it into a page to see what it will look like. Open the settings page for Contact Form 7 and open Contact form 1 or whatever the name of the form is you just created.

Each contact form has its own tag (shortcode), such as

{contact-form-7 id="1234" title="Contact form 1"}

.
To insert the contact form into your page, copy the shortcode and paste it into the page content.

Now would be a good time to preview the page to see what it will look like. And of course don't expect your form to look like the one in my example, not yet anyway, and that's okay. That is because we're missing all the necessary CSS (cascading style sheet) attributes to the form elements.

Styling contact form 7 text field submit button etc

If you want the form to look like mine, open up your theme's styles.css file and add the following style rules at the bottom of the existing ones. Now again this is only if you want your form to look like mine, if not you can just skip it or make your own it's up to you.

/* Payment form */

.payment-form {
	position: relative;
	width: auto;
	height: auto;
	padding: 40px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #398f14;
	background: #FFF;
}
.payment-form label {
	display: inline-block;
	position: relative;
	font-size: 18px;
	margin-bottom:15px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#223739;
}
.payment-form input[type="text"], .payment-form input[type="email"], .payment-form input[type="tel"] {
	background:#f8f8f8;
	border:1px solid #cecccd;
	border-radius: 5px;
	margin-bottom:15px;
	color:#223739;
	font-size:22px;
	line-height:18px;
	width:320px;
}
.payment-form .submit, .edit :hover {
	cursor:pointer !important;
}
.payment-form .submit {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
	box-shadow:inset 0px 1px 0px 0px #ffe0b5;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
	background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
	background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
	background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
	background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
	background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306', GradientType=0);
	background-color:#fbb450;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:1px solid #c97e1c;
	display:inline-block;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:17px;
	font-weight:bold;
	padding:6px 11px;
	text-decoration:none;
	text-shadow:0px 1px 0px #8f7f24;
}
.payment-form .submit:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
	background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
	background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
	background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
	background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
	background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450', GradientType=0);
	background-color:#f89306;
}
.payment-form .submit:active {
	position:relative;
	top:1px;
}
.payment-form .edit {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#666666;
	font-family:Trebuchet MS;
	font-size:17px;
	font-weight:bold;
	padding:6px 11px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.payment-form .edit:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff', GradientType=0);
	background-color:#f6f6f6;
}
.payment-form .edit:active {
	position:relative;
	top:1px;
}
.payment-form .wpcf7-mail-sent-ok {
	border:none;
}
.payment-form .wpcf7-not-valid-tip {
	position: absolute;
	z-index: 100;
	top:-17px;
	left:0;
	background:red;
	opacity:0.5;
	filter:Alpha(opacity=50); /* IE8 and earlier */
	border:1px solid #cecccd;
	border-radius: 5px;
	color:white;
	font-size:22px;
	line-height:18px;
	vertical-align: middle;
	width:330px;
	height:38px;
}
.payment-form .wpcf7-response-output {
	font-size:14px;
	line-height:18px;
}
#tip {
	display:block;
	background-color:#fffbcc;
	opacity:0.8;
	filter:Alpha(opacity=80); /* IE8 and earlier */
	border:1px solid #b19b00;
	border-radius: 5px;
	color:#000;
	padding:10px;
	font-style:italic;
	visibility:hidden;
}
#tip span {
	text-decoration:underline;
	color:red;
}

Now to override the default styles of contact form 7 and use our styles instead, I added a few overrides in my theme’s functions.php. Open up your theme's functions.php file and place the following code into it.

add_filter( 'wpcf7_form_class_attr', 'wpcf7_acceptance_form_class_alt' );

function wpcf7_acceptance_form_class_alt( $class ) { 
		return $class . ' payment-form'; 
		} 

This functions tracks down the default form class and replaces it with our new class. Alternatively, if you have more than one form, or different ones in different pages, you could rewrite this function as so:

function wpcf7_acceptance_form_class_alt( $class ) {
 
 	if(is_page('payment')){ return $class . ' payment-form'; } 
 		else; { return $class . ' other-form';}
 		
}

Now we just have a little bit more to go, but style-wise it should look GREAT!

Contact Form 7 PayPal Integration

Open the settings page for Contact Form 7 and select the form that we created earlier called Contact form 1. Scroll down a bit and find the Messages fields. Locate the # Sender's message was sent successfully text field (should be the very first one) and replace the context of that field with the following.

messages

<div id="confirm">
  <h2>Please verify order confirmation and proceed</h2>
  <br />
  <label>Name:</label>
  [name] [last-name]<br />
  <label>Email:</label>
  [email]<br />
  <label>Project:</label>
  [project]<br />
  <label>------------------------</label>
  <br />
  <label>[payment-type] amount: $</label>
  [payment-amount]<br />
  <a href="https://www.paypal.com/cgi-bin/[email protected]&cmd=_xclick&currency_code=USD&amount=[payment-amount]&item_name=[project]"  class="submit">Continue to Payment</a> <a href="javascript:fadeIn('hideme');" class="edit">Edit / Undo / Redo</a></div>

That done, go head and scroll down some more to find the Additional Setting field and insert the follow line in to it.
additional_settigns

on_sent_ok: fadeOut('hideme');

Finally there are a couple of functions here that I haven't mention fadeIn and fadeOut() - basically they allow me to fade form elements in and out, thus making everything flow much more smoother and user friendly.

To add these functions open your themes header.php file or equivalent and add the following JavaScript before the closing head tag:

<script type="text/javascript">

var fade_in_from = 0;

var fade_out_from = 10;

function fadeIn(element){

	var target = document.getElementById(element);

	target.style.display = "block";

	var newSetting = fade_in_from / 10;

	target.style.opacity = newSetting;

	fade_in_from++;

	if(fade_in_from == 10){

		target.style.opacity = 1;

		clearTimeout(loopTimer);

		fade_in_from = 0;

		return false;

	}

	var loopTimer = setTimeout('fadeIn(''+element+'')',50);
	
	fadeOut('confirm');
	


}

function fadeOut(element){

	var target = document.getElementById(element);
	var tip = document.getElementById('tip');

	var newSetting = fade_out_from / 10;

	target.style.opacity = newSetting;

	fade_out_from--;

	if(fade_out_from == 0){

		target.style.opacity = 0;

		target.style.display = "none";

		clearTimeout(loopTimer);

		fade_out_from = 10;

		return false;

	}

	var loopTimer = setTimeout('fadeOut(''+element+'')',50);
	
	if(element == "hideme"){tip.style.visibility = "visible";}else{tip.style.visibility = "hidden";}
	

}

</script>

So what do we have here?

I sum what we did was very simple, we made a simple contact form with a submit button that says "Continue". On submitting, we then made a javascript call to hide the form fields thereby giving the illusion of a second step in the process. In the meantime, we took advantage of the respond message option to display the form data and extract the required values to create the PayPal payment button. Finally just to reinforce the illusion of the "second step", we provided a second button that says "Edit/.." to hide the respond message and return you to the form again, which function is the same as the first only in reverse order.

And that about does it. Thank you all for being patient; I know that was kinda long but what do you think? If you’ve got any questions, comments, insults feel free to tell us what you think by leaving me a comment. Also if you think this post has helped you in anyway or you liked it, perhaps you can just say thank you on Google, Facebook, email etc.

WordPress Theme Customization

lawn-careDoes your website need a few tweaks here and there, call or email us anytime. We can help you!
408 661 4699

Did you like this post? Here is what you need to do next:

Subscribe it's FREE

  • Tarik

    Thanks for this tutorial, really cool.

    When I pasted the function in function.php I got server error. Not sure what’s wrong about the code.

    • dave collado

      First of all, thank you for reading my tutorial.

      The code is okay. If your are getting a white screen of death or an error message at the top of the page it may very well be that you pasted the code after the standard php closing bracket – else or the closing bracket may be missing all together.

      Closing bracket looks like this:

      ?>

  • lmagassa

    You’ve made many peoples lives a whole lot better!

    Great tool! Simple, but elegant. Now for a quick question.

    After the user completes the payment, are they forwarded back to the contact form?

    Lassana

    • dave collado

      That’s very nice of you to say, thank you!

      If you need to redirect the user back to the website, you can set this up with paypal directly – look under Profile – > My Account – > My selling tools -> Website preferences

  • tracersa

    Hi,

    Thank you for an awesome tutorial and yup very true that you couldn’t find a good working tutorial before this.

    I have quick question. I added your code and it works great but there is one poblem. Whether you confirm and do the payment or not as soon you click the “Continue” button, an email is send out immediately. Can you suggest on this??

    Thanks

    • dave collado

      Thank you so much!

      Yes! You are absolutely correct. The Continue button is what actually submits the form directly to you and the “Continue to Payment” button is actually just a dynamic paypal button of sorts.

      This is basically the same issue one might have, if for example, you had a shopping cart, and say you added some items to your cart, you then proceeded to check out but, abandon the payment gateway before the transaction was fully realized.

      The shopping cart would still record the order, perhaps it would say order pending, incomplete order – and unfortunately that does happen all the time.

      However, if you prefer, you can disregard the email all together and have it sent to [email protected] and simply wait till paypal send you it’s own email giving you the green light.

      Thanks again for your kind words 🙂

      • tracersa

        Sounds like a good idea. That was helpful. Thank you 🙂

  • Addy

    Hi Dave

    Firstly like to thank you for providing this its amazing and has helped me so much.

    I have a question I have set custom widths to my fields some as small as 25px. The problem I was hoping you could help me resolve is when the form validates I get a huge red box over my fields. Its great but for the small fields its a real pain as it looks bad,

    I was wondering is it possible to make the input/drop downs/text areas turn read instead?

    Thanks

    Addy

    • dave collado

      Hi Addy thanks , glad you like it.

      You can change the height/width of the “huge red box” in the stylesheet. First find the class in question – is this case it is:

      .payment-form .wpcf7-not-valid-tip

      Next simply find the width attribute within that class – in this case it is:

      width:330px;
      height:38px;

      That should do it.

      Also, if you think our post has helped you in anyway… help us out and leave us a kind review on our new Google page, please!! 🙂

      https://plus.google.com/116582151150472243670/posts

      Thank you so much!

      • Addy

        I managed to get it the way I wanted by using your tip and did the following:

        payment-form.invalid input.wpcf7-not-valid{
        border:1px solid red;
        background:#f0e3e3;

        Another question as my form has a lot of fields. Once you submit is it possible to have the page go up to where

        “Upon confirmation you will be redirected to PayPal to enter in your credit card information. A PayPal account is not required to make a credit card payment.”

        instead of just where it was submitted maybe some sort of anchor?

        Thanks

        PS I will be happy to write you a review for providing this great solution.

        • dave collado

          Yeah, that’s a great idea Addy.

          You can add an anchor some where in the “Upon confirmation you will be redirected to PayPal to enter..” section.

          Then in the javascript look for this line:

          if(element == “hideme”){tip.style.visibility = “visible”;}else{tip.style.visibility = “hidden”;}

          Cut and replace it with this:

          if(element == “hideme”){tip.style.visibility = “visible”; window.location = $(‘#myAnchor’).attr(‘href’);}else{tip.style.visibility = “hidden”;}

          Also remember to replace #myAnchor above with whatever name you give your anchor.

          Cheers!

          • Addy

            I have tried the solution you provided but no luck. It loads the confirmation page for 2 seconds then redirects to page not found.

            I place the anchor right before the confirmation message and also tried in the same result

            any reason why it is not working?

            Addy

  • Pingback: Contact form 7 Ajax form submission load to top issue | BlogoSfera()

  • Addy

    Is there a way if the payment is done and confirmed to redirect to a specific page on my website. And the same for when they cancel payment?

  • Vivek Darak

    Thank you Dave. I was successfully able to integrate this feature on m website.

    With a little tweak I changed the payment-amount to Drop Down.

    Ex. I replaced [text* payment-amount watermark “Payment amount ($)”] with

    [select your-Order “Enter you oder value|$200”
    “Enter your order value|$500”
    “Enter your order value|1000”]

    • dave collado

      Thank you so much @vivekdarak:disqus So glad to hear you found this post helpful!

  • Flick

    Thanks for a brilliant tutorial 🙂 My client is thinking about getting some sort of booking system (since email replies can be slow as you’ve pointed out) and I chanced upon your detailed step-by-step; as much as I love new plugins, I love being able to extend existing ones more (CF7 and the community never cease to amaze)

    One question I do have, based on your current demo – which I love by the way – is that the Edit button at step 2 effectively cancels the entire transaction and ‘starts again’, so it works more like a ‘cancel’ button? Presumably its tricky retaining the same values from before?

    Second question: From an admin perspective, I guess this means that you would receive the first email via CF7 then a second email from Paypal to confirm payment. How easy do you find it, personally, to marry the two up and record your orders/payments in an organised way?

    And on a related note: are you using the CF7 to DB plugin (or the new Flamingo one) by any chance to record the transactions?

    Thanks very much again.

    • dave collado

      Thank you @wpsnippets:disqus glad you like

      it. In regard to both your questions, I’m sure it could be possible to auto fill the fields dynamically with parameters that could be passed via the edit/cancel button.

      Similarly, you could extend CF7 to work directly with paypal very similarly to so many other CF7 extensions already available – however this is beyond the scope of the tutorial, but who knows, maybe next time.

      Cheers!

  • Rob

    Hey Dave,

    Not sure what I’m doing wrong, I followed your instructions to the T… I submit the form, and it does not seem to move to the next section, i.e.. messages

    http://robbyhunter.com/contact-forms/bdpdev2/

    Let me know what you think. Thanks!

    • Hi Rob, very hard for me to say without examining the backend to see what is really going on. You are welcome to send us an email [email protected], if you’d like to have us implement this for you.

  • Akash

    Hi,

    Awesome Tutorial for integrating paypal with contact form7.

    I have a query that on confirmation message there is a message” A PayPal account is not required to make a credit card payment”. but after redirecting to paypal page, it is required to have a paypal account. there is no other option to pay without paypal account.
    one more query is in which account will the payment debited, i mean there is no button id aor merchant account information used.

    thanks.

    • Akash, thank you very much!

      To answer your questions:

      1 – Is there any other option to pay without paypal account? Once you get redirected to paypal you should be seeing this: http://awesomescreenshot.com/0134ibxx9e

      2 – Where is the button id aor merchant account information? Take a look a the subheading above titled: Contact Form 7 PayPal Integration – take a look a t the HTML that we are adding to the Message field.
      Where [email protected] replace [email protected] with your paypal email.

      Best,

      Dave C

      • Akash

        hello dave,
        thank you very much for your quick reply.
        one thing more i want to ask is that whether this method is useful for any custom registration form and with any other payment gateway other than paypal.
        thank you very much.

  • I know this article is a bit old, but it shows up high on searches.

    I made a plugin that adds PayPal to Contact Form 7 – https://wordpress.org/plugins/contact-form-7-paypal-add-on/

  • Daniel Barenkamp

    Very good tutorial for developers. Looks kinda easy and for those, who do not want to code themselves, they could use a plugin like https://codecanyon.net/item/contact-form-7-paypal-integration/18893258

  • Shweta

    not working