Funnel help & documentation

Getting started

Funnel is a service that aims to replace the standard contact forms found on many websites.

If you’ve ever had to set up a form like this yourself, you may have experienced first–hand the problems you can run into, and are aware of the skills that are needed to implement, create and troubleshoot one.

Not only does Funnel provide everyone with easily customisable forms with copy/paste integration, it also comes with a set of useful tools to help you manage the contact requests you receive, send proposals, and manage your customers.

Using Funnel

We tried our best to keep things simple as far as your workflow goes.

Once someone submits the contact form embedded in your website, a new case will be created within Funnel. You will receive an email notification that there’s a new case waiting for you, and the sender will be getting a copy of the message as well.

At the same time a record will be created in your contacts database with the information the person who contacted you provided in the form. This is a super–cool way of knowing who contacted you in the past, and being able to go back to this kind of information in one place is great.

From now on you can send and receive messages with the potential customer, and even send a proposal in case your contact form is used for generating sales leads for your product or service.

Once you’re done with a case you can mark it “won” or “lost” in order to keep track of how your business is doing. Knowing how many contact requests end up with an actual deal and how many fall through, is a great way to optimize your sales process.

Creating an account

In order to start using Funnel, first thing you need to do is to register for the free trial which gives you access to all the features, and 10 free cases. You don’t need to enter your credit card information, all you need is a Google account (both Gmail and Google Apps are supported).

In the sign up process you will be taken to a Google-hosted page where you will need to sign in, or select a Google account to sign up with in case you are signed in with multiple accounts at the moment (the same goes for logging in).

The last step you need to do is to fill in your company details, and you're ready to go.

Your new Funnel account is immediately usable, and you will be taken to the forms section where you will be presented with a default form which you can save, or edit further to suit your needs.

Personalizing your account

Since registration is based on your Google account, your name and avatar are automatically pulled in and displayed as such. All messages you send through Funnel appear as they are coming from the email address you've signed up with.

There are several other ways to personalise your Funnel:

1. Adding a logo to proposals

This is a really nice touch that just makes the proposal seem "official", and serves as a nice reminder of who is sending the proposal.

When you upload your logo, make sure that you upload an image that's at least 300x300 pixels in size, as it will be scaled down to 150x150 in the email for retina screens. If your image is not in a square format, it will be cropped to a square from the center of the image.

Here's how the proposal looks on the customer's end:

You only need to set the logo once, and it will automatically be used for each proposal.

2. Adding images to descriptions

Everywhere where you see the text editing toolbar for long-form text, you will see an icon that enables you to add an image.

This allows you to add an as long as it's already online, and you have its web address (URL).

If you decide to use this feature in proposals, make sure your image is not wider than 516px, otherwise it will poke out of the email's boundaries which will look rather odd.

3. Proposal footers

Each proposal has its own footer, and while this area is usually used to highlight the terms of the proposal (as you can see from the default text), you are free to put in whatever you want in there, or remove it completely (just delete the text, and it won't output anything).

4. Email footers

All emails sent from Funnel — including replies and proposals — can contain footer text of your liking, it can even contain links and images so feel free to get creative with this!

We've started you off with some default text and links, which you can replace with the text of your choosing.

About cases

Every time someone submits the contact form on your website, a new case is created inside Funnel, and a notification email is sent to both you and the sender.

You can view cases as your potential deals, stored outside of your inbox. The benefit of this is that it lowers the risk of you forgetting to follow up or reply to a customer just because newer email has piled up on top of the one you're supposed to work on. Funnel also provides you with many other conveniences and tools that you can use to manage and track your deals.

Since Funnel is connected to your Gmail account, you can reply to these notifications and the message will get delivered to both your customer, and Funnel so you can view the complete conversation no matter where you send the reply from. (NOTE: Funnel can't access your inbox, or read your existing messages.)

Cases are not limited to a single contact. You can add people from your contacts, or by simply CC-ing them to the email thread, and they can opt out of the conversation at any point as well.

You can delete any case within your Funnel account. If you decide to delete a case, only the case within Funnel itself will be deleted, not the message thread that may exist in your inbox, since Funnel doesn't have access to your inbox.

The contact that resides in your contacts database will remain intact, and the contact information, along with all the messages you may have had within the case will remain in your Gmail or Google Apps account.

Creating cases

Cases are for the most part created automatically, when people submit the contact form on your website. However, there are deals that you may want to track that don't come from your website, and you can add those deals, and attach them to new or existing contacts.

Creating cases manually

Cases can be created from a couple of places in the app:

  • Case listing
  • Case page
  • Contact profile

In order to be able to create a case manually you need to have at least one form. If you have only one form, Funnel will automatically use that form to create your case, but if you have multiple forms, you will need to choose a form through which you will create the case.

Once you create a case manually, your contact will not be notified of this, so if you want to initiate a conversation you should do it as a first message (or a proposal) within the newly created case.

Tip: special forms for manual cases

At Superawesøme we created a special super-short form used for manually entering deals that aren't originating from our website's contact form. It only uses name, email, and project name fields so it's super-quick to fill out and makes it that much easier to keep all deals in Funnel.

If you need to contact the person you've created the case for, simply send a message from the case. Easy, peasy!

Case statuses aka the sales funnel

A case can have several statuses:

New

All cases that have come in or have been manually created, but haven't been replied to are automatically marked as new.

Negotiation

This label is reserved for cases that have received at least one reply from you, and are in general state of conversation about the deal.

Proposal sent

Once you send a proposal, the status changes to "proposal sent" to indicate that you are waiting for a reply to the proposal. Once you receive the reply, the case is labeled with "negotiation" again.

Won, or lost

You can mark cases manually as "won" or "lost" yourself, and additionally you can revert them to the stage of "negotiation" as well. Marking cases with "won" and "lost" labels is super-useful for keeping track of how many deals you have won, vs. how many you have lost.

Together these statuses form what the professional sales people call a “sales funnel”. Your deals go through each of these phases in order to be marked won or lost.

Working with proposals

In the case that you are using Funnel in such a way that you need to send out formal proposals to your customers, doing so is really easy and you shouldn't have any problems sending professional proposals in no time.

Sending out a proposal works the same way as replying to your customer's message, only you will be using a “proposal” reply type message, instead of a standard text–only reply.

The proposal reply allows you to create a professional proposal with all usual elements:

  • who prepared the proposal,
  • who is the proposal prepared for,
  • content area that accepts rich text input,
  • currency setting,
  • proposal items,
  • footer.

Content area

The proposal content is a place that accepts rich text that you can optionally add to your proposal. It's usually used to explain the project, provide information about timeframes, schedules, scope, etc.

Proposal items

This is the part of the proposal that deals with the actual costs. You are free to define your proposal items as a fixed cost, or as an hourly, daily, or a monthly fee.

Currency setting

Each proposal can have its own currency in case you are dealing with international customers. You can always set a default currency from the settings.

Proposal footer

This is an additional rich text area that you can use to display some additional content, frequently used for the terms that apply to the proposal, and possibly link to a page explaining them. This is usually a good place for any fine print you might want to add to your proposals.

As with the currency, you can set a default proposal footer from the settings screen, and than change that content for each proposal individually.

Bonus tip:

Should you lose your internet connection, or accidentally close the tab or browser window in the middle of typing up a proposal or a reply to your customer, Funnel will save whatever you have typed in to the form fields, so you don't have to retype and lose precious time.

Managing case recipients

Each case is tied to a primary contact that is assigned to the case.

If you want to add someone to a case conversation, you can simply do that from the contact list for that case in the sidebar. Or if you are using your email client to reply just make sure that person is CC-ed to the case email address. Funnel will get their info, store it in your contacts list, and CC them on every email in that case from that point onwards.

Additionally, if your contact chooses to CC someone to the email thread — or you do so from your email app — those people will automatically be added to the conversation, and CC-ed every time you send a reply from Funnel.

Should you wish to remove someone from a case conversation, you can do that from the case page under the “Discussing With” heading in the sidebar.

People can also unsubscribe themselves from any case they are a part of using the unsubscribe link found in the footer of every message.

Message view statuses

Have you ever sent an email and wondered if the person has even read it? Sucks, huh?

This is why emails sent with Funnel have statuses that let you know who has opened the message you sent, and when.

You are able to see this information in the footer of each message you sent to your customers. If the message has multiple recipients, you will be able to see this information for each individual recipient.

Creating cases via email

Funnel has a very handy feature that allows you to simply send an email to a specific “catch-all” email address that's assigned automatically to your account, and that email message will become a case.

There are only a couple of very simple rules:

  • The subject line will become the case name.
  • The contents of the email's body will be included as text within your newly created case.
  • All attachments will be stripped and ignored.
  • If you create a case via email from an email address your Funnel account is registered with, the case will not have a contact attached to it, so you need to do it yourself by selecting an existing contact, or creating a new one.
  • This is a perfect way to create cases really quickly while you're on the go from your mobile device, or simply if you don't like forms and want people to contact you by sending you an email from the comfort of their own email client.

Tips & Tricks

Sometimes someone will send you an email directly, inquiring about a project or a business oportunity. The easiest way to get this kind of case into Funnel is to reply to the email as you would, and add your catch-all email address as BCC. This will create a case in your Funnel, and add all email addresses mentioned in the email thread as recipients of the case. From then on you can send a reply form the case page within Funnel and that will set the reply-to address for everyone involved to the case's address, and the entire conversation will be recorded within the case.

Case values

This is a very simple feature that allows you to be able to assign a value to all or just some of your cases at any stage of your sales pipeline, and thus be able to calculate the combined worth of that particular stage of the funnel.

This information is private to you, and your customers are not aware that you have assigned a value to their case.

Also, the case value number is different and not related to the proposal value you may send out. This is set up like so because you may be quoting for a single project, but the whole deal is worth much more because of the type of project (e.g. the deal is open-ended, but you are sending a proposal/quote for the first month of the work.)

About contacts

In Funnel a contact record is created automatically when someone submits the form embedded in your website. This way you are getting a database of people who have inquired about you or your services that's ready to be put to good use.

When someone contacts you through your Funnel form, their name, email address and (optionally) company name are recorded. Additionally the newly created contact is linked to the case that's been created. As a bonus, Funnel pulls in their avatar image (from Gravatar).

You can tag your contacts, and create notes on their profiles.

Adding & importing contacts

Adding contacts manually

Of course, you can populate your contacts database by yourself by creating contacts manually. It is a simple process, and the newly created contact will not be aware that you have added them to your database.

Importing contacts

If you have a big list of contacts you'd like to import into Funnel, you can do it in two ways:

1. Importing Contacts From a CSV

Funnel can import your contacts from a comma separated values file, as long as it's formatted in a specific way, here's an example of how your CSV file should be structured:

Name, email address, company 

You can import any CSV file into Google Sheets/Drive, Microsoft Excell, or Apple's Numbers app and make the necessary changes required by Funnel.

This is how your spreadsheet should look like:

Once you edit the spreadsheet you need to export it into the CSV format again, and you're ready to import it into Funnel.

Now that you're ready to import the CSV into Funnel, head on over

to the contacts section, and hit the Bulk Options button in the header, and choose the Import contacts option. After that you will be prompted to upload a file.

Once the file is uploaded Funnel will load its contents into a table filled with the contact's you're about to import, and here you can pick and choose which ones you want to import, and which ones you don't. Contacts that already exist will be shown but greyed out so no duplicates will be created. There's also an Add All Contacts option if you have a lot of contacts and don't want to click too many times.

2. Importing contacts from Gmail or Google Apps contacts

In case you want to import contacts from any Gmail or Google Apps account, you can choose this option instead of CSV file. All you need to do is hit the Bulk Options button in the header, choose the Import contacts option, and once the popup opens instead of uploading a file, click/tap the Import From Gmail button.

This will take you to a Google-hosted log in dialog (similar to the one you used when you signed up for Funnel).

Once you log in to the Google account you want to import contacts from and authorise the Funnel Contacts app to access your contacts, Funnel will load a table filled with the contact's you're about to import, and here you can pick and choose which ones you want to import, and which ones you don't. Contacts that already exist will be shown but greyed out so no duplicates will be created. There's also an Add All Contacts option if you have a lot of contacts and don't want to click too many times.

What Happens When an Existing Contact Creates a New Case?

The contacts in your database are unique by their email address. This means that there will be no duplicate contacts, as Funnel will not touch the existing contacts from the database when they create a new case, and the new case will simply be added to their profile.

There might be situations where a contact submits the form multiple times (creating multiple cases) but uses a different name each time. If this happens you will see an icon next to their original name that explains why the name in the submitted form differs from the one in your contacts database, and offers to update it for you with the new information.

Tags & notes

Apart from their name, email address and company information, you can assign tags and notes to your contacts. All of this information can be edited from the contact's profile page by entering the edit mode for that particular contact.

Tags

We suggest you come up with a system that works best for you when it comes to tags, good examples of tagging your contacts is:

  • by type (e.g. connection, headhunter, client),
  • by role (e.g. CEO, team lead, programmer, designer),
  • by status (e.g. worked with, follow-up),
  • by location (e.g. local, EU, USA, NL, NYC)
  • etc.

You can always remove a tag from a contact by clicking on the little "x" icon within it. If you remove the last instance of a tag — meaning that no other contact now contains said tag — the tag is completely gone from your tag list.

Contact notes

We encourage our customers to use notes extensively, as they are great for:

  • keeping meeting notes and results,
  • keeping a log of contacts with the person,
  • jotting down important information about the person,
  • attaching important documents or files to the contact profile,
  • etc.

Deleting contacts

You can delete a contact from your database at any time. In case they have an existing case (irregardless of the status) they will appear within it as "Name Lastname (deleted)" so that you know you deleted them from your database.

When you delete a contact you only remove their information from your contact database, their existing cases, or your conversations with them will remain untouched.

Deleting contacts in Funnel doesn't touch the data in your Gmail or Google Apps account, including email conversations, address book details. They will not be modified or removed by Funnel in any way.

Exporting contacts

Exporting your contacts is a nifty feature that allows you to export a CSV file with all your contact information.

Example Usage:

Export your contact list from Funnel and update a MailChimp list with the new data in order to send a newsletter. This is a super-useful feature when you want to create a blast sale, or fill up the schedule when business might be slow by offering deals or discounts.

About Funnel forms

First thing you need to do once you start using Funnel is to create a contact form through which your cases will be created. Each time someone submits one of your forms, a new case is created.

It can be as simple as Name/Email/Subject/Message, or far more complex containing multiple and single choice answers, and as many fields as you'd like.

Funnel has a really simple form editor that will help you with this. It is interesting to note for the technically inclined, that all Funnel forms are featuring Uni–Form markup and styles, so if you've ever worked with Uni–Form, you'll immediately be familiar with Funnel forms as well.

Once your form is created, all you need to do is to paste a couple of lines of code into your web page or CMS, and you're all set.

If you're familiar with HTML code you can code up your own form (with your own markup) within your web page, and point it to post to a specific URL, which will in turn create a case for you.

Form builder

Funnel provides all users with an extremely simple form editor, anyone can use to create their contact forms.

You can edit an existing form at any time, add, remove or rename fields. Keep in mind that there are some fields that all forms must have, and therefore can not be removed (but can be renamed), these are:

  • name used for your contact's name,
  • email used for your contact's email address,
  • subject used for the name of the case.

You can rename those fields, though so you can match the language to your site. Also editable are the confirmation message, button labels, form description, and form hints.

There is a special field called "Company" that if included in your form will be used to populate the company information about your contacts when they submit the form.

You can reorder the form fields within any form by dragging and dropping a field to the desired position within the form.

Form Title, Description and Form Hints

Form description and title are textual form elements that come before the form fields.

Form hints are elements that each individual field can have. They are meant to be used for help text for that particular field. If you don't want the form field to have a hint simply leave the field blank.

If you leave the form description, or any field's hint empty they will not be rendered within your form.

Embedding forms

Embedding Funnel forms is really easy. As soon as you've created a form you get its embed code that you simply copy and paste into your site, wherever you'd like the form to appear.

The code that you will need to copy and paste will look something like this:

<link rel="stylesheet" href="https://s3.amazonaws.com/funnelnow/uni-form/uni-form.css"> <!-- Your form's CSS -->
<script src="//code.jquery.com/jquery.js"></script> <!-- You don't need jQuery if you already included it -->
<div id="funnelFormContainer"></div> <!-- This is the container of your form -->
<script type="text/javascript" src="http://funnelnow.com/widget/[WIDGET_ID]"></script>
  1. The first line is the Uni-Form stylesheet that gives your form some basic styling and layout. If you want to style your form from scratch, you can choose to discard this line and not include it.
  2. The second line includes the jQuery JavaScript library needed for all Funnel forms to work. If you are already including jQuery elsewhere in your page, you can discard this line.
  3. The third line is the HTML element that will hold your form. This element must be present in your page.
  4. Fourth line includes the JavaScript code needed for the embedded form to work. This line must be included.
  5. Simply drop this piece of code wherever you want your form to appear within a page on your website. That's all there is to it.

Warning: Important note about having multiple forms per page.

At the moment it is not possible for more than one Funnel form to reside on the same page at once. Make sure you always have just one form on the page in order for things to work as expected.

Self-Hosted forms

Self-Hosted forms allow you to create cases 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 case, but will verify the domain name comfirming 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 cases
  • 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://funnelnow.com/[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>

As 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 checkboxes, radio buttons, and even range sliders:

<form action="https://funnelnow.com/[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, case 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 case 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 checkboxes

Checkboxes are 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 case 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://funnelnow.com/[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', '//funnelnow.com/' + 'your' + '@' + 'email' + '.' + 'com');

Make 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, awesome email address, dude).

The JavaScript would look like this:

var contactform =  document.getElementById('myForm');
contactform.setAttribute('action', '//funnelnow.com/' + '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.

Styling forms

As mentioned before, all Funnel forms are Uni–Form flavored, meaning they support Uni–Form markup and styles.

The form embed code that you will be provided with will contain the following lines:

  • The CSS file containing basic styles for your form — feel free to discard this line if you wish to style the form yourself
  • jQuery — only include if you haven't included it into your site before
  • A container div — this is the HTML element that will contain your Funnel form
  • Funnel script — used to embed your Funnel form

There are a couple of other elements that you might want to style in a particular way depending on the design of your site.

Error messages

These are following the Uni-Form markup convention and will come pre-styled.

Basic style:

Sample markup:

<div class="errorExplanation" id="errorExplanation">
  <h2>Please correct the errors below</h2>
  <p>There were problems with the following fields:</p>
  <ul>
    <li>Name can't be blank</li>
    <li>Email can't be blank</li>
    <li>Email is not valid.</li>
    <li>Project name can't be blank</li>
    <li>Request item values is invalid</li>
  </ul>
</div>

Additionally each label and input/select/textarea field will be wrapped in a special div with a CSS class .field_with_errors and you can use this class as a hook for your additional error state styling.

Success message

Also Uni-Form standardized, but without any kind of initial styling.

Sample markup:

<div class="notice">
  Thanks for contacting us. We will be in touch soon.
</div>

“Sending message” indicator

This is the bit of text that appears once the user clicks the button to submit the contact form.

Sample markup:

<div class="fnl-processing" id="spinner" style="display: none;">
  Sending, please wait…
</div>

About Gmail & Google Apps integration

We believe that our customers should own their data, and that belief is in the core of this important feature.

Funnel uses Gmail or Google Apps first of all to handle your identity within the service. Also to store all conversations and contact information you create through Funnel, that way even if you decide one day you don’t want to use Funnel anymore you don’t even have to mess with exporting your data, and migrating it elsewhere. It stays right there, in your Gmail account where you can continue any conversation you had with your own customers, and all your contacts are conveniently at hand.

Once you sign in with Gmail, you are actually signing in (or creating your Funnel account if you're signing in for the first time) through Google's oAuth service, and you are granting Funnel access to your emails and contacts.

This is absolutely necessary for Funnel to work, although we are only requesting access to your identity (name, email address, and avatar), and not access to your inbox and email messages.

Your privacy

Nobody at Sprawsm doo has access to your Google data, or can read your emails and contact information. The whole point of going through Google for authentication is to enhance security, not jeopardise it.

Funnel doesn't require access to your Gmail or Google Apps email or contact list, as you can see on the sign up/sign in screens.

Replying to messages & communication with your customers in cases

You can use Funnel to communicate with your customers, or you can simply reply to the emails from your Gmail inbox (or from your email client). The messages will always be routed both to the customer, and Funnel, so the message thread will be complete and identical in your Gmail and in Funnel.

Case email addresses

Each case has a unique email address that Funnel recognises and this is how messages are routed to specific cases. These case email addresses are in the form of [email protected] where “yourfunnelid” is replaced with the part of the email address before the "@" you signed up with, followed with a random case ID. The domain name “funnelreply.com” is used to indicate the purpose of the email address (so it sounds familiar to you).

Funnel always sets this address as the “reply to” field to ensure the messages are logged and shown in its case thread.

Funnel is a Superawesøme gig. Give respect and get it back.