Instructions for Creating a SubTotaling Webform
The subtotaling feature allows you to create a form with the ability to calculate, or subtotal two or more amounts. This subtotaling feature can be used for tallying the number of guests purchasing tickets for an event and the total cost of those tickets, as well as adding a percentage, as with a credit card fee.
The subtotaling feature can be included in both informational (nonpayment) and payment forms.
IMPORTANT! - If you want to clone a current payment form:
You MUST remove the 'Payment Information' field from the parent form BEFORE you clone it. If you do not, the child/cloned form will reference the parent form's title in your email notifications.
(2a) If you clicked the Content link in the black toolbar, please click the blue +Add content link to access the Add Content page.
(2b) If you clicked the Add content link in the gray toolbar, you are able to directly access the Add Content page.
- Click the Webform link to begin the process of creating a new form.
- Give your webform a title that briefly and accurately describes its content and purpose.
- Include key details in the body. Use the WYSIWYG editor to style and format this section.
Remember: Information entered in the body will display above all form fields on multipage forms. If you do not want this information to show at the top of all form pages, add this information into a Markup field type.
- Scroll to the bottom of the Edit Webform page. Under URL path settings, by default, the URL alias will be the title of the form separated by dashes (in this example ‘Sample Form’ has the alias ‘sampleform’). This is the friendly URL that you can use to attach your form to a menu item if you want it linked in the navigation or Quick Links.
If the form has a long title, consider giving it a shorter URL alias by unchecking the Generate automatic alias and type in your own (separating all words with dashes or underscores, and do not include any special characters).
If you do not want this form to be searchable, unpublish it within the Publishing options settings. And remember to Publish it when it is ready for general use.
- Click the Save button to finalize all changes.
After clicking Save, you will be redirected to the Form components page, where you will begin adding fields to your webform.
PART 2 Creating the field options for the totals
For the purposes of this example, we will create a form designed to allow people to reserve and purchase tickets for a family Shabbat dinner.
- Create all form components that do not require a subtotaling feature. This includes contact information (name, email, phone number), meal options, volunteer opportunity, etc.
TIP: Don’t set your mandatory fields until you complete the form it makes testing the form easier when you can skip information and just test the totals.
- Determining Item Amounts: The next couple of fields will be devoted to the number of tickets an individual plans to purchase.
In this example, ticket prices are based on the age of those attending. Create Select Option fields for each of these options.
Children: $5 per ticket. Adults: $15 per ticket. Seniors: $10 per ticket.
- Enter the field’s title in the Label Select Text Field from the Type drop down menu and click the Add button.
- On the field’s Edit component notice how the information previously entered in the Label now appears in the Field Key, but an underscore separates each word. You may shorten or modify the Field Key, but underscores must be used to separate all words.
- Copy, paste, and store the Field key text in a secure location (i.e. Notepad or TextEdit). You should note that this text relates to the Label.
- Within the Options indicate the amount that will be paid for the number of tickets purchased. Since this is a subtotalling form, click on the Manual entry option to add the options.
5|1 Child $5 10|2 Children $10 15|3 Children $15 20|4 Children $20 25|5 Children $25 30|6 Children $30
If you do not indicate a Default value, the select options will have a default value of ‘None’ and a 0 amount.
- You have the options to make the selection Mandatory (but again, don't’ check this option until after you’ve tested the form to make the testing easier), have the options appear in a dropdown List box (the default is radio buttons), and to have the Label Display appear Above or Inline with the options.
- Scroll to the bottom of the page and click the Save component
- Repeat steps #3#8 for all different ticket options and their amounts, noting the
Field_key for each new option set.
PART 3: Creating the subtotal
Forms with the subtotaling feature must contain multiple pages. The CMS requires the use of a page break to calculate all entered amounts.
- Enter a title for the Page Break. Use the Type drop down menu to select Page Break. Click the Add
By default, the Page break will display as a button with the words “Next Page.” Change this text by entering information in the “Next Page Button Label Field.”
- Click the Save component
After clicking the Save component button, you will return to the main Webform page.
- Since this form has multiple pages, it is necessary for you to make a minor adjustment to the settings.
3a. Click on the Form Settings button (located directly under the Webform tab).
3b. Scroll to the bottom of the page and click on the Advanced Settings.
3c. Click the “Automatically save as draft between pages” check box followed by the Save configuration button.
3d. After clicking the Save configuration button, you will remain on the main Form settings page, and will need to click the Form component button to resume editing.
Now that the form is setup to take information from the first page and pass it to the next page, you can create subtotal amount fields.
- Create a Total field by entering “Total” as the new component name, and select
Text Field from the Type drop down menu, and click the Add button.
- Copy and record the information that displays in the Field key on your notes page along with the other field keys.
Optional: Use the fields in the Display section to modify the appearance of this field. Enter a $ in the Prefix text placed to the left of the text field. And change Label Display to Inline.
- Scroll to the bottom of the page and click the Save component Do not add the macro code before saving the (sub)total field. If you enter the macro code before first saving the field, it will not save the macrocode only the field and its settings, and you’ll end up creating the macro code over again.
After clicking the Save component button, you will return to the main webform page.
- Identify your new field and click the edit link to return to the field’s Edit component Scroll to the bottom of the page and click on the Macro Code link. The page will expand and the Code box will display.
- You will enter code based on the following formula:
$values['Field Key for Total Amount’']=
$values['Field Key for Number of Tickets for Item A']*1;
Based on the example, the macro code will be:
- The Field Key for the Total Amount of Item A is: total_children
- The Field Key for Number of Tickets for Item A is: child_tickets So, the information entered in the Macro Code box will be:
$values['child_tickets’] * 1;
(You must include the general formula components, the field key must be within brackets and have single quote marks at the beginning and end, and the field key is multiplied by 1, which is the *1)
There can not be any spaces between the macro code characters per line, and the end of the code always ends with a semicolon.
The Macro Code must be entered exactly as seen above. Even the smallest of differences, such as the inclusion of additional spaces between characters, will render the code void. Double check to ensure that you included an single quote before and after all field key text and a semicolon is present after the last line.
- Click the Save component If you entered something wrong, you will get an error message and the code will not save. Check your spacing, characters and that the field keys are exactly what they are in the original fields (your notes).
- Test your macrocode, by selecting an option for the macrocode you just created, and making sure on the subtotal page, the amount for that selection is accurate.
- Repeat the same process as outlined in steps #4#9 to enable the form to calculate the total cost of tickets purchased for seniors and adults.
Remember! You must first create and save the field before returning to the field’s edit component page and adding the macro code.
Information entered in the Macro Code box for calculating the total cost of senior tickets is:
$values['senior_tickets'] * 1;
Information entered in the Macro Code box for calculating the total cost of adult tickets is:
$values['adult_tickets'] * 1;
PART 4 Creating the Grand Total
You have enabled your form to calculate the cost of each type of ticket (ex. children, adults and seniors). Now, calculate the total cost of all purchased tickets. This total can appear on the same page as the subtotal, or you can add a page break and place it on its own page with the payment information and options.
Remember! You must include a page break for your form to perform any type of numeric computation.
If adding it to another page follow these steps, as you did above when creating the first page break. If you are not placing the grand total on another page, skip to step #1 below:
- Enter a title for the Page Break. Note: The title must be different than the title entered in step (o). Use the Type drop down menu to select Page Break. Click the Add
- By default, the Page break will display as a button with the words “Next Page.” Change this text by entering information in the “Next Page Button Label Field.”
- Click the Save component button to return to the main Webform
- Enter a title in the component field for the grand total field. Since this field is going to display the total amount for the purchased tickets, the title will be Grand Total.
- Set the Type drop down label to Text field and click the Add
- Clicking the Add button brings you to the Edit component Modify your field key as needed and record your field key on your notes page.
- Scroll to the bottom of the Edit component page and click on the Save component
button. REMEMBER if you add the macro code before you first save the Totalcomponent, the macro code will not save.
- Identify your new field on the main webform page and click the edit link to return to the field’s edit component
Scroll to the bottom of the page and click on the Macro Code link. The page will expand and the Code box will display.
- You will enter code in the Macro Code box using the following formula:
$values['Field Key for Total Number of Tickets']=
$values['Field Key for Item A’]
+ $values['Field Key for Item B’]
+ $values['Field Key for Item C'];
Using the information recorded on my notes page, I know that: The Field Key for Grand Total is grand_total.
The Field Key for Item A is child_tickets. The Field Key for Item B is senior_tickets. The Field Key for Item C is adult_tickets.
- The following is the macro code for the Grand Total:
- Click the Save component
- Check to make sure your macro code is working by selecting the options on the form to create a total and view the final page. If you do not see the amount you expect, review your macro code for accuracy in the field key names, no spaces between characters, the correct placement and presence of brackets and single quotes, the semicolon at the end.
PART 5 Adding Credit Card Fee Total
You may want to add a certain percentage to the total cost that the user pays to cover credit card fees. These are the instructions for how to add that additional Grand Total with Fee.
- Create a New Component for the Grand Total with Credit Card Fee as a Textfield.
- Copy the Field Key for the Grand Total with Fee in your notes.
Set any of your Display choices, then scroll and Save the Component.
- You’ll be taken back to the Webform list of field components. Select Edit to add the macrocode for the Grand Total with Fee.
- Scroll down to the bottom and open up the Macro code settings.
- Add the first line of the macro code that references the Grand Total with Fee Field Key:
- To create a total that includes the credit card fee percentage you want to pass on to the user, you will need to take the total amounts of each ticket type and add another line of code that multiples that total with the percentage of the credit card fee. The percentage is expressed as a decimal amount (2% = 0.02, 2.5%=0.025, etc.), and the multiplication is expressed with the * star symbol (Shift + 8).
EX: the macro code for the Child Tickets will be:
The multiplication of the percentage needs to go on its own line in the macro code, without the + sign in front of it.
If you have more than one price to multiple for the total with credit card fee, you will need to repeat Step 7 for as many items as you have, placing a + sign at the beginning of each line of code, except for the multiplication of percentage line.
- Always end the macro code with the semicolon (;).
If the macrocode has errors, you will most likely get an error message, letting you know what line the error is located on. Take a look at that line of code, and perhaps, delete it and type it in again.
- Save the component, then check the form and make sure the Grand Total with Credit Card Fee is calculating correctly.
- If the amount is not there or it is not correct check all of your macrocode components for accuracy.
PART 6: Creating Check and Credit Card Options
You may want to give the user the option to pay by Check or use a Credit card. Having that option requires the use of Conditional Rules on select fields on the last page. You first have to create the option field, then apply the conditional rule to fields that you want to appear (and not appear) depending on the option that is selected.
- Create a field for Payment Option that is a Select Options field type, and select
- Add a title to the field, and create the options using the manual entry option. It is the text you use no the left side of the pike symbol (|) that you will need to remember, so add it to your notes. In this case it is Check and Credit.
- Set your Display options and Save the Component.
- Depending on where you added the component, you may need to move it. This option field needs to be after the total but before any fields that the user needs to see if they select one or the other option for payment. If you need to move the field, click and drag it into place using the 4way arrow handle bar tool. Then Save the form before continuing.
- Next, create a Mark Up field that gives the users the directions and information for sending in a check. Include who to make the check out to, and if they should put info in the memo line, and the mailing address. If this is time sensitive and you need payment by a specific date, advise a postmark date.
- Before you save the markup, set the Conditional Rule that this information should only appear when a user selects payment by check.
Open the Conditional Rules settings, Select the ‘Payment Option’ component (the field you created to ask the question about payment options), select ‘Is one of’, and enter the text you used for the check payment option on the left side of the pipe symbol this this case its ‘Check.’ This information is case and character sensitive
- it must be the exact text you used in the options.
- Select Save component.
- Test that the conditional rule is working by going to View and on the last page, select Check for payment option. These instructions should not appear on that page until that option has been selected.
- Next, you will want to add a field set for the Billing information, followed by adding the payment information. Information from the Billing Fieldset will be sent to the payment processor for verification. First the Billing information field set:
- Create a fieldset and title it ‘Billing Information’.
The Billing information the user enters must match that of their credit card account. So
add helper text in the Billing Information Description that tells the user to “This information must match the information on file with your credit card account.”
You can keep the default settings for the fieldset type no need to have it collapsible or collapsed by default, and don’t hide the label so that the title “Billing Information’ will show to the user.
- Before you save the Billing Information Fieldset, add the Conditional Rule that it only shows if the user selects the Credit Payment Option. Then Save the component.
- Test the conditional rule by selecting Credit as the payment option, and you should not see the ‘Billing Information” field set title unless Credit has been selected.
- Now you are ready to add the Billing Information fields to this fieldset. The Billing information should include the following fields:
- First Name
- Last Name
- Primary Street Address
- Secondary Street Address
- State (can be the prebuilt select options be sure to choose the Listbox Display)
- Zip Code
NOTE: DO NOT COLLECT CREDIT CARD INFORMATION (Card Number, Security
Code, Expiration Date) using Textfields or any other fields on the form. The next steps outline the field type used to collect the payment information. Your site requires a Payment Processor and installation of a Payment Processor module on your website in order to take online payments securely.
You do not need to set the Conditional Rules on each of these fields as long as they are within the Billing Information fieldset to include these fields in a fieldset, each of these fields should be indented beneath the Billing Information fieldset. Use the 4way arrow tool to drag each field within the Billing Information Fieldset.
- Drag the new component field to the end of far edge of the webform table, and enter ‘Payment Information’ for the title, then select the Payment Information option. Add it to the form.
- NOTE: You must have a Payment Processor (i.e. Authorize.net or Paypal) setup on your site prior to being able to make payments. If you do not see a payment processor under the Payment method option, you do not have a Payment Processor installed on your website, and you need to contact Jvillage Support once you have an account established with a Payment Processor.
Select your Payment Processor in the Payment method option.
- In the Price Component, select the option that you created for the Grand Total with Fee. This is the amount that will be sent to the payment processor and to the user’s credit card company for payment. If you did not include a total with a fee on your form, then select the Total amount option. If you do not select a total from the Price components, no amount will be sent to the payment processor/credit card company there will be no charge, and an error on the form may occur.
- Under the Other Component Mappings you can keep the default settings that will collect the User’s Email, First and Last Names, and depending on the payment processor, you may need to collect the Billing Information that is sent.
- In order for the Payment Information to only appear if the user selected Credit Card option, set the Conditional Rules for the Payment Option component, Is one of, and enter ‘Credit’ (or whatever options you typed in for the Credit Card option.)
- Test that the Payment Information fields do not appear unless the user selected Credit Card for the Payment Option.
PART 7: Setting Up CAPTCHA and Email Notifications
In order for your form not to receive robot spam, add a CAPTCHA Challenge to the end of the form.
- In the Webform View at the very bottom, there is an option to enable CAPTCHA. Open up that option, and select to ‘Place a CAPTCHA here for untrusted users’.
- There are different types of CAPTCHA Challenges to choose from characters, Math, Image we suggest the Math Challenge type.
- Save that option. Now before a user can submit the form, they must solve the CAPTCHA Challenge.
- Having CAPTCHA does not 100% block spam users, but it will definitely help.
- Under the Webform tab, there is a button in the upper right for Emails. Select that.
- If you used the Email field type to collect email address on the form, you will be able to find that option in the Component value option list and allow the user to be notified by email of the form submission. Select and Add it.
- Make any changes necessary to the default information for EMail Header Details.
- For User Emails, you can remove some of the autofill information that is included in the email to cutdown on confusion. By default the email notificaiton will include a logged in user name (which most users are not logged into your site when they submit a form) and a link to check the results of the form, which a general user does not have access to and will get an Access Denied warning of they select the link. So delete these items in order for the user to not be confused by the notification.
- The Email will contain all of the values and fields that were represented on the form, whether or not they were answered or selected, and will also show what information was entered.
- Save the email settings for the User. It will show up as ‘Value of “Email:’ in the Email settings table.
- Set up email notifications for staff members by adding addresses into the ‘Address:’ text field. You can add more than one email by separating each email with a comma, with no space between the comma and the next email. And Add.
Repeat steps #3 to change any of the default information, but you may want to keep at least the URL link to form results for staff to access in the Email Template options.
- You can setup Email notifications to include or exclude any number of fields on the form through the Inlcuded Email Values Settings. So if the staff just needs to know a limited amount of info instead of all of the data submitted, you can limit that through this setting. Just uncheck the boxes of any field information you don’t want included in the email notification.
- Save email settings.
- Always remember to Save when you create new fields, make changes to the arrangement of fields on the form, or edit fields.
- TEST, TEST, TEST!!! Always test your new fields that have macrocode or/and Conditional Rules before making the form live.
- Test macrocode fields (subtotals and totals) with each addition of a field so that if it not working, you know which one before you have several and you do not know which one is not working.
- Practice, practice, practice. The more you work with macro codes and conditional rules, the better and more confident you will get at it.
- Don’t forget to Save Draft Between Pages for multipage forms in the Form settings area.
- Plan ahead have all of your information collected, and layout planned, and don’t be in a rush when you need to create a payment form with subtotals and totals and have contiguous time set aside to work on it, rather than being interrupted and not remembering where you left off or if you did or didn’t do something.
- Don’t set your mandatory fields until you have tested the form it will make testing the form easier to not have to make selections or provide answers. But don’t forget to set the Mandatory Fields before the form goes live, otherwise you may not capture essential information, such as the user’s email address and basic information.