MachForm Community Forums » MachForm 4

1. williamansley
   Member

   Here are instructions for making a much more compact version of the payment form I described earlier. (By the way, these instructions and the previous ones are written for Machform 4.1, but they should work in 4.2 or earlier versions that aren't too out of date.) This form is a bit of an ugly hack, but the form itself looks pretty good.

   Here is an image of a sample compact payment form I created: http://s26.postimg.org/c2655x7p5/balloon_form_compact_2.png

   I am going to assume you have already created the previous payment form, so if you haven't looked at my previous post about this and followed the instructions, please do so before you go on:

   http://www.appnitro.com/forums/topic/payment-form-with-check-boxes-and-quantity-fields-lined-up?replies=1

   Open up the old balloon payment form and duplicate it. Edit the copy of the form.

   Click on the "red balloons" check box field to edit it. Select the Field Label text, "Red balloons @ $1.25 each" and cut it. Select the check box item label text, "Purchase red balloons" and paste the text you cut from the Field Label over it, replacing the old text. This will leave the Field Label field blank.

   Repeat this for the remaining pairs of check box and number fields. Save your form and view it. It should look like this:

   http://s26.postimg.org/xvqvjv4mx/balloon_form_compact_from_full.png

   You can see that we're closer, but we're not there yet.

   To make the total amount of the order appear only at the bottom of the form, click on the payment tab of your form in the Form Manager. In Payment Options, under Show Total Amount, choose bottom instead of top and bottom from the Display at drop down menu.

   (This step is entirely optional. You can display the total amount at the top or bottom of the form or in both places; whatever looks best to you.)

   Save the payment settings.

   Now, you need to modify the CSS for the form that you created last time, which means changing the theme for the form. Go to the Theme Editor (click on the Edit Themes button at the top of the Machform Admin Panel window). Open the theme you created last time. You could just change this theme, but that will "break" your previous example form, so I suggest saving a copy of the theme and renaming it. Use the Duplicate command to make a copy of your form and give the copy a new name.

   In your new theme, choose Advanced CSS from the menu. Find your "green_bar" CSS code and change the 50px to 30px, so it looks like this in the Advanced CSS Code box.

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

   Save your theme. Assign the new theme to your form. View your form again; it should look more or less like this:

   http://s26.postimg.org/3jyzqgdvd/balloon_form_compact_from_full_3.png

   Now to add the columns headings - this is where the hack comes in. The way I did this is to add a section break and position the "column headings" with a lot of non-breaking spaces. Depending on the width of your form and the font and size of the text you are using, you may have to tweak this a little or a lot.

   Now edit your form again. Add a Section Break field above all of your other fields. Click on the Section Break to edit it. Delete all of the text in the Guidelines for User text box, which will close up the space under the section break. In the Field Label text box, type this:

   <strong>Balloon color and cost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity</strong>

   Each   is the HTML code for a non-breaking space. You will probably have to adjust the number of non-breaking spaces; just make sure that you treat each   as a unit; if you leave out any part of any repetition of this code out, it will mess up the heading line.

   Save your form and view it; it should now look something like this:

   http://s26.postimg.org/p7ny0we9l/balloon_form_compact_from_full_4.png

   As I said, you will probably have to do some tweaking of the number of   codes to make the column headings look aligned in your form.

   Now, go back and edit your form one more time. Select your "column heading" Section Break and type "green_bar" into the Custom CSS Class text box. Save your form and view it. Now you should see something like this:

   http://s26.postimg.org/b2i4z3589/balloon_form_compact_from_full_5.png

   That's all for now. There are a lot of alternative ways to do some of the steps described above, but I hope this will help you get started.

   There is still an issue with how the data saved by this form is presented, but I'll save a discussion of that and a fix for it for another post.

   Posted 10 years ago #
2. 

   yuniar

   Thanks for this!

   ---

   MachForm Founder

   Posted 10 years ago #

3. nsvteam
   Member

   Is it possible to provide larger screenshots or images. I am impressed with the detail notes here but I am very interested to see how it would look like before applying. Thanks.

   Posted 9 years ago #

4. williamansley
   Member

   @nsvteam: I'm really not sure what you are asking for. The screen shots I supplied are full size; I don't know how to make them any clearer.

   Posted 9 years ago #

5. patrickhait
   Member

   I have set up a form similar to this... Is is possible to disable the 'quantity' textbox until the item is 'checked off'?

   Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.