PayPal Price from Contact Form 7 Select Option

So you want to get an email registration, and get paid via PayPal at the same time? Let’s say you have a simple registration form with only two options (could be many more) One option is 25.00 and one is 10.00. How can you add these priced as options in a drop down select, considering that Contact Form 7 doesn’t really use pipes like you’d expect? Well after a little experimentation, and a little coding, this can be realized fairly easily.

Let’s Begin

For simplicity’s sake, we are going to show you our initial tests. Of course you need the two corresponding buttons created within the PayPal website interface.

<label> Select Entry Type | Entry Fee: $25 (Adults) $10 ( Kids 12 years of age and under)
[select* paymentamount id:paymentamount "Adults $25.00|5JS5XXXX2RH24" "Kids 12 & Under $10.00|6Z8NXXXXRUS6N"]</label>
[submit "Send"]

on_sent_ok: "my_redirect();"

The last part goes on the "Additional Settings Tab" of CF7.

Simply ignore what the options actually are here for now, and forget that there’s CF7 pipes used here, you don’t need those either. They are here mainly to keep track of the actual options for the JavaScript we will need. The CF7 shortcode is pretty simple right? It should have been a simple matter to create the script needed, but since the aforementioned “pipe” thing doesn’t work as I anticipated without some complicated filters, we went another route. Although you can add the below JavaScript into the CF7 text area, it will add paragraph tags, and your code will not validate so, this has been added to the HEAD.

<script>
    function my_redirect() {
    if (document.getElementById('paymentamount').options[document.getElementById('paymentamount').selectedIndex].text =="Adults $25.00") 
    { url = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5JS5XXXX2RH24";
    }
     else {
   if (document.getElementById('paymentamount').options[document.getElementById('paymentamount').selectedIndex].text =="Kids 12 & Under $10.00") 
     url = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6Z8NXXXXRUS6N"; 
 }
      window.location.href = url;
}

It should be pretty clear what we are doing here, but basically we just examine the option that is selected and change the url to match the option, we aren’t even revealing our button ids except in the HEAD. This JavaScript could easily be shortened, but leaving the logic as is is good enough for us to illustrate the solution to easily sending PayPal to the correct hosted button depending on the value of a select option. You could also add a confirm, or create additional logic if necessary to suit your own needs.

Enjoy,

Elmer

Beach Web Design

Elmer Twilley Jr. specializes in providing clean and appealing website designs that perform well in search engines. Beach Web Design is currently serving Panama City Beach, FL, the surrounding communities of 30A, and nationwide.

Comprehensive WordPress Filter List
February 13, 2017

Styling Contact Form 7 Error Output
September 9, 2016

Contact Form 7 – Styling Messages Beautifully
June 30, 2016

WooCommerce Add Offer Button
September 18, 2015

Custom Code Creation
August 10, 2015