Two Checkbox Options On Order Page
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:
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.
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 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: