Contact form custom fields

You can customize the contact form in your support widget to add more fields and hide or set default values to the subject and message fields.

Fernand('open', 'contact', { ... })

Parameters

Here are the root parameters you can define:

• tags
  Array of string
  List of tags applied to new conversations via the contact form. Useful for automatic message handling and identifying requests from the contact form.
  
  

• fields
  Array of Object
  A list of fields that will appear after your user's name and email. Please note that these fields are automatically hidden when your user is properly authenticated.
  
  

• values
  Object
  An object containing the value pre-filled for each field of the form. This includes the default fields such as name, email, etc.

Fields specification

Each field object in the fields array should include the following parameters:

• type
  String
  Type of field. We currently accept text, email, number, tel, select, textarea, checkbox and hidden.
  
  

• name
  String
  Unique name of the field.
  
  

• label
  String (or object for each language)
  Text displayed before the field. Supports Markdown and translations by passing an object with language-specific labels.
  
  If you want to specify a translation for the label, pass an object instead of the string, such as

label: {
    "en": "Your email address",
    "fr": "Votre adresse email",
    "de": "Deine E-Mail-Adresse"
}

• placeholder
  String (or object for each language)
  Text inside the field when applicable. Supports translations similar to label.
  
  

• required
  Boolean
  If true, the field must be filled out by the user.
  
  

• options
  Array of Objects
  For select type only. Contains value and label for dropdown options.

options: [
    { value: '100-499', label: '$100 - $499' },
    { value: '500-999', label: '$500 - $999' },
    { value: '1000-4999', label: '$1,000 - $4,999' },
    { value: '5000-9999', label: '$5,000 - $9,999' },
    { value: '10000+', label: '$10,000 and above' }
]

Example

Here's an example that you can re-use as a starting point. This is the contact form for an enterprise pricing request, something fairly common in SaaS.

Fernand('open', 'contact', {
    tags: ['Enterprise request'],
    values: {
        name: 'John Doe',
        email: 'john@doe.com',
        subject: 'Enterprise request'
    },
    fields: [
        {
            name: 'subject',
            label: 'Subject',
            type: 'hidden', // Will hide the Subject field with the default value
        },
        {
            name: 'message',
            type: 'hidden', // won't ask for a message
        },
        {
            name: 'company',
            label: 'Company/Organization',
            required: false,
            placeholder: 'Your company name',
            type: 'text'
        },
        {
            name: 'role',
            label: 'Role/Position',
            required: false,
            type: 'text'
        },
        {
            name: 'budget',
            label: 'Estimated budget',
            required: true,
            placeholder: 'Your estimated monthly budget',
            type: 'select',
            options: [
                { value: '100-499', label: '$100 - $499' },
                { value: '500-999', label: '$500 - $999' },
                { value: '1000-4999', label: '$1,000 - $4,999' },
                { value: '5000-9999', label: '$5,000 - $9,999' },
                { value: '10000+', label: '$10,000 and above' }
            ]
        },
        {
            name: 'notes',
            label: 'Notes',
            required: false,
            placeholder: 'Any additional notes or questions you have for us',
            type: 'textarea'
        },
        {
            name: 'terms',
            required: true,
            type: 'checkbox',
            label: 'I agree to the [terms and conditions](https://piedpiper.com/terms)'
        }
    ]
})

By customizing the contact form with additional fields and pre-filled values, you can collect more relevant information from your users. Use the provided parameters and examples as a starting point to tailor the form to your specific needs.