lf-Hosted forms allow you to create deals in your Funnel from forms you've coded yourself. This means that you control and own the markup, and all your form needs to do is to send a POST request to a specific URI.

Setup

The first thing you need to do when you put together your form is to upload it to your server, fill it out and submit it for the first time. This will not create a deal, but will verify the domain name confirming that it belongs to you. The form will only accept submissions originating from this specific domain.

  • There are a few important things to point out:
  • Your form must POST to https://funnelnow.com/[email protected]
  • Your input fields should be marked up with name attributes, and they will become question labels in your deals
  • The name attributes may contain all characters, even spaces and punctuation, additionally Funnel will convert underscores to spaces for you
  • The markup can be anything you want
  • You can optionally specify URIs through hidden fields the form will redirect the users to if you don't want it to show the default success and error pages
  • There are special tricks you can implement in order to cut down on spam
  • In development: required fields

Basic Markup Example

Here's a very basic contact form:

<form action="https://www.funnelcrm.co/[email protected]" method="POST">  <input type="hidden" name="Success" value="http://yoursite.com/thank-you">  <input type="hidden" name="Error" value="http://yoursite.com/error">  <ul>    <li>      <label for="fieldName">Your name:</label><br>      <input type="text" name="Name" id="fieldName">    </li>    <li>      <label for="fieldEmail">Email address:</label><br>      <input type="email" name="Email" id="fieldEmail">    </li>    <li>      <label for="fieldCompany">Company name:</label><br>      <input type="text" name="Company" id="fieldCompany">    </li>    <li>      <label for="fieldProjectName">Project name:</label><br>      <input type="text" name="Subject" id="fieldProjectName">    </li>    <li>      <label for="fieldMessage">Please describe what you need help with:</label><br>      <textarea rows="4" cols="20" type="text" name="Your_message" id="fieldMessage"></textarea>    </li>    <li>      <button type="submit">Send Message</button>    </li>  </ul></form>

s you can see, all you need to take care of is to make sure that the form's method attribute is set to POST, and that your fields' name attributes are uniquely set.

Please note the use of https in the action attribute.

Here's another example of a more complex form that uses check-boxes, radio buttons, and even range sliders:

<form action="https://www.funnelcrm.co/[email protected]" method="POST">  <input type="hidden" name="Success" value="http://yoursite.com/thank-you">  <input type="hidden" name="Error" value="http://yoursite.com/error">  <ul>    <li>      <label for="fieldName">Your name:</label><br>      <input type="text" name="Name" id="fieldName">    </li>    <li>      <label for="fieldEmail">Email address:</label><br>      <input type="email" name="Email" id="fieldEmail">    </li>    <li>      <label for="fieldCompany">Company name:</label><br>      <input type="text" name="Company" id="fieldCompany">    </li>    <li>      <label for="fieldProjectName">Project name:</label><br>      <input type="text" name="Subject" id="fieldProjectName">    </li>    <li>      <label for="fieldMessage">Your Message:</label><br>      <textarea rows="4" cols="20" type="text" name="Your_message" id="fieldMessage"></textarea>    </li>    <li>      <label for="fieldSelect">Please choose:</label><br>      <select name="Please_choose" id="fieldSelect">        <option selected="selected" disabled="true">--Please Select --</option>        <option value="Option 1">Option 1</option>        <option value="Option 2">Option 2</option>      </select>    </li>    <li>      Checkboxes!<br>      <input type="checkbox" name="Checkboxes[]" value="Checkbox 1" id="checkbox1">      <label for="checkbox1">Checkbox 1</label><br>      <input type="checkbox" name="Checkboxes[]" value="Checkbox 2" id="checkbox2">      <label for="checkbox2">Checkbox 2</label>    </li>    <li>      Choose one<br>      <input type="radio" name="Radio_buttons" value="Radio Value 1" id="radio1">      <label for="radio1">Radio 1</label><br>      <input type="radio" name="Radio_buttons" value="Radio Value 2" id="radio2">      <label for="radio2">Radio 2</label>    </li>    <li>      <label for="fieldRange">Even ranges:</label><br>      <input type="range" name="Your_range" id="fieldRange">    </li>    <li>      <input type="text" name="_gotcha" style="display:none">      <button type="submit">Send Message</button>    </li>  </ul></form>

As you can see, you can feed a wide variety of data to Funnel with simple form controls.

Special name attributes for form fields

If you give certain fields specific name attributes, they will mean something to Funnel and it will be able to automatically populate certain things such as customer names, email addresses, deal names, etc.

Here's a list of attributes with their corresponding output:

  • Attribute name will populate customer's name
  • Attribute email will populate customer's email
  • Attribute company will populate customer's company field
  • Attribute subject will populate deal name

Please keep in mind that the email field is required for every form in order for it to pass validation.

And here are the hidden form fields you can use in order to redirect the user to a specific URI depending on the success of the form submission. You will want to use this if you don't want to use the default success and error pages, and perhaps want to use your own branded page, offer the users rewards for filling out the forms, etc.

  • Attribute success will redirect the user to a specified URI after a successful form submission
  • Attribute error will redirect the user to a specified URI after an unsuccessful form submission

Example:

<input type="text" name="success" value="http://yoursite.com/thank-you.html">

Important Note Regarding Check-boxes

Check-boxesare kind of a special type of form field, in that they allow multiple options to be passed as the result of submitting a form. Due to this peculiarity, you are required to add a pair of brackets to the end of the name attribute, like so:

<input type="checkbox" name="my_checkbox[]" value="Checkbox 1 value"><input type="checkbox" name="my_checkbox[]" value="Checkbox 2 value"><input type="checkbox" name="my_checkbox[]" value="Checkbox 3 value">

The name attribute can still contain whatever characters you want, but the important thing is that it needs to end with a pair of brackets.

Submitting Forms Asynchronously (AJAX)

It is totally possible to do this if you don't want to take the user away from the page where the form is. In this deal a simple confirmation or error message will be shown to the user after they submit the form.

Taking the simple example from above into consideration, here's how one would submit it asynchronously, using some basic jQuery code:

function ajax_call() {  $.ajax({    url: 'https://www.funnelcrm.co/[email protected]',    method: 'POST',    data: {      Name: $('input[name=Name]').val(),      Email: $('input[name=Email]').val(),      Company: $('input[name=Company]').val(),      Subject: $('input[name=Subject]').val(),      Your_message: $('input[name=Your_message]').val(),      Please_choose: $('input[name=Please_choose]').val(),      Checkboxes: $('input[name=Checkboxes]').val(),      Radio_buttons: $('input[name=Radio_buttons]').val(),      Your_range: $('input[name=Your_range]').val()    },    dataType: 'script'  });}

It's important to note that if you plan to submit the form asynchronously, it's best to stick to simple values for the name attributes, and separate words with underscores.

Example:

<input type="text" name="Project_name">

Spam Prevention and Form Validation

It is a known, harsh reality that there is always a possibility that you will receive spam through your contact forms. Luckily, we've implemented a couple of ways you can fight it.

HONEYPOT FIELDS

This is a known and fairly reliable method of keeping the spam bots in check by having an input field within your form, that's hidden from your users, but visible to bots. This technique relies on the logic that if the field has been filled out, it is most certainly spam, since the field is hidden from regular users.

To implement it simply add an additional “dummy” input field like so:

<input type="text" name="_gotcha" style="display:none">

ADDING YOUR EMAIL ADDRESS VIA JAVASCRIPT

The forms by default contain your email address as a part of the action attribute of your form element. If you are concerned that they will get harvested by spam bots, you can add that attribute via JS, so that it will not be visible to the bots.

var contactform =  document.getElementById('contactForm');contactform.setAttribute('action', 'https:www//funnelcrm.co/' + 'your' + '@' + 'email' + '.' + 'com');ake sure to replace the ID contactForm with the value of your form's id attribute, and the following strings:
  • your with the part of your email address to the left of the @ character,
  • email with the part of your email address to the right of the @ character, but until the . character,
  • and .com with the part to the right of the . character (however your email address may as well likely end with a .com).

So let's say that your form has an id="#myForm", and that your email address is [email protected] (if it is, funnel email address, dude).

The JavaScript would look like this:

var contactform =  document.getElementById('myForm');contactform.setAttribute('action', 'https:www.//funnelcrm.co/' + 'coolcityboy' + '@' + 'gmail' + '.' + 'com');

Form Validation

By default your forms will require only a valid email address in order to be submitted. If a valid email address is missing the user will be taken to an error page, or an error message will be shown depending on the way you are submitting the form (the standard way or asynchronously).

Apart from the need to claim the web page you will be placing the form on — so that no one can take your form, and create submissions from somewhere else out of your control — you can choose to add front-end validation to your forms.

There are various form validation scripts that you are able to just include into your page, and with the aid of some classes and required attributes, you will be good to go.

Here are the ones we recommend:

1. UNI-FORM VALIDATION

This is the validation script that can be used with the forms produced by the Funnel's form builder, or any other form for that matter.

2. PARSLEY

This is an excellent universal form validation script, widely used by developers.

3. BOOTSTRAP VALIDATOR

This script will validate your forms coded with the Bootstrap markup.

4. FORMANCE

This is a cool script to use if your form requires complex data formatting, like dates, phone numbers, etc.

5. FORMVALIDATION.IO

Another powerful one, with support for all major front-end frameworks including Bootstrap, and Foundation.

Did this answer your question?