Visual Form Builder

Posted on by

Those of you familiar with the UA WordPress Theme have probably seen the contact form shortcode. It’s a basic contact form with a couple of customizations.  For most people looking to add a contact form to a web page, the shortcode does the job.  However, when you want a custom form things can get more complicated.  I have recently built a new plugin that I hope will make things a bit simpler.

Visual Form Builder is a free WordPress plugin that lets you dynamically build forms using a simple interface. Every form includes jQuery validation and a basic logic verification system as well as entry tracking.

A simple script

This plugin started out not as a plugin, but as a relatively simple PHP script that programmatically output the appropriate form code based on what fields and requirements I needed.  This first attempt wasn’t a failure by any means, but it did use some convoluted methods to construct the form.  If I had stopped here, I could have used the tool for a while and been happy with it because it was significantly faster than manually building a form.

The problem with this script was that it was something that really only I would be able to use and my goal was to create something that my co-workers at Web Communications and perhaps others within the UA web community could use.

With that in mind, I decided to turn the script into a form builder plugin for WordPress.

Building a form builder

Having released several other plugins in the last year, getting this one started was fairly straightforward.  Before I began building, I mapped out the requirements I hoped to meet:

  1. Use WordPress HTML/CSS for the admin panel to reduce design maintenance and present familiarity to the user.
  2. Make it easy to add form fields.
  3. Include support for fieldsets.
  4. Order form fields using a drag-and-drop interface.
  5. Use jQuery Form Validation to validate clientside.
  6. Don’t use a CAPTCHA system for anit-SPAM verification.
  7. Log all form submissions in the database.
  8. Export entries to a CSV.

With these features in mind, I began coding.  Not all of these features made it into the first version, but they are there now.

Certainly there are some other form builder plugins available for WordPress, including some commercial tools that offer a wide range of features.  The idea behind Visual Form Builder was to provide a quality, free alternative to the UA web community (or anyone else who finds it useful).

How do I use Visual Form Builder?

I’ve tried to make it as easy as possible to add and customize a form and have even added some help text to the contextual help tab at the top of the plugin page.  Here’s a quick primer on creating your first form.

  1. After downloading, installing, and activating the plugin, go to Settings→Visual Form Builder.
  2. Click on the + tab, give your form a name and click Create Form.
  3. Click the form fields from the box on the left called Form Items to add it to your form.
  4. Edit the information for each form field by clicking on the down arrow.
  5. Drag and drop the elements to put them in order.
  6. Customize the Email Details and Confirmation
  7. Click Save Form to save your changes.
  8. Copy the shortcode from the box on the left called Form Output
  9. Paste into any Post or Page and save your changes

If you have other questions, you can check the FAQ or leave me a comment.

Download it now and let me know if you have any suggestions, bug reports, or feedback.

About these ads

51 thoughts on “Visual Form Builder”

  2. I have tested this plugin on a WordPress dev site and it is, IMHO, the best WordPress form builder plugin I have used. (And I have tried many of them). In order for it to meet the specifics of a project I am working on, there are a few tweaks that could make this the most popular form creator plugin for WordPress.

    First, this plugin deserves it’s own top level menu. Then, having a setting that controls the user level that can create/edit forms would be nice also.

    My final feature request, and much desired, is to have the redirect options in a dropdown that includes custom post types by name. Example, I have a custom post type called thank_you_page. A user can create multiple thank you pages and depending on what form gets filled out, determines what thank you page the form submitter gets redirected to.

    These features would really push this free WordPress form plugin over the top and could be made a commercial plugin if you were wanting to monetize it. I would be willing to pay for these requested features, so feel free to contact me. Thanks and thanks for a great WordPress form plugin.

    • I’m really liking this plugin and think it could be used on all wordpress sites I do that require clients to create their own forms. Very user friendly. Since I have been experimenting with this plug in all day, I have found that it fits many use cases.

      I would also like to see an option to create multi-part forms with this plugin. Any thoughts on this?

      • Thanks for the feedback. Currently, the plugin already supports mutipart/form-data with a file upload input type.

      • My apologies for the wrong use of terms when referring to multi-part. What I meant was multi-page forms. Example, multiple check out steps or multiple lead gen steps, fill out first part of form and click next to go to step 2 of form.

  3. May I know how to disable the email feature? Coz my hosting site doesn’t allow php mail() function.

    Thanks.

    • The plugin uses the wp_mail function, which is a wrapper for the PHP mail() function and many servers disable it for some reason. You can use the WP Mail SMTP plugin to try to fix those issues.

      • I just discovered yesterday that if I didn’t fill in the email details section it will not send email. It will show message on the post itself instead of sending email.

        Will try out the recommended “WP Mail SMTP plugin”.

        Thank you for your effort creating this wonderful plugin.

  4. Can get what you mean by “have to have an email to send it to!”

    Is it alright if I didn’t fill in the email information, the form will not send any email to the person who fill in the form.

    By the way, I use the form as contest registration not as contact form. So, what i need is to capture the register information to DB.

  5. Why with every successful submitted form this sentence “Where is this message?” will appear?

    Thanks.

  7. I created a form that people need to enter in 3 different addresses. All fo the fields are named uniquely, but the the form is not passing the values correctly.

    • You could try changing it via jQuery. Otherwise, there’s no way to change that text.

      • Thanks Matt, do you have any plans of allowing users to change that text? It would be for SEO reasons mainly, my boss says its a no no to leave the text as default. I just hate coding forms :)

      • No, I don’t have any plans to make that editable.

        As far as SEO, I’ve never heard anything like that before. It may be true for click conversions on call to action buttons, but for contact forms ‘Submit’ is perfectly acceptable. I wouldn’t worry about the SEO for a contact form :)

  9. Do you have any plans to include nested fieldsets as an option? The option to do a fieldset within a fieldset would help with organization on many of our forms and would be much appreciated!

  10. What if I want to translate the “Submit” to something in my own language?
    How do I do that?

    • I don’t know much about Google Adwords, but I’m assuming you’d be able to create a custom page for your form and place the tracking code there.

  12. hi, I have lost my form
    I created the form and enabled it in home page, tested it a many times, and finally when satisfied I deleted all test entries, but then after this action my form was vanished. As I have already pasted the forms shortcode in home page, the home page still showing the form but I am unable to edit the form in admin/dashborad, Where can I locate the form to edit as I know it is still active as it is appearing in the home page.
    Thaks for any suggestion

  13. Hi there, great plugin! Thanks so much for your time and effort.

    I’m having some trouble unfortunately. It looks like form items are supposed to save as y ou’re working on them, not only when you hit the save button. I keep getting this error message: “IP Says ‘There was an error saving the updates’ “.

    Any idea why I’m getting this message? When I hit the save button things work fine.

    • This sounds like an AJAX error when sorting form items. Could be any number of things: response timed out, parse error, bad response, browser error.

      • Hard to say. To get a better idea of what specific error it’s throwing, you can change line 179 of visual-form-builder.js to this:
        alert('Status:' + textStatus + '. Error:' + e);

  14. Hi,

    Is there a way to edit the from entries in the backend rather than having to export the entries to csv. Sometimes people enter the wrong information.

  15. Hi Matthew,

    Love the plugin. So easy to use, but I have 24 radio buttons to add and wasn’t sure if there was a way to arrange them in columns instead of in one long list.

    Tips appreciated!

    • No, there’s not a way to arrange in columns. If you have that many radio buttons, how about using a Select element instead?

  16. Hi,
    Is there a way to have multiple columns,
    Really could use 2 to 3 column wide for some fields on the form.
    Not that up on css coding yet so if possible,hopefully not to tricky.

    • Actually I need this, I need 4 columns for some fields of information, other wise I have a very long form submission page. I do like what I’ve seen.

  19. HI,

    my english is not better, i am a french man. i want to know how can i easily fill in one shot a select field with 225 lines. some other plugin use a text with coma separated. what about VFB.
    Thanks for your answer.
    another question is how to tranlate in french the subfields of composed field like adress field.

  21. A great plugin! I have a problem with the invisible div which hides the spam protection box though… When I tested on a laptop with win7/IE9 everything looked fine. Then I tested again on another laptop, also win7/IE9, only to discover that the div with the spam box was showing!. Any idea why?

  23. Hey, Mathew I have been enjoying your plugin for some time now, but something happened today.I just updated your plugin and my entire admin broke saying

    Fatal error: Class ‘VisualFormBuilder_Entries_List’ not found in /nfs/c07/h02/mnt/101593/domains/kneadedhealing.com/html/wp-content/plugins/visual-form-builder/visual-form-builder.php on line 332

    Any ideas on how to fix this?

    • Hey Cullan, I’m aware of the issue and will get a fix out as soon as I can.

      • Thanks! Mathew… I just re uploaded. The updates and it didn’t error out my admin screen this time, so thank you for fixing it.

        Two bugs I have found.
        1. A required text field that I have set up is sending blank text, but the description of the field is showing up in the emails. Also, after the submission if you press refresh. It sends another email.
        2. The select field I have made for the same form is showing that it is required, but you can bypass it because the field is pre filled with data. Is this something you can take a look at?

        Thanks for all your hard work on this plugin. In my opinion its the best one contact form maker on wordpress. So keep up the good work!

  24. I’m glad I stumbled upon your form builder plugin, however, I see two issues with it.

    Issue 1: No ability to personalize the notification email by embedding the [Name] field

    Issue 2; This is not an issue just for your form plugin but all of them. Social Login. A study by Blue Research found that over 70% website visitors would prefer social login over filling out a form, furthermore 54% of respondents stated they would leave a website if they had to fill out a form.

    So I’d like to see these forms integrate with the various social login plugins to be able to give visitors an option.

  25. Pingback: Visual Form Builder « CSS Tips

  27. Very nice, but for even pro users you should add option to add custom value for fields. I want to add checkbox with text “Most recent” and add value for this “film,web,video,something” for my work its very important.

Comments are closed.