Project Contact Form

The Edgewise project contact form component makes it easy to register interest for your project on your marketing website (WordPress, SquareSpace, custom sites, etc.).

You can customize the form fields via Edgewise Registration Forms.

Supported Fields

The default fields are:

Name (name, required)
Email (email, required)
Phone number (phone, optional)
Comments (text, optional)

Additional fields that can be enabled are:

Are you an agent? (isAgent)
Are you represented by an agent? (agent)
Communication Preference (preferredContactMethod)
How did you hear about us? (source)
Postal code (address[postalCode])
Timeframe (preferences[timeframe])
Bedroom preference (preferences[bedrooms])
Budget (preferences[maxPrice])
Custom fields (customField[foo])
Metadata text field (metadata[foo])

Renaming default fields and enabling optional fields requires a custom registration form.

Configuration

ProjectContactForm (JS SDK) | <ewc-project-contact-form /> (WebComponent)

SDK Option	WC attribute	Type	Description
`projectId`	`project-id`	ID	Required. The ID of the project. You can also use the project's "slug" (eg. the slug for "Acme Condos" is acme-condos).
`formId`	`form-id`	ID	Optional. The ID of the registration form. The default is `null`
`submitButtonLabel`	`submit-button-label`	String	Optional. The default is `Request Info`
`preloader`	`preloader`	Boolean	Optional. Determines if `loading...` is shown while initializing the component. The default is `true`.
`columns`	`columns`	Integer	Optional. The default is `1`.

Form components can parse query params from the page's URL. This can be used to extract UTM parameters, as well as prepopulate the form (both visible and hidden fields). The supported UTM parameters are:

utm_source
utm_medium
utm_campaign
utm_content
utm_term

For example, a form component that loads at https://example.com?utm_campaign=Foo%20Bar would set the utm[campaign] form field to Foo Bar.

If you have a multi-page website and want to capture UTM codes across multiple pages, please see here on how to load and initialize the SDK on all pages for UTM capture.

Default Values

Additionally, it is possible to pre-populate the following form fields using the following URL query params:

ewz[name]
ewz[email]
ewz[phone]
ewz[isAgent]
ewz[address][postalCode]
ewz[source]
ewz[assigneeId] (hidden field)
ewz[origin] (hidden field)
ewz[tags] (hidden field)

For example, a form component that loads at https://example.com?ewz[address][postalCode]=12345 would set the address[postalCode] form field to 12345.

This can also be used to have agent specific forms. If assigneeId is set, this will override any auto-assignment (eg, Round Robin).

Events

The contact form component emits events that can be handled in javascript. This is particularly useful for tracking (eg, Google Tag Manager).

Events emitted are:

created
submit

The submit event will only emit on successful form submission.

JS SDK Example

To track to GTM on a successful form submission:

<head>
  <script src="https://libs.edgewise.cloud/edgewise.js@1"></script>
</head>

<body>
  <div id="contact"></div>

  <script>
  Edgewise({ projectId: 'ID_OR_SLUG_GOES_HERE' })
    .components()
    .create('ProjectContactForm')
    .mount('#contact')
    .on('submit', (event) => {
      // console.log('ProjectContactForm submit', event)
      dataLayer.push({ event: 'formSubmitted', 'formName': 'contact-form' })
    })
  </script>
</body>

GTM data layer events can be referenced via a custom event trigger. Additional information about the GTM data layer can be found here.

WebComponent Example