This Documentation Will Assist You Installing Funnel Science Forms for WordPress Websites
Requirements for Funnel Science forms to work:
- You must have at least a Free Version of Funnel Science and you must have added your website and created a form within the settings.
- You must have Jquery version 1.7 or higher and Java Script enabled/installed on your website. You can not use anything that prevents Jquery , or Java Script from Running. Most websites already have Jquery as it is a commonly used web language.#JQuery must be installed and load in the Header. It must be installed before Funnel Science code and you must use a version of 1.7 or later.
To get the up to date jquery file, install this script within the header file
#<script
src=”//code.jquery.com/jquery-2.2.4.min.js”
integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=”
crossorigin=”anonymous”></script> - You must install the Funnel Science forms WordPress plugin.
How Do I create a custom webpage form?
To setup a form, it normally takes only 5 minutes or less. To read the documentation it normally takes about 10 minutes. So in the next 15 minutes you should be able to read this documentation, setup and install the form in your WordPress website.
- Login into Funnel Science
- In the top right corner, click the Settings drop down. From the dropdown, click Websites
- If your website is already added, click edit on the right. If you do not have a website on the page, click the blue button “Add Website”
- After you click “Edit”, you will be directed to the Website Information page inside of Funnel Science
- Under Lead Generation Forms, click the blue button to “Add Form”
- On the Form Information page, you first need to Name your contact form. Example form name would be “Contact Page Form”
- Calender field is optional if your form uses a calender to select a date
- Template is only used when you have first created a templated form, also optional
- From Address must be the email address you want to show where the form is coming from. For example, info@funnelscience for a general form page. Or sales@funnelscience.com might be used for a form that is specifcally routed to the sale team.
- Subject is the same as the Subject line in an email. You should include a subject so you can easily the form in your inbox
- Redirect is used when you need to redirect the visitor to another page on your website after they submittted the form. This is common to use for conversion tracking and a common redirect page would be /thank-you. Using a redirect page is a best practice as it allows the visitor to know the form submitted correctly and any possible next steps. You would place the next steps on the /thank-you page.
- Email header is optional – This is the text that you will see in your inbox and it will be on top of the email that you receive in large letters. A common header might be “New Customer Message” or “New Lead From AdWords Campaign”
Adding Form Fields
You can build custom fields with text input, text area, check inputs, radio buttons, date input, file upload or select input(drop down).
- Scroll down to the bottom of the page where you see Field Information. The standard preload fields will be First and Last Name, Email, Phone, and Message.
- To add a field, click the blue button to “Add Field”. Create the form fields you want by adding a Title, Name, Type,
- Check the box “Required” if you require the visitor to complete that field.
- Mapping should only be used with a custom update that a Funnel Science team member can help you with.
- Save the custom field by clicking the submit button.
Installing Short Code on your WordPress Page
On whatever webpage you want to install a contact form, you can do so by adding 1 snippet of short code and then adding your own CSS for styling and design.
- Add this line of code to the webpage for your contact form [fs_form form=”form number here” privacy_url=”privacy url here”]
- It is very important and a best practice to have a website privacy policy. We recommend placing a link to the privacy on the contact form with the following text “No Spam, Privacy Policy”
- On the top of the Form Page, there is a Form ID Number. You must enter that number in the short code. It should look like [fs_form form=”999″ privacy_url=”privacy url here”]
- You can use the same form number and contact form on any webpage or you can create new contact forms.
- Once you install the code on the webpage, save and publish. Go to the webpage you just added the form to and test the contact form. Upon submission, you should have a message in the inbox and you should also see the form inside of Funnel Science under Interactions.
Setting up Google Analytics for Conversion Tracking
- If you have a form that is dedicated to a specific channel such as AdWords, you can create conversion tracking specific to the form. To do that you need to have a Google Analytics account.
- Make sure the Category, Action, Label and Value are exactly identical in Funnel Science as what you have entered into Google Analytics Goals
- Callback url is for an External API only. You can use this field if you want to post Funnel Science form data to your database or CRM
Setting-up Auto Responder
Auto Responder is optional and is the automatic message that will be emailed to your visitor immediately after submitting your form.
- The From Address will be the Email address you want your messages to come from.
- Subject is the subject line that you want your customer to see in their inbox. A common Subject line that your visitor should be “We Received Your Message”
- In Responder Body, add the email message that you want your visitors to receive. You can add html, attachments or add video in the body of your email auto responder message.
- Click the green Save button at the bottom of the page.
Frequently Asked Questions
How do I style my form design to look the way I want?
FS Forms can be designed to look any way you want. To style your forms, you need to enter the CSS code that you want. To find the CSS, you need to login into WordPress and click the link to edit Plugins. Find Funnel Science Forms in your list of plugins and click the edit button.
When the page loads, click the link on the right under “Plugin Files” to FsForms/style/fs-form-view-style.css or FsForms/style/fs-forms-style.css
For example, To edit the Submit button, search for fs-form-submit and then update the CSS code.
Which ever piece of the form you want to edit, just search the class field that you want to change.
What if I want to change the default text in the form fields?
To change the text inside of the form field, go to the form you created in Funnel Science and edit the text in the Title field.
Does FS Forms Support Captcha?
No, FS forms uses Honey Pot code to detect and block bots from completing your contact forms. When you install FS forms, you should remove captcha from your webpage.
I installed FS forms and I do not see the Form on the page, what do I do?
First, check to see if you are blocking the java script from running. You can not block Java Script for any reason.
If step 1 did not work, make sure you are running the FS Forms java script directly and not through a third party tool.
My contact form stopped working, what do I need to do to troubleshoot and fix?
Additional Insights
Conversion Tracking with Google Analytics
Google Analytics or Google tag manager should be installed after Funnel Science and immediately close before the close of the
#</head>
If your website uses https with an ssl, you will need to download the cdn file, you may host it locally. Download the file by accessing at cdn.funnelscience.com/js/FsPhoneTracking.js
#If you want to change the styling of the phone number, you may edit the java script snipett. Here is an example#
#<a class=”fs-phone-route” data-phone-route=”451″ href=”tel:8177847356″ style=”color: #fff;”>(817) 784-7356</a>#
Funnel Science also has dynamic phone call tracking. To signup, you need to call and speak with one of our support consultants.
You will need to place code in your website header file. The example is below:
#Header Code
#Place the following code inside the <head></head> elements on every page in the site…
#<script type=”text/javascript” src=”//cdn.funnelscience.com/js/FsPhoneTracking.js”></script>
#<script type=”text/javascript”>
jQuery(document).ready(function() {
FsPhoneTracking.ProcessVisitor(324, { “fallback_phone” : “(346) 800-3199″ } );
});
#</script
On each webpage where your phone number exits, you need to edit the phone number by copying the example snippet on your page. You must use the correct snippet to your account, the example below is just an example of the snippet. If you have a CSS class for your phone number, even better, update that with the snippet below.
#Hyperlink Phone Display Code
#Replace every hyperlink phone number with the following code snippet…
#<a class=”fs-phone-route” data-phone-route=”512″ href=”tel:3468003199″>(346) 800-3199</a>
You can always style the phone number on your page which ever way you want.