Contact Us Form: With Callbacks

A contact us form where the number of guest fields displayed is determined by the value of a field specified by a parameter.

Two parameters are required; the two callback paramters are optional.

• show_guest_info_fields => 1 to render the guest fields
• guest_number_field => field_name or number_of_guests => x
• init_guest_fields_callback => functionName which executes only once after the guest fields have been reorganized into their containers
• loop_guest_fields_callback => functionName which executes as displayGuestFields() loops through the guest field blocks to display

For this particular form, we demonostrate both callbacks. The init callback adds a class to each guest group header to make it green. The loop callback moves full name above email address and also toggles the display of the "Extra Info" field if the value in the select is "Other Thing".

Callbacks need to be placed either in the story itself in an open_format_item, or at the bottom of site.js, outside of the DOMContentLoaded block. For callbacks that call vanilla.toggleFormContent, you also need to add the optional_guest_fields parameter if the toggled element is a form field, since it can be hidden.