MachForm Community Forums » MachForm 4

1. williamansley
   Member

   People have been asking how you can make a payment form with check boxes to allow the user to indicate which items they want to purchase aligned with the number fields in which the user can type the quantity of the item they would like to purchase. This is actually easy enough to do, although somewhat labor intensive. The key is to use multiple check box fields, each with a single check box.

   Here is an image of a sample form I created: http://s26.postimg.org/pqw7e93qx/balloon_form.png

   I even got a little fancy and added an alternating green background for enhanced readability.

   To make this form, first create a check box field titled "Red balloons @ $1.25 each" with a single choice titled "Purchase red balloons".

   Then make a number field titled "Number of red balloons:" You probably want to set the Field Size to Small. Now, under Advanced Option check Enable as Quantity field and choose "Purchase red balloons (#1)" from the drop down menu.

   Now save your form and click on the payment tab. To make the example work, choose Check/Cash under Select a Merchant in Merchant Settings. In Payment Options, check Show Total Amount and choose top and bottom from the Display at drop down menu. In Define Prices, choose Variable Amount from the leftmost drop down menu, choose "Red balloons @ $1.25 each (Checkboxes)" from the drop down menu under Add a Field To Set Prices and set the price appropriately.

   Save the payment settings.

   Now edit your form again. Select your check box field. Type "column_2" in the Custom CSS Class text box. Do the same for the number field.

   Now save your form and view it. The check box and number fields should be nicely lined up. If not, double check to make sure you followed all of the steps above.

   If that worked, create the rest of the fields. The easiest thing to do is to duplicate and edit the two fields you have already created. Drag them into the proper positions, so that each number fields is below the corresponding check box field. Go back to the Payment tab and set up payment for the new fields.

   Save and view your form again. If everything is working, here's how to create the green bars. First, create a new theme and assign it to your form. In the Theme Editor, select the new theme you just created for editing. Choose Advanced CSS from the menu. Enter the code below into the Advanced CSS Code box.

   .green_bar {
        background-color: #99ff99;
        height: 50px;
        }

   Save your theme.

   Now edit your form again and choose a check box field to which you want to add a green background. In the Custom CSS Class text box for that field, type a space after "column_2" and type "green_bar" after it so you have "column_2 green_bar" in the text box. (This is a handy way to create as many custom CSS classes as you like for your forms. Define the CSS in the theme and apply it to the individual fields as shown.) Do the same for the corresponding number field on the same line. Now add the "green_bar" custom CSS class to every other set of check box and number fields (that are on the same line), where ever you want the green background to appear.

   That's it. I'm sure I have provided too much detail for some and not enough for others. If there are any questions, I will do my best to answer them, as my time permits.

   Posted 9 years ago #
2. 

   yuniar

   oh wow... thanks for sharing this! I'm making this post as a sticky post within "MachForm 4" forum.

   ---

   MachForm Founder

   Posted 9 years ago #
3. 

   yuniar

   http://www.appnitro.com/forums/topic/how-to-compact-payment-form-with-check-boxes-and-quantity-fields-lined-up-2

   ---

   MachForm Founder

   Posted 9 years ago #

4. HeuF
   Member

   @williamansley: Very, very nice!!!!! THANKS!!! I made it for myself to try it out and it worked fine!

   Posted 9 years ago #

5. williamansley
   Member

   @HeuF: You're welcome. I'm glad to hear this was useful to you.

   Posted 9 years ago #

6. kchemcomcastnet
   Member

   Thank you so much. This made makling a multi item form so easy. Now I won't have to bother Yunair so much.
   Mike Higgins

   Posted 9 years ago #

RSS feed for this topic

Reply

You must log in to post.