Freeform - accessible and validated web forms

Welcome to the first episode of EE Surgery's screencasts. We hope these videos allow yo to build better Expression Engine websites.

Today we are covering contact forms with using a free module and a free extension. Really there is only one form module developed for ExpressionEngine and thats Solspaces's FreeForm. The benefit of FreeForm is that it doesn't solely send email, it stores that information in the database and has its own section within ExpressionEngine. This can be really useful to check up on enquiries as emails sometimes are not the most reliable method of communication. We say to most of our clients to look in the control panel weekly to check up if there are any possible contact submissions that may not have made it to their email account. Freeform is one of those modules that is in our default install folder.

Contact forms can also be enhanced with the use of Javascript validation. Whilst there are many different libraries and plugins available we use Jquery and the Jquery validation plugin on just about all out contact forms. Its also relatively straight forward to hand code raw javascript for a form, but if your site is using Jquery in other areas then this is probably the best method. * In an ideal world loading the Jquery library and the plugin solely for a form may be seen as heavy on file sizes.

Any contact form, comment form on the web is subject to spam. They are either looking to send spam emails hoping that a small percentage may just click the link and buy, or looking to manipulate search engine rankings with spammy back links. Up till recently we were using accessible captcha which is a pretty solid extension. It asks a question a human can answer easily for instance “What colour is grass?”. To anyone above 5 years old they can understand this but a spam robot cannot therefore denying that form submission. This worked well for us for a few years. However when thinking about UX and gaining as many contact form submissions as possible you want to make as few form fields as possible. The fewer the fields, the more enquiries you get, maybe not always but certainly on most websites. Its seen as a trade off between time and benefit from the users point of view. Less time spent submitting the form, more enquiries and submissions. So going on this logic the extra question field should be omitted. Over the last few years or so a new kind of strategy of spam prevention has been created. Its simple yet very clever. Spam bots will normally fill in all the fields in the form. By having a field thats not seen by users yet seen by robots, that field is filled in by the latter. The concept is called a Honey Pot and a few months ago a plugin was created for Expression Engine on that concept – Hon-ee Pot (EE2 only). Having used it for a few months and not a single spam submission in that time, its now our spam prevention of choice. With one less field for the user and 100% success spam prevention rate, its a no brainer.

1.) Freeform setup.

Install the module as per the instructions on the Solspace site. Once thats done you need to set up a template and the fields, again as per docs.

2.) HoneePot installation

Downoad and install the extension from Devot-ee or Git

3.) Onto the code

We generally try and get the form working first then use the progressive enhancement methodology to sprinkle on top the Javascript. Good Javascript and CSS comes from good HTML so lets build from there.

   collection="Contact Form"
}    </code>
Don't put anything here < /div> Your name: Your email address: Your message:

<br /><br />

<br />

{/exp:freeform:form}<br />

Good form accessibility amongst other things comes from the naming and matching of the label and form fields. The “for” within a label must match the “id” within the field, as seen above. You can test this is working by clicking on the label which should then insert the cursor into the matching form field.

At this stage test the form and make sure you get an email and its inserted into the FreeForm entries within the Expression Engine control panel.

4.) Style the web form with your own css not forgetting to hide the honeepot section from users

.screen-reader {
    display: none;

5.) Add Javascript

Embed Jquery < script type="text/javascript" src="">

Embed the Jquery validation plugin < script type="text/javascript" src="">

6.) Config javascript plugin

$(function (){  
        success: function(label) {
        rules: {
            email: {
                email: true

There are many options and things you can do with the validation plugin but unfortunately thats outwith the scope of this tutorial to go into great detail. The above codes adds a class to aid the user through the process when the field is successfully filled out out. The rule, looks for the email field and validates its an email field by looking for a “@” and a period.

Bonus points for

  • Conversion tracking in Google Analytics
  • CSS3 form embilishments
  • HTML5 validation


Comment: 1
WilbertMek , Feb 9, 2018

rpefjgb [url=]Nike Cortez Basic Nylon 06[/url] [url=]Stan Smith Primeknit Purple[/url] [url=]Adidas Tubular Nova Cardboard[/url] [url=]Kosten Louis Vuitton Riem[/url] [url=]Adidas Zx Flux Black Copper[/url]

Comment: 2
RadgonWap , Feb 6, 2018

достаточно молодых людей на сегодняшний день стараются в сжатые сроки сдать экзамен на права, как только они достигнут совершеннолетие. Благодаря задачи начать водить, они с разного возраста складывают финансовые активы на машину или мотоцикл. Задача большинства – купить комфортный мотоцикл и выполнить из него «конфетку». Но вот здесь у некоторых возникают сложности, ведь несмотря на то, какой тип мотоцикла, за частую – он не молодой. А допустить ошибку по малому опыту может будь кто сегодня. Если вы хотите создать тюнинг машины или мототехники, предлагаем посмотреть [url=]тюнинг ателье[/url] все это сделать или узнать как это делать вы можете на нашем сайте. Именно здесь вам помогут и предоставят помощь, осведомят стоимость услуг и про тюнингуют ваш мотоцикл. Тюнинговать автомобили – на сегодня основная ниша, которую получить стремятся многие. Однако, для того, чтоб быть настоящими любителем – необходимы знания. В тюнинг сервисе ARTFG "" находятся специалисты со стажем, которые знают как настроить как новые авто, так и старые, тюнинг старых автомобилей очень популярны, так как с помощью тюнинга возможно перекрасить части авто, устранить коррозию, освежить машину «под капотом».

Comment: 3
XRumerTest , Feb 3, 2018

Hello. And Bye.

Comment: 4
Matthewinoge , Feb 2, 2018

wmzjgos [url=]Lenti Ray Ban Wayfarer[/url] [url=]Adidas Stan Smith Blu Scamosciate[/url] [url=]Air Max 180 Og[/url] [url=]Reebok Q[/url] [url=]Puma Lucide Nere[/url]

Comment: 5
XRumerTest , Feb 18, 2018

Hello. And Bye.

Comment: 6
IleanaLoomb , Feb 19, 2018

Linkps:Herpes Symptoms Men Photo Infected Pacemaker Icd-9 Amebic Dysentery Cdcr . Tai Chien Dich Huyen Thoai Garena Live Lien Petsmart Grooming Reviews Flexoplex At Walmart Capellini Pasta Shape Crossword Contreras Cubs Catcher Stats All-time Naturalizer Shoes Stores Boots The Chemist Perfume Allergic Rhinitis Treatment Emedicine Medscape Medication . How To Repair A Pulled Sweater Adversos Mathematicos Famosos Que Quedaron En Dropsy Goldfish Diseases <a href=></a> <a href=>Levetiracetam Canadian Pharmacy</a> <a href=>Next day Fosamax No Prescription</a> <a href=></a> <a href=>Buy Folic-Acid</a> <a href=>Buy Kamagra online without script</a> Erythroblastopenia Symptoms Of Ms Brain Perros Boxer Bebes Bonitos Mellizos Lombard Prolactinoma Surgery Studies Show That The Demand Project <a href=>BUY GENERIC Vantin Fed Ex Cheap</a> <a href=>Canasa suppository For Sale Cheap</a> <a href=>Buy Amoxibiotic Australia</a> Anti Emetic Medications List Antidepressivum Betekenis Voornamen Wikipedia Deutsch Michelangelo Heart Attack Warning Signs Toenails Not Growing On One Foot Juice Bar Huntsville Alabama Restaurants With Meeting <a href=>Probleme De Logica Haioase Rauschenberg Prints</a> <a href=>Tratamiento Acne Tubo Solucion Hipertonica Preparacion De Soluciones</a> <a href=>Niг±os Heroes Wikipedia Espaг±ol Diccionario Dictionary For Kids</a> Zink Printer Technology Icons Vector Insurance <a href=>Actigall Overnight Usps | BUY Actigall</a> <a href=>Buy Deltastab Spain</a> <a href=>Buy Furazolidone No Doctor</a> <a href=>Buy Frusenex</a> <a href=>Baby Oil Cheap</a> <a href=>Antibiotiques Mont Godinne Carter's Children's Clothing</a> <a href=>Depression Quotes Images Tumblr Colors Background</a>

Comment: 7
Maildytek , Mar 1, 2018

Комфортные роды на теплом побережье Карибского моря с фирмой Cancun Bebe Фирма предоставляет вам необычную для российского рынка услугу: провести последние пару недель беременности и родить своего ребёнка в теплой солнечной Мексике. Почти всем нашим читателям подобного рода решение может показаться слишком странным, однако у него есть масса важных плюсов, о которых мы и расскажем вам в данном материале - [url=]гражданство ребенку[/url]

Comment: 8
AngelSeili , Mar 7, 2018

unpejdhürtel-wo-kaufen.html [url=]Sac Hermes Birkin Neuf[/url] [url=]Balenciaga First Bag][/url] [url=]Burberry Purse Blue Label[/url] [url=]Supreme Nike Uptempo Price][/url] [url=]Hermes Lindy 26 Gold[/url]

Comment: 9
ArnoldDoubs , Mar 7, 2018

xfuiacc [url=]Prada Sunglasses Original[/url] [url=]Omega Nato Strap[/url] [url=]Guess Portemonnaie Herren[/url] [url=]Tas Guess New[/url] [url=]Oakley Plate Carrier[/url]

Comment: 10
JamesTuM , Mar 7, 2018

piruecp [url=]Prada Lunette De Vue[/url] [url=]Burberry Zipper Tote[/url] [url=]Guess Mckenna Wallet[/url] [url=]Rolex Explorer Ii Price[/url] [url=ød-098.asp]Adidas Superstar 2 Rød[/url]

Comment: 11
LaytrikMon , Mar 7, 2018

vientre de alquiler es muy renombrado en diferentes. La razon principal de eso es que una femina llega a ser mama para neonato despues su nacimiento. Una gran parte de esposas seria una mama, pero algunas de ellas no podria ser. Por eso en el siglo pasado un dato nuevo surgio – maternidad subrogada. Cuando embarazo es medicamente impracticable, hay solo una manera para ser una mami. Esto es maternidad subrogada. En principio, en estos incidente se usa compensacion monetaria. En realidad, para encontrar una mujer sana hay que encontrar clinica que proporciona este tipo de servicio. Aconsejamos usar estea [url=]el costo donacion de ovulos Ucrania[/url] centro. En estea organizacion ucranianoa muchas personas de Estados Unidos, Gran Bretana y otras ciudades se hacen madres subrogadas. Segun la ley maternidad subrogada es licito. La legitimidad y precio de gestacion subrogada son muy variables. Depende de localizacion, creencia, color de ojos, etc. En nuestrosas centros puedes tomar una seleccion sobre un tipo de vientre de alquiler. Recomendamos a todos nuestros miembros usar vientre de alquiler tradicional. Pero nuestro servicio contiene tambien la gestacion subrogada. En loslas clinicas de Feskov son indicaciones por vientre de alquiler. Cuando entra a nuestrosas organizaciones basadosas en Ucrania – una parte de Feskov Human Reproduction Group, obtiene un gerente. El administrador se aconsejara sobre cosas variables desde el comienzo hasta el fin. Por lo general gestacion subrogada continua 9 meses. Despues el gerente elabora todos los documentos necesarios y Usted puede tomar al nino. Tambien, el consultor obtiene la informacion su familia proximos 3 meses. Si quiere obtener un nino, aconsejamos ir alli Lideres que trabajan alli son muy talentosos. Ellos responderan a todas las solicitudes. Si necesita algun recomendacion, ellos se ayudaran. Tambien ellos adjuntaran contratos antes este procedimiento. En el sitio web Usted puede descubrir dato. En principio puede observar precio y servicios. Soporte tecnico pueden ayudar en Ruso. Usted puede tomar decision por eso. Si podria obtener consejo sobre maternidad subrogada como un proceso, doctor Feskov dara asesoramiento para Usted.

Comment: 12
CurtisKt , Mar 8, 2018

gemaord [url=]Sac Hermes Birkin Noir Pas Cher[/url] [url=]Omega Klockor Vintage][/url] [url=]Adidas Grey Jacket Womens][/url] [url=]Cintura Hermes Borchie[/url] [url=]Balenciaga Sac Ebay[/url]

Comment: 13
CurtisKt , Mar 11, 2018

[url=]Levitra Générique Suisse[/url] By no means trade greater than two percentage of your respective total capital on any single trade. Consider the whole amount of cash you employ for Currency trading, and split it fifty approaches. Never use greater than a fiftieth of your own funds at one time. In that way, even if you lose many times straight, you'll nonetheless have plenty of investment capital to extra. [url=]human growth hormone injection dosage[/url] When striving to improve search engine marketing it is advisable to enroll in a PPC bank account by having an adcenter. Using a Pay per click profile can be a straightforward way of getting real lookup volume for your personal search phrases. A Pay per click profile will give you fast visibility. [url=ür-Mann-Kaufen-Kamagra-Online-Kaufen-Schweiz-Levitra-20-Mg-Packungsgrößen/]Viagra Für Mann Kaufen[/url] A lot of people feel food preparation is a hard task that only correctly trained cooks with several years of expertise can do. The truth is, everyone can make regardless of what their level of skill is. A commencing make can create a elegant nine program food. The key to great food preparation is great knowledge. The recommendation discovered in this post may help anyone for any level excel at food preparation. [url=]Gh Ormone Della Crescita Bodybuilding[/url]

Comment: 14
Henrywef , Mar 17, 2018


Comment: 15
Coreytaf , Mar 17, 2018

You actually stated that adequately. canadian cialis <a href="">5 mg cialis coupon printable</a> cialis generico lilly [url=]cialis generisches kanada[/url] wow cialis tadalafil 100mg <a href="">click here cialis daily uk</a> cialis 20 mg cost [url=]generic cialis tadalafil[/url] generic cialis at the pharmacy <a href=""></a> generic cialis with dapoxetine [url=][/url]

Comment: 16
Henrmski , Mar 18, 2018


Comment: 17
Henfodwx , Mar 21, 2018


Comment: 18
LionelGen , Mar 21, 2018

[url=]Testosterone Propionate China[/url] You need to understand that developing a web site will take longer than you initially expect it would. Let's claim that you feel you can obtain a site completed in 3 weeks. Properly, by the time you design it, weight your entire web pages, analyze, create your tweaks, and in the end complete, you can be checking out a few months. [url=]Clomiphene Citrate South Africa[/url] Among the finest approaches to be successful in network marketing is ensuring the business you're coping with features a sound status. This product can be excellent, however if the company has a terrible status, this will likely eventually get around to folks and significantly restriction your potential if not eliminate your business entirely. [url=,Testosterone-Cypionate-Sale-Online,Testosterone-Undecanoate-Half-Life]Primobolan Generic Supplements[/url] Occupational therapy is recognized to help people that are suffering from rheumatoid arthritis. Often this type of treatments are protected by several medical insurance ideas. Occupational therapies will help identify problem areas in your lifestyle and work together with you to find methods to eliminate them or help you deal with these to steer a much more pain free life. [url=,Clomiphene-Citrate-Suppliers,Trenbolone-Enanthate-Generic]Nandrolone Canada[/url]

Comment: 19
Stephencruse , Mar 21, 2018

[url=]Cialis Farmacia[/url] If you are planning to use video tutorials to promote your organization you would like to be sure that you utilize a superior quality video camera. Due to advancements in technological innovation people anticipate seeing videos in high definition. Should you not own a higher description camera you should lease or get one for recording your video clips. [url=]getropin igf-1 lr3[/url] With regards to juicing, one thing that you might want to be aware of is definitely the various advantages that certain varieties of liquid components will bring you. A great benefit is the fact the juices from cabbage is a good natural strategy to recover tummy ulcers. This is simply not intended to substitute other approaches, nevertheless it could job just the thing for you in addition to what you will be currently performing. [url=]hgh supplement[/url] Get your credit history studies, before you fix the problem you have to know what the thing is. Your credit track record cantinas each of the credit accidents you possess produced. Obtain a credit profile from all of a few bureaus one particular may display anything the others don't. Read even though your reports making a plan to start off correcting the issues. [url=]ansomone hgh 2016[/url]

Comment: 20
Henjzpvh , Mar 22, 2018


Comment: 21
Hendzqsz , Mar 24, 2018


Comment: 22
Henwvzsz , Mar 24, 2018


Leave a comment

" What you do not want to happen to you, do not do it yourself either" Sextus the Pythagorean