Tutorial: Hiding Required Fields in WHMCS and Setting Default Values

In this tutorial, we will cover how to hide required fields in WHMCS forms and set default values for these hidden fields. This approach is useful for situations where you need to predefine values for certain fields but don’t want them to be visible or editable by the user. We will use a practical example to demonstrate this technique, focusing on hiding and setting default values for subject and message fields in a support ticket submission form.

Prerequisites

• Basic understanding of HTML and PHP.
• Access to your WHMCS template files.

Step 1: Identify the Fields to Hide

First, locate the form in your WHMCS template where you wish to hide the fields. In this example, we are working with a support ticket submission form, specifically targeting the subject and message fields.

Step 2: Modify the HTML to Hide Fields

To hide the fields, you can use the hidden attribute within your form’s HTML. This makes the fields invisible to the user but still part of the form, allowing their values to be submitted.

Here is how you can apply the hidden attribute to the subject and message fields:

<div hidden class="form-group col-md-12">
    <label for="inputSubject">{$LANG.supportticketsticketsubject}</label>
    <input type="text" name="subject" id="inputSubject" class="form-control" />
</div>
<div hidden class="form-group col-md-12">
    <label for="inputMessage">{$LANG.contactmessage}</label>
    <textarea name="message" id="inputMessage" rows="12" class="form-control markdown-editor" data-auto-save-name="client_ticket_open"></textarea>
</div>

By adding hidden to the surrounding div tags, the entire form group for each field is hidden, including any labels or additional descriptive text.

Step 3: Set Default Values for the Hidden Fields

After hiding the fields, you might want to set default values for them. This ensures that when the form is submitted, these fields have predefined values, even though the user cannot see or modify them.

Here is an improved example where default values are set directly within the HTML input tags for both the subject and message fields:

<div hidden class="form-group col-md-12">
    <label for="inputSubject">{$LANG.supportticketsticketsubject}</label>
    <input type="text" name="subject" id="inputSubject" value="Request" class="form-control" />
</div>
<div hidden class="form-group col-md-12">
    <label for="inputMessage">{$LANG.contactmessage}</label>
    <textarea name="message" id="inputMessage" rows="12" class="form-control markdown-editor" data-auto-save-name="client_ticket_open">hello</textarea>
</div>

In this code, the value attribute for the inputSubject field is set to "Request" and the inner text for the inputMessage textarea is set to "hello". These values will be submitted with the form, acting as defaults.

Explanation

• Hiding the Fields: The use of the hidden attribute (or alternatively, CSS styles such as display: none;) makes specific form elements invisible to the user. This is useful for when you need to submit data that doesn’t require user input or modification.
• Setting Default Values: By setting a default value for input fields and default text for textarea elements, you ensure these fields are not empty upon submission. This is especially useful for required fields in WHMCS forms.

Conclusion

This tutorial demonstrated how to hide required fields in a WHMCS form and set default values for these fields. This method is particularly useful for streamlining user submissions and ensuring that necessary data is submitted with forms, even when that data does not need to be provided or altered by the user. Always ensure that hiding fields and setting default values aligns with your application’s functionality and complies with any relevant regulations or best practices.