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.

Default Fields

The default fields are:

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

Additional Fields

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

Supported additional fields are:

Communication Preference (preferredContactMethod)
How did you hear about us? (source)

By default, all sources defined in project settings are shown.

Are you an agent? (agent)

If the users selects "No", the user is shown the isRepresented field ("Are you represented?"). If the users selects "Yes" to isRepresented, the user is shown additional agent fields (name, company, email, phone).

Street (address[thoroughfare])
City (address[locality])
State (address[administrativeArea])
ZIP (address[postalCode])
Country (address[countryCode])

If countryCode is US, the address[administrativeArea] will be a dropdown of US states. Otherwise, the address[administrativeArea] field will be a text input.

Timeframe (preferences[timeframe])

Defaults to a dropdown of Immediate, Less than 3 months, 3-6 months, 6-12 months, and More than 12 months.

Bedroom preference (preferences[bedrooms])

Defaults to a dropdown of 1 Bedroom, '2 Bedrooms, 3 Bedrooms, 4 Bedrooms, 5 Bedrooms, Penthouse, Studio.

Collection preference (preferences[collectionIds])

No defaults. Options must be explicitly set.

Floor Plan preference (preferences[floorPlanIds])

No defaults. Options must be explicitly set.

Occupancy Type preference (preferences[occupanyType])

Defaults to a dropdown of Primary Residence, Secondary Residence, Investment Property, Other.

Budget (preferences[maxPrice])

Defaults to a dropdwon of Less than $500K, Less than $750K, Less than $1M, Less than $2M, $2M+.

Custom fields (customField[foo])
Metadata text field (metadata[foo])

Configuration

ProjectContactForm

SDK Option	Type		Default	Description
`projectId`	ID	Required	`null`	The ID of the project. You can also use the project's "slug" (eg. the slug for "Acme Condos" is acme-condos).
`formId`	ID	Optional	`null`	The ID of the registration form.
`submitButtonLabel`	String	Optional	`Request Info`
`preloader`	Boolean	Optional	`true`	Determines if `loading...` is shown while initializing the component.
`columns`	Integer	Optional	`1`.
`labelMode`	Enum	Optional	`inset`	Options are `inset \| floating \| stacked`
`fieldAppearance`	Enum	Optional	`outlined`	Options are `outlined \| filled`

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.

Example

The example eblow sets the project ID globally, sets the submit button to "Register", styles the form a la Material, and tracks 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', {
      submitButtonLabel: 'Register',
      labelMode: 'floating',
      fieldAppearance: 'filled'
    })
    .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. You can name the GTM event anything you like. formSubmitted is just an example. For more information on manually tracking to GTM, see GTM data layer with event handlers.

Testing

Use test@test.com to simulate a successful form submission without submitting to Edgewise. Use error@test.com to simulate a failed form submission.