Tips and cases of use for a successful WordPress website with calculated forms.
How to build a form with fields hidden by default that are shown/enabled at the runtime?
The "Calculated Fields Form" plugin requires all fields to be inserted into the form at the building time. However, there are situations where not all the fields are needed at the beginning. And to keep the form's interface as simple as possible, it would be preferable to hide some fields by default and show them when needed.
To illustrate the process, we will create a hypothetical form that emulates a shopping cart.
The form will include several rows of products. The first one will always be visible. However, the rows of additional products will be hidden by default. The user could show them, one by one, by pressing a button on the form.
In this project, I will try to combine several of the plugin's features to take advantage of its capabilities.
Please, download the form by clicking here.
At the top of the form, we will include some common contact fields for the user's first name, last name and email address. The form will send an email to the user with a summary of the information collected by the form.
Following the contact fields, we will insert multiple DIV fields. A DIV field for each product, containing the product data. A drop-down field with the product names and prices, a numeric field to enter the desired quantity, a calculated field to calculate the row price, and a button to hide/delete the product.
The formula for calculating the row price multiplies the drop-down field by the quantity entered by the user. The equation associated with the calculated field of the first product would be (the other equations are similar but using the corresponding field names),
IF(AND(fieldname5,fieldname6),
PREC(fieldname5*fieldname6,2), '')
The formula checks whether the user has selected a product from the drop-down list and entered a quantity before evaluating the mathematical operation. In other cases, the formula returns an empty text ''
Since the formula calculates a price, it uses the PREC operation to return the result with two decimal places.
The process may seem tedious, but a feature of DIV fields comes to the rescue. The container fields (DIV and Fielset) include the duplication icon. It allows you to duplicate an entire row with its contained fields.
In the demo form, I have duplicated the product row ten times.
I have assigned to each product row, except the first one which is always visible, two class names, the custom class name additional-product and the special class name ignorefield.
The class name ignorefield hides the product row and contained fields. In addition, it disables the fields to prevent them from affecting the total calculation.
Pay attention to the four blue squares in the top-right corner of the product row. They indicate the DIV field was configured to distribute the contained fields in four columns.
After the product rows, I include the "Add product" button. This button is the heart of the project. It shows an additional row per click and activate their field, and when no hidden products left, the button hides itself. Its onclick event code is,
ACTIVATEFIELD(jQuery('.additional-product.ignorefield:eq(0)'));
if(!jQuery('.additional-product.ignorefield').length) jQuery(this).hide();
Every product row includes a "Delete" buton to hide the row and disable its fields. Their onclick events code are,
IGNOREFIELD(this.closest('.additional-product'));
Finally, the form includes a calculated field to calculate the cart price. Its formula is the sum of the rows' prices,
As some products may remain hidden when the form is submitted, you can exclude them from notification emails by using block tags with conditional attributes,
<%fieldname5_block if_value_unlike={{- Select -}}%>
<tr>
<td><%fieldname5_value%></td>
<td><%fieldname6_value%></td>
<td><%fieldname7_value%></td>
</tr>
<%fieldname5_endblock%>
The above tags block includes the table row in the notification email, only if the user has selected a product from the fieldname5 drop-down field.
