Today our team worked on a project where an online membership course has two options to signup. One option is for a one-time payment and the other option is for a monthly recurring payment. The objective was to offer the consumer the option to include or exclude the recurring service with purchase of main front-end product.

There are many ways to do this, but the technical aspect involved depends on how you’re taking payments. In our case, we’re using Office Auto Pilot (Ontraport) order forms, which aren’t exactly shopping carts to have simple options. So we needed a way to change which order form the consumer saw depending on which option he or she chose, this being our checkbox options:

Checkbox Options on Order Page

For high-quality programmers, this kind of task is usually a piece of cake, but me and the other team member assigned to make this work were determined to find our own way to make it work without having to hire another programmer.

After doing some searching and fiddling around with code for a few hours, we came to this working coding.

We first included a call to javascript code at the top like this:

Then we added some CSS styling to hide the two forms from initial view, identified as #ffl and #noffl, the #noffl being the version of the form without the recurring membership subscription.

The next set of javascript really defined the functionality, which was to show the #ffl div section if the consumer clicked to ‘Include’ the coaching program and hide it if unchecked, and to show the #noffl div section if the consumer clicked to turn down the recurring coaching program and hide it if unclicked. This code worked for us, with one small bug: if both boxes are checked, it will show the form of whichever was checked second. Since the instructions clearly explain to check just one, however, it felt like a small bug not worth pursuing (due to our own programming limitations…)

The next section begins the actual form code with the check boxes, seen here:

Note that the form and fieldset tags remain open, so this code is insufficient on its own. The rest must be included.

The next section includes the two versions of the order forms, set to appear/disappear depending on how the boxes are checked.

I removed the actual order form code as it’s way too long to show here for example sake, but using those identifiers should be good enough for you to do a test on your own to make sure you’ve got the forms displaying correctly depending on which option is checked.

Once those codes are complete, you must include the closing tags for the form and fieldset as seen here:

The actual order page is for a product called Six Figure Blogging, and this is the way our order page looked when we were done:

Six Figure Blogging Class