Showing the Result in Your Emails

There are three ways to get "in / outside your service area" into the enquiry emails you receive. Most people don't need to do anything.

1. Automatically, in the message (every website builder)

When a visitor sends your form, Service Area WIZARD adds a line to the end of the form's message box:

I need a leaky tap fixed.

— Service area check: SE28 8NZ is outside the service area (23.4 km away)

Your form emails the message as normal, so the line shows up in your enquiry email on WordPress, Wix, Squarespace, Webflow, Shopify and plain HTML forms, with no setup. You can turn this off per site on the Sites page (Add the result to the enquiry message).

2. WordPress plugin (Contact Form 7, WPForms, Gravity Forms, Elementor)

If you use the WordPress plugin, it checks the postcode on your server when the form is submitted and adds the result to every email the form sends: your notification and the auto-reply to the customer. No hidden fields needed. It's on by default under Settings → Service Area WIZARD → Form emails.

To put the result somewhere specific in an email template instead, untick that setting and use these tags:

Elementor forms don't support custom tags, so the result is always added to the end of the email.

3. Hidden fields (advanced)

If you'd rather have the result as separate fields, for example to filter enquiries in a CRM, Service Area WIZARD also fills in two values on your form:

Most form builders only keep fields they know about, so add two hidden fields to your form. Here's how for the most popular ones.

Contact Form 7

Add these to your form template:

[hidden service_area_status]
[hidden service_area_distance_km]

Then add them to the Mail tab:

Service area: [service_area_status]
Distance: [service_area_distance_km] km

WPForms

1. Add two Hidden Field fields to your form.
2. For each one, open Advanced and set CSS Classes to saw-status and saw-distance respectively.
3. Add them to your notification email using Show Smart Tags.

Gravity Forms

1. Add two Hidden fields to your form.
2. In each field's settings, set Custom CSS Class to saw-status and saw-distance respectively.
3. They're included in {all_fields}, or insert them into your notification with the merge tag picker.

Elementor forms

1. Add two fields of type Hidden.
2. Open Advanced and set the ID to service_area_status and service_area_distance_km.
3. Use the shortcodes shown under each field (e.g. [field id="service_area_status"]) in your Email message, or leave the message as [all-fields].

HTML forms

Nothing to do. If your form posts normally, the two fields are added automatically. To control where they go, add them yourself:

<input type="hidden" name="service_area_status">
<input type="hidden" name="service_area_distance_km">

Shopify

Edit your theme's contact form (usually sections/contact-form.liquid or main-contact-form.liquid) and add these inside the {% form 'contact' %} block:

<input type="hidden" name="contact[service_area_status]">
<input type="hidden" name="contact[service_area_distance_km]">

Webflow, Squarespace and Wix

These builders don't support custom hidden fields in their built-in forms. Use option 1 above (the result in the message), which works on all of them. You can also see every check, with the distance, on your dashboard's Overview page.

For developers

When a check completes, a serviceareawizard:result event bubbles up from the postcode field:

document.addEventListener('serviceareawizard:result', (event) => {
  // event.detail: { status: 'in_area' | 'out_of_area' | 'not_found', distance_km, postcode }
  console.log(event.detail)
})