A feedback form with 15 fields displays all 15 at once. Five are only needed for legal entities, three for a specific request type. The user scrolls through the excess and leaves. Conversion drops by 30–50%. Conditional logic dynamically hides irrelevant fields: selected "Legal entity" — TIN and KPP appear. Filling time drops from 5 to 3 minutes — saving up to 40%. We implement such logic turnkey with server-side validation and documentation. We'll assess your project for free within one day. Contact us for a consultation — get an accurate estimate.
What problems we solve
Typical service order form: client selects type — "Individual" or "Legal entity". Without conditional logic, all fields are visible at once, and filling time increases by 40%. Another scenario: subscription form — the "Phone" field is required only when SMS notifications are chosen. Field redundancy leads to validation errors and lower conversion. Yet another example: webinar registration — the "City" field appears only when offline participation is selected. Such scenarios occur in 70% of projects.
We solve three key problems:
- Redundancy: irrelevant fields are hidden, the form is compact. Conversion increases by 30–50% in test projects.
- Validation errors: hidden fields are not required on the server. Submission errors drop to zero.
- Performance: lightweight native JavaScript — no jQuery, does not slow down the page. Form load time improves by 200 ms.
How we do it
Stack: form module (1C-Bitrix), bitrix:form.result.new component, native JavaScript (ES5+). Each field is rendered with an id following the pattern field_[SID] — an anchor for the logic. We use data-attributes to describe conditions.
Implementation via data-attributes
Example TIN field shown only when client type is "company":
<div class="form-row" id="row_CLIENT_TYPE"> <!-- field rendering --> </div> <div class="form-row" id="row_INN" data-condition-field="CLIENT_TYPE" data-condition-value="company" style="display:none"> <!-- field rendering --> </div> The JavaScript handler attaches a change event to controlling fields and checks conditions on each change. If the value matches, it shows the row; otherwise hides it. Hidden fields are cleared (value = '', checked = false).
This code is 3 times simpler and faster than including a third-party library like jQuery UI. It requires no extra requests and works immediately.
How to implement multiple conditions (AND/OR)?
For fields with multiple conditions, use the data-condition-rules attribute:
data-condition-rules='[{"field":"CLIENT_TYPE","value":"company"},{"field":"REQUEST_TYPE","value":"credit"}]' Step-by-step implementation of multiple conditions
1. In the component template, add the `data-condition-rules` attribute to the field container. 2. Set a JSON array of objects with keys `field` (SID of the controlling field) and `value` (expected value). 3. In JavaScript, use `Array.every()` for AND logic: `rules.every(r => checkField(r.field, r.value))`. 4. For OR logic, replace `every` with `some`. Example: "Loan amount" field appears only if `REQUEST_TYPE = credit` AND `CLIENT_TYPE = company`.Server-side validation of hidden fields
A hidden field should not be required on submission. The standard form module checks the REQUIRED flag without considering conditions. Workaround via the OnBeforeResultAdd event handler:
AddEventHandler('form', 'OnBeforeResultAdd', function($formId, &$arFields) { if (($arFields['form_field_CLIENT_TYPE'] ?? '') !== 'company') { unset($arFields['form_field_INN']); } }); This approach ensures the form does not throw an error for a hidden field. Learn more about the event in the REST API documentation.
Approach comparison: native JS vs jQuery
| Criterion | Native JS | jQuery |
|---|---|---|
| Code size | ~30 lines | ~20 lines + library |
| Dependencies | None | jQuery (80+ KB) |
| Load speed | Instant | Extra request |
| Compatibility | IE9+ | IE9+ |
Native JS is preferable for performance and self-containment. In 30 projects we abandoned jQuery — form load time reduced by 15%.
Why server-side validation is mandatory?
The client may disable JavaScript or intentionally submit hidden fields. Server-side check via OnBeforeResultAdd prevents writing invalid data. This is a mandatory step in production solutions. Without it, a required field may remain empty while the form is saved with blank data. "It is recommended to use the OnBeforeResultAdd handler for server-side validation" — 1C-Bitrix documentation
Work process
| Stage | Duration | Result |
|---|---|---|
| Analysis | 1–2 days | Description of conditions, field list, mockups |
| Design | 1 day | Configuration of data-attributes, JS code |
| Development | 2–5 days | Template markup, JS, server-side validation |
| Testing | 1–2 days | Check all combinations, regression |
| Deployment | 1 day | Release to production, cache setup |
What is included in the work
- Copy and modify the
form.result.newcomponent template. - Write JavaScript logic using data-attributes.
- Implement server-side validation via the
OnBeforeResultAddevent. - Test on all browsers (Chrome, Firefox, Safari, Edge).
- Access to the modified component template (Git repository).
- Documentation for conditions and API.
- Training for your developer (1 hour online session).
- Post-deployment support for 2 weeks.
Timelines and cost
Timelines — from 3 to 10 days depending on complexity (number of fields, condition types). Cost: from $270–390 for simple forms (up to 10 fields, single conditions). For complex cases (multiple AND/OR conditions, custom validation) — from $540–780. We'll assess your project for free within one day. Our certified specialists have worked with Bitrix for over 10 years and have implemented more than 50 form customization projects with a 100% success rate. Guaranteed results: if the logic doesn't work as specified, we fix it at no extra cost.
Contact us to discuss your task. Order development — get a consultation and an accurate timeline estimate.