Integrating PayPal Buy Now button into HTML Form

Question

This site has been a great help to me countless times, so I figured I would try asking a question. :)

I am building a simple form for my client. It is basically a contact form where members fill out their information and then use radio buttons to choose the type of membership they wish to purchase. Right now I've just got a PayPal button with multiple items/prices, but it looks clunky.

My question is, how can I "connect" the user's selection of the radio button to the Buy Now button on PayPal?

Any help would be greatly appreciated!

<div role="form" class="wpcf7" id="wpcf7-f96-p97-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/conference-registration/#wpcf7-f96-p97-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="96" />
<input type="hidden" name="_wpcf7_version" value="4.4" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f96-p97-o1" />
<input type="hidden" name="_wpnonce" value="abdb2f3a80" />
</div>
<p><span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First name" /></span> </p>
<p><span class="wpcf7-form-control-wrap last-name"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last name" /></span> </p>
<p><span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="example@email.com" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email" /></span> </p>
<p><span class="wpcf7-form-control-wrap telephone"><input type="tel" name="telephone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="Phone number" /></span></p>
<p><span class="wpcf7-form-control-wrap title"><input type="text" name="title" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Title" /></span></p>
<p><span class="wpcf7-form-control-wrap course"><textarea name="course" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Course that you are signing up for"></textarea></span></p>
<p><span class="wpcf7-form-control-wrap course-topic"><textarea name="course-topic" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Please put any course topic you would like to see in the future"></textarea></span></p>
<p><span class="wpcf7-form-control-wrap address"><input type="text" name="address" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Address 1" /></span></p>
<p><span class="wpcf7-form-control-wrap address2"><input type="text" name="address2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Address 2" /></span></p>
<p><span class="wpcf7-form-control-wrap city"><input type="text" name="city" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="City" /></span></p>
<p><span class="wpcf7-form-control-wrap state"><select name="state" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District Of Columbia">District Of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Iowa">Iowa</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Nebraska">Nebraska</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="Nevada">Nevada</option><option value="New York">New York</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select></span></p>
<p><span class="wpcf7-form-control-wrap zip"><input type="text" name="zip" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Zip code" /></span></p>
<h3>General conference</h3>
<p><span class="wpcf7-form-control-wrap member-type"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="member-type" value="Members: $100" checked="checked" />&nbsp;<span class="wpcf7-list-item-label">Members: $100</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="member-type" value="Non-members: $225" />&nbsp;<span class="wpcf7-list-item-label">Non-members: $225</span></label></span></span></span></p>
<h3>Hands-on classes cost extra</h3>
<p><span class="wpcf7-form-control-wrap extra"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Basic suturing: $100</span>&nbsp;<input type="checkbox" name="extra[]" value="Basic suturing: $100" /></label></span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Joint injection: $150</span>&nbsp;<input type="checkbox" name="extra[]" value="Joint injection: $150" /></label></span></span></span></p>
<p><span class="wpcf7-form-control-wrap how"><input type="text" name="how" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="How you heard about us" /></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

For simplicity's sake I used a Wordpress Plugin called Contact Form 7 to build the form.

Answer 1

You can use radio buttons instead of the classic drop-down menu. In order to allow options, PayPal uses a variable called "os". Just to provide a quick example, you should use:

<input type="radio" name="os0" value="Members: $100"checked/>
<input type="radio" name="os0" value="Non-members: $225" />

For example, if you want to add another option to your form:

<input type="radio" name="os1" value="Male"checked/>
<input type="radio" name="os1" value="Female" />

For further reference, please use the link below: Developer Portal