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.
Comments
we have checked this code. but no response found. please tell me if any way we can send repeater data in mail .
[acrepeater-517]
[your-name]
[/acrepeater]
we will wait for your comment .
The code in your mail form should look like this : –
[acrepeater-517]
[your-name]
[/acrepeater]
If it is still not working let me know and i’ll see what I can do.
Don’t forget, in the mail form field, each tag need to be on it’s own line.
please see screenshot .and let me know how to resolve this .
http://prntscr.com/o1sb41
http://prntscr.com/o1sc9b
we have used AC CF7 Form Field Repeater plugin. but repeter field value not send in a mail .please let me know. how to resolve this .
Hi, thanks for using our plugin. If you send me the code from the contact form 7 message field and the contact form 7 form field I will take a look an see if I can figure out what is going on.
Submit a Comment