Leads are key to a site build. They provide a way of submitting leads on the Homeflow platform. You will find examples of different lead forms in the following section.
Email type leads are submitted to Homeflow and then on to the agent by ubiquitous web forms. Here’s a simplified version:
<form action="/properties/{{property.property_id}}/{{property.primary_channel}}/leads" method="post">
<div id='form_error'></div>
<label class="text" for="firstname">First name</label>
<input id="firstname" name="lead_client[first_name]" type="text">
<label class="text" for="surname">Last name</label>
<input id="surname" name="lead_client[last_name]" type="text">
<label class="text" for="email">Email</label>
<input id="email" name="lead_client[email]" type="email">
<label class="text" for="telephone">Telephone</label>
<input id="telephone" name="lead_client[tel_home]" type="text">
<label class="text" for="message">Message</label>
<textarea id="message" name="lead[message]" rows="3"></textarea>
<button type="submit">Send enquiry</button>
</form>Once a lead is sent, a flash message can be displayed. Find out more about flash messages.
Branch enquiry leads are submitted using the following set of form elements. The HTML can be customised as needed:
<form action="/leads" method="post" class="contact_form branch_form" id="contact_form">
<div id='form_error'></div>
<input type="hidden" name="lead[branch_id]" value="{{branch.branch_id}}">
<input type="hidden" name="lead[is_branch_lead]" value="1">
<input id="firstname" class="required" name="lead_client[first_name]" type="text">
<input id="surname" class="required" name="lead_client[last_name]" type="text">
<input id="email" class="required" name="lead_client[email]" type="email">
<input id="telephone" name="lead_client[tel_home]" type="text">
<textarea id="message" name="lead[message]" rows="3"></textarea>
<button id="contact_form_button" type="submit">Send message</button>
</form>If you’re constructing a form on a branch index page, or elsewhere, you can use a branch selector dropdown:
<select name="lead[branch_id]" tabindex="1">
{% for branch in agency.branches %}
<option value="{{ branch.branch_id }}">{{branch.name}}</option>
{% endfor %}
</select>The Homeflow platform allows users to contact staff directly and leads are copied to the agency email address. Here’s a sample form construct:
<form method="post" action="/leads">
<input type="hidden" name="lead[agency_employee_id]" value="{{ staff_member.user_id }}">
<h2>Contact {{staff_member.first_name}}</h2>
<div class="left-col">
<label>First Name <input name="lead_client[first_name]" type="text"></label>
<label>Last Name <input name="lead_client[last_name]" type="text"></label>
<label>Email <input name="lead_client[email]" type="text"></label>
<label>Telephone <input name="lead_client[tel_home]" type="text"></label>
<label>Message <textarea name="lead[message]"></textarea></label>
</div>
<div class="right-col">
<label>Street Address <input type="text" name="lead_client[street_address]"/></label>
<label>Town <input type="text" name="lead_client[town]"/></label>
<label>County <input type="text" name="lead_client[county]"/></label>
<label>Postcode <input name="lead_client[postcode]" type="text"></label>
<input type="submit" value="Submit">
</div>
</form>Most of this is very standard form HTML, though note that the action, hidden employee_id/user_id and the names of the fields are super important. Without these the submission will fail.
The Ctesius app allows you to register new users to an agency. The standard URL to get to the page is /register and the registration form needs to live in a new.liquid file within a user folder. There are many fields you can use to request information from the client, though name, email and password are absolutely required:
<form action="/user" method="post">
<input type="hidden" value="{{agency.agency_id}}" name="client[agency_id]">
<div id='form_error'></div>
<label class="text" for="client[first_name]">First name</label>
<input id="client[first_name]" name="client[first_name]" type="text">
<label class="text" for="client[last_name]">Last name</label>
<input id="client[last_name]" name="client[last_name]" type="text">
<label class="text" for="client[email]">Email</label>
<input id="client[email]" name="client[email]" type="email">
<label class="text" for="client[password]">Password</label>
<input id="client[password]" name="client[password]" type="password">
<label class="text" for="client[password_confirmation]">Confirm password</label>
<input id="client[password_confirmation]" type="password" name='client[password_confirmation]'>
<label class="text" for="client[street_address]">Street</label>
<input id="client[street_address]" name="client[street_address]" type="text">
<label class="text" for="client[town]">Town</label>
<input id="client[town]" name="client[town]" type="text">
<label class="text" for="client[county]">County</label>
<input id="client[county]" name="client[county]" type="text">
<label class="text" for="client[postcode]">Postcode</label>
<input id="client[postcode]" name="client[postcode]" type="text">
<label class="text" for="client[tel_mobile]">Mobile</label>
<input id="client[tel_mobile]" name="client[tel_mobile]" type="text">
<label class="text" for="client[tel_home]">Home Telephone</label>
<input id="client[tel_home]" name="client[tel_home]" type="text">
Note: You will always need to have the message either visible or hidden on the form so that the registration lead is submitted properly.
<label for="lead[message]">Comments</label>
<textarea id="message" name="lead[message]"></textarea>
Optionally, you can grab their requirements:
<h3>Your Requirements:</h3>
<input id="client[is_sales_applicant_at]" name="client[is_sales_applicant_at]" type="checkbox" checked="checked">
<label class="check" for="client[is_sales_applicant_at]">I am looking to buy</label>
<input id="client[is_lettings_applicant_at]" name="client[is_lettings_applicant_at]" type="checkbox">
<label class="check" for="client[is_lettings_applicant_at]">I am looking to rent</label>
<input id="client[is_vendor_at]" name="client[is_vendor_at]" type="checkbox">
<label class="check" for="client[is_vendor_at]">I have a property to sell</label>
<input id="client[is_landlord_at]" name="client[is_landlord_at]" type="checkbox">
<label class="check" for="client[is_landlord_at]">I have a property to let</label>
<button type="submit">Send to {{agency.name}}</button>
</form>
On submit, be in that the lead has sent successfully has failed, the user will get redirected to a flash message, which will populate in the div container. Read more about flash messages.
Like the register form seen above, a valuation request is a lead type in itself. It also shares the same fields as the register form, the only differences are the form directives and one or two hidden fields so that the request hits the correct controller in the Ctesius app. In addition, the valuation form needs to live in a /pages/request_valuation.liquid file.
Review the register form for the form fields and amend the form head as follows to get up and running:
<form action="/leads" method="post" id="contact_form">
<input type="hidden" name="lead[is_valuation_request]" value="1"/>
<input type="hidden" value="{{agency.agency_id}}" name="lead_client[agency_id]">
... other form fields
</form>
You can also add client bookings to your valuation lead forms, for example,
<label>Would you like to book a viewing?</label>
<label for="lead_booking[book_viewing]">Yes</label>
<input id="book_viweing" type="radio" value="yes" name="lead_booking[book_viewing]">
<label for="lead_booking[book_viewing]">No</label>
<input id="book_viweing" type="radio" value="no" name="lead_booking[book_viewing]">
<label class="text" for="lead_booking[booking_time]">Time</label>
<input id="lead_booking[booking_time]" name="lead_booking[booking_time]" type="text">
<label class="text" for="lead_booking[booking_day]">Day</label>
<input id="lead_booking[booking_day]" name="lead_booking[booking_day]" type="text">
<label class="text" for="lead[booking_month]">Month</label>
<input id="lead_booking[booking_month]" name="lead_booking[booking_month]" type="text">
<label class="text" for="lead[booking_year]">Year</label>
<input id="lead_booking[booking_year]" name="lead_booking[booking_year]" type="text">
Note: booking_time is optional, but booking_day, booking_month and booking_year are all required otherwise the form will fail.
Note: Months should be passed as a number, not a word. For instance January would be “1”. You could use a drop down box for this (and a similar method can be used for the day),
<select id="lead_booking[booking_month]" name="lead_booking[booking_month]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Validation is super easy on the forms. Included in the application.js bundle is jquery.validate. You can add basic validation with the following snippet.
$().ready(function() {
$(".contact_form").validate({
// Specify the validation rules
rules: {
first_name: "required",
last_name: "required",
email: {
required: true,
email: true
}
},
// Specify the validation error messages
messages: {
first_name: "Please enter your firstname",
lastn_ame: "Please enter your lastname",
email: "Please enter a valid email address"
}
});
});Custom lead forms can be created using custom forms which are explained in more detail here.
To protect our forms from spam, we urge developers to use the reCaptcha tool.
To implement a reCaptcha using Liquid, add this to your form:
white
This will produce a reCaptcha with a white background.
Alternate themes are available. See the ‘themes’ section here for a selection of options that can be used.