https://www.machform.com/forums/ MachForm Community Forums Topic: How To: Payment form with check boxes and quantity fields lined up en Sun, 03 May 2026 21:02:19 +0000 https://www.machform.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up#post-22904 Wed, 11 Mar 2015 03:07:23 +0000 kchemcomcastnet 22904@https://www.machform.com/forums/ <p>Thank you so much. This made makling a multi item form so easy. Now I won't have to bother Yunair so much.<br /> Mike Higgins </p> https://www.machform.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up#post-22881 Fri, 06 Mar 2015 05:51:30 +0000 williamansley 22881@https://www.machform.com/forums/ <p>@HeuF: You're welcome. I'm glad to hear this was useful to you. </p> https://www.machform.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up#post-22880 Fri, 06 Mar 2015 05:29:17 +0000 HeuF 22880@https://www.machform.com/forums/ <p>@williamansley: Very, very nice!!!!! THANKS!!! I made it for myself to try it out and it worked fine! </p> https://www.machform.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up#post-22092 Wed, 29 Oct 2014 09:21:02 +0000 yuniar 22092@https://www.machform.com/forums/ <p><a href="http://www.appnitro.com/forums/topic/how-to-compact-payment-form-with-check-boxes-and-quantity-fields-lined-up-2" rel="nofollow">http://www.appnitro.com/forums/topic/how-to-compact-payment-form-with-check-boxes-and-quantity-fields-lined-up-2</a> </p> https://www.machform.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up#post-22038 Wed, 22 Oct 2014 08:52:49 +0000 yuniar 22038@https://www.machform.com/forums/ <p>oh wow... thanks for sharing this! I'm making this post as a sticky post within "MachForm 4" forum. </p> https://www.machform.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up#post-22001 Fri, 17 Oct 2014 23:25:00 +0000 williamansley 22001@https://www.machform.com/forums/ <p>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.</p> <p>Here is an image of a sample form I created: <a href="http://s26.postimg.org/pqw7e93qx/balloon_form.png" rel="nofollow">http://s26.postimg.org/pqw7e93qx/balloon_form.png</a></p> <p>I even got a little fancy and added an alternating green background for enhanced readability.</p> <p>To make this form, first create a check box field titled "Red balloons @ $1.25 each" with a single choice titled "Purchase red balloons".</p> <p>Then make a number field titled "Number of red balloons:" You probably want to set the <strong>Field Size</strong> to <strong>Small</strong>. Now, under <strong>Advanced Option</strong> check <strong>Enable as Quantity field</strong> and choose "Purchase red balloons (#1)" from the drop down menu. </p> <p>Now save your form and click on the payment tab. To make the example work, choose <strong>Check/Cash</strong> under <strong>Select a Merchant</strong> in <strong>Merchant Settings</strong>. In <strong>Payment Options</strong>, check <strong>Show Total Amount</strong> and choose <strong>top and bottom</strong> from the <strong>Display at</strong> drop down menu. In <strong>Define Prices</strong>, choose <strong>Variable Amount</strong> from the leftmost drop down menu, choose "Red balloons @ $1.25 each (Checkboxes)" from the drop down menu under <strong>Add a Field To Set Prices</strong> and set the price appropriately. </p> <p>Save the payment settings.</p> <p>Now edit your form again. Select your check box field. Type "column_2" in the <strong>Custom CSS Class</strong> text box. Do the same for the number field. </p> <p>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.</p> <p>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 <strong>Payment</strong> tab and set up payment for the new fields.</p> <p>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 <strong>Theme Editor</strong>, select the new theme you just created for editing. Choose <strong>Advanced CSS</strong> from the menu. Enter the code below into the <strong>Advanced CSS Code</strong> box.</p> <pre><code>.green_bar { background-color: #99ff99; height: 50px; }</code></pre> <p>Save your theme.</p> <p>Now edit your form again and choose a check box field to which you want to add a green background. In the <strong>Custom CSS Class</strong> 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.</p> <p>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. </p>