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.