HTML form bindings

The Hosted Package binds your HTML forms using data-tiquo-form. Add the form and field attributes after completing installation; Tiquo handles submission, loading state, feedback, and duplicate-submit prevention. Forms added dynamically are bound automatically, or you can call window.Tiquo.render() after adding them.

Form types and field attributes

Use the exact form value shown above. marketing is not an alias for marketing-subscribe.

Login and signup

Use data-tiquo-member="email" for the email input and data-tiquo-member="token" for the OTP input. Optional data-tiquo-passwordless="step-1" and "step-2" wrappers switch between the email and code steps. Hidden-step controls are disabled while the email remains available to verify the OTP. The form hides after sign-in and reappears after logout.

See Customer authentication for the complete example, loading labels, signup behavior, and Webflow setup.

Profile

data-tiquo-profile supports firstName, lastName, email, phone, phoneCountry, profilePhoto, portalSlug, and taxId.

Full lists use zero-based indexed bindings:

Use data-tiquo-profile-parameter for customer-editable parameters, including Marketing and SMS Opt-In. It accepts a parameter name, normalized key, system ID, or custom parameter schema ID. Profile controls populate from the signed-in customer's current values.

See Customer data for list replacement behavior, contact and address defaults, portal requirements, photo upload controls, and examples.

Enquiry

Use data-tiquo-enquiry-customer for email, firstName, lastName, phone, and phoneCountry. Use data-tiquo-enquiry for type, subject, message, category, priority, and source. Email and either subject or message are required.

data-tiquo-enquiry-parameter accepts an enquiry parameter ID: in Settings > Enquiries, edit the enquiry type, then choose Copy enquiry parameter ID in the parameter's ⋯ menu. data-tiquo-enquiry-customer-parameter accepts a customer parameter schema ID and only fills missing customer-editable values.

See Enquiries for an HTML example and submission rules.

Marketing signup

Use data-tiquo-marketing for email, firstName, lastName, phone, phoneCountry, emailOptIn, smsOptIn, and honeypot. Only email is required. Opt-ins should use unchecked checkboxes. False or omitted values never unsubscribe an existing customer.

See Marketing signup for a form that requires no custom JavaScript.

Shared controls and values

• Use a <button type="submit"> or <input type="submit"> to submit. The selected submit control is disabled while the request is pending and receives aria-busy="true".
• Add <p data-tiquo-message role="status"></p> for success and error messages.
• In profile, enquiry, and marketing forms, disabled controls and controls in disabled fieldsets are omitted. The first legend of a disabled fieldset follows standard HTML behavior and remains enabled.
• Radios send the selected value. Multiple selects send arrays and omit disabled options and options inside disabled groups.
• A single parameter checkbox sends a boolean. Several checkboxes sharing a parameter binding send an array of checked values. For a one-option multiselect, use a multiple select.
• Marketing opt-in checkboxes send JSON booleans. A non-checkbox opt-in field only opts in when its value is "true"; the hosted script converts that value to a boolean.
• Use the phone number field helper on phone inputs. It supplies the selected country and normalized number for profile, enquiry, and marketing forms. Custom phone inputs can supply phoneCountry or an indexed phone's countryCode explicitly.

Phone number field helper

Use Tiquo's phone number field helper on every phone input so international phone numbers are formatted correctly. Add data-tiquo-phone-field to the input:

<label>
  Phone
  <input type="tel" data-tiquo-enquiry-customer="phone" data-tiquo-phone-field autocomplete="tel" />
</label>

The helper adds a country picker with flags beside the input, formats the number as the visitor types, and checks that it is valid for the selected country. Profile, enquiry, and marketing forms then submit the normalized international number, such as +447911123456, with the selected country, so a national number such as 07911 123456 gets the right calling code. The picker starts on the visitor's browser country unless you set one.

To keep your own layout, put data-tiquo-phone-field on a container that holds a <select data-tiquo-phone-country> and an <input data-tiquo-phone-number>. The helper fills in the countries and keeps your classes. Generated elements can be styled with .tiquo-phone-field, .tiquo-phone-field__country, .tiquo-phone-field__flag, and .tiquo-phone-field__input. For a field you add with JavaScript, call window.Tiquo.createPhoneNumberField(input, { defaultCountry: 'GB' }) and read getValue().e164. The helper needs Hosted Package 1.2.0 or newer, and forms submit its selected country automatically from 1.3.0.

Form events

Events bubble to the document. Read the result or error through event.detail:

document.addEventListener('tiquo:marketing-subscribed', (event) => {
  console.log(event.detail.success);
});

document.addEventListener('tiquo:profile-error', (event) => {
  console.log(event.detail.error.message);
});

These are HTML form events. Calling the JavaScript API directly leaves loading states and feedback to your own code.