Repeatable Form Fields in WordPress

One of our clients required a contact form with repeatable form fields that allows their staff to submit time sheets, mileage sheets and holiday requests. We ended up building a custom jQuery plugin to handle the dynamic form fields. Creating client work with open source software and developing open source software at the same time makes everyone happy.

WordPress Contact Forms

html Contact forms have been a staple of the web since forever. They allow your users to contact you, enquire about services, book appointments, send information or register their interest. Receiving information from your clients and potential customers is key to everybody’s business. Therefore finding a good WordPress plugin to handle your web forms is paramount to a successful website web project. As always there are a deluge of plugins for WordPress that do a good job of creating forms, sending emails and collecting data.

After using WordPress for so long we have of course got a firm favorite when it comes to website contact form plugins. We nearly always use Contact Form 7 to create our clients’ contact forms. We also additionally install the Flamingo plugin which stores any submitted forms in the WordPress database for easy retrieval.

Contact Form 7 usually meets all of our requirements. If we do find it lacking there are many addons that can extend the already extensive functionality even further. Dynamically repeatable form fields is something that Contact Form 7 doesn’t do out of the box which isn’t really surprising. Other great WordPress contact form plugins such and Gravity forms and Ninja Forms also lack a repeatable form field groups feature.

Plugins and Addons vs Custom Development

Going down the plugin hunting route can sometime end in a time consuming disaster. Spending time researching what plugin is going to work, only to find that it doesn’t quite do what you expected is not good. If the developer of the plugin in is nowhere to be found or the plugin has not been in active development for months then this could be a lot of time and effort down the drain.

On the surface this problem seem fairly straight forward. We decided to create a simple jQuery script to add the functionality that we needed. Once the development was under way we quickly realised that this might not be as simple as it seemed. Every input field needs a unique name so the script needed to be aware of how many fields it had added.  jQuery is good at cloning element but making multiple clones with unique name is not totally straight forward. Of course this wouldn’t be as simple as we first thought.

Repeatable Form Fields Plugin

After a bit more time and work the simple jQuery script had evolve into an equally small jQuery plugin. Form Field Repeater is pretty specific and has limited functionality. What it does do, it does pretty well and it was fun to build and is fun use.  I’ve open soured it on GitHub and set up a simple demo site to show off its awesome power. Hopefully this might be useful for some one as it is. If I can find the time I might and a feature or two to make it a bit more versatile. If you want to add your own features, go ahead and fork it on GitHub.

Which Responsive Carousel Slider?

Love them or hate them a responsive carousel slider is still a thing. Of course it needs to be a responsive and touch enabled, but apart from that, which carousel should you use? This is around up of three carousel I tried when adding a feature to this site.

Responsive Carousel Slider

Lory

http://meandmax.github.io/lory/

A great responsive carousel that doesn’t rely on jQuery which is a real bonus and it is tiny, at tad over 3kb minified. I set it up really easily but it didn’t work with fluid width items so it was no good for me but if I was using fixed width items and breakpoints I would have stuck with Lory.

Owl Carousel

http://owlgraphic.com/owlcarousel/

Owl Carousel relies on jQuery but it looked like it worked with items with fluid width which is what I needed. Unfortunately it’s not been updated for 2 years! There is a version 2 but it is currently in beta.

Flickity

http://flickity.metafizzy.co/?

Flickity doesn’t rely on jQuery and it works with fluid widths and it is made by the mighty metafizzy who have made some great products like Masonry and Isotope. The only thing that lets it down is that it is masive! 57kb minified.

Responsive Carousel Slider Round Up

I took the kb hit and went with Flickity it was simple to set up and did everything I asked. My javascript is loaded at the bottom so I can live with the extra weight.

Got any Carousel recommendation? leave a message in the comments.