Visual Form Builder: Easily Create a Custom Contact Form
Posted by Brock Nunn | Tutorial, WordPress | No Comments
By now we have covered several ways in which WordPress Plugins can make your life easier by adding elements to your WordPress site without requiring you to be a web design master. Now, I will be the first to admit to you, forms are frustrating. Web forms can be tricky to build, difficult to validate properly and even harder to make sure that relevant information gets to the site owner when needed. This is why there are so many web form building tools that you can pay for like WooFoo, Gravity Forms and so many more. Today, I present a form building tool that can integrate highly functional forms with a simple drag and drop interface: Visual Form Builder.
Step 1, Getting Started: Install Visual Form Builder
Just like any other WordPress plugin from the repository, VFB is easy to install. Check out the video below
Step 2: Create The Form (Or Forms)
Now that we have Visual Form Builder installed on our site, we can begin creating awesome forms that our users will be able to interact with. To begin, create your first form by giving it a name for example “Contact Form”.
Next, you will notice that VFB has already taken the liberty to create a few important fields for you. Unless you are more than confidant with web forms, it is a good idea to just leave these areas alone. Now we can begin adding fields at our leisure.
To add fields, begin clicking on the fields that you would like to use found in the left hand column of your screen. Even better yet, check out the video below!
http://www.screenr.com/q1F8
Step 3: Place The Form
So, if you watched the video above, you are already ahead of the game and could probably teach this section yourself! However, if you are not the video type then you will find that installing your VFB form is incredibly easy. On the left hand side of the Visual Form Builder settings page, you will find a section titled “Form Output.” Herein, there is a shortcode that we will copy (ctrl+c or command+c). Next, simply navigate to the desired page where your shiny new form will call its home, and paste the shortcode into the editor (note: make sure the editor is in “Visual” mode). Next, click “View Page” to see your contact form rendered in all of its brilliance.
There! Wasn’t that easy? With plugins like Visual Form Builder, adding great functionality to your WordPress site can be easy and, dare I say, a little fun. If you have any questions about installing plugins or setting up your WordPress site let us know. Until next time, adios!
Would you like to see your plugin on Untame? Let us know what your plugin is and why it is awesome and we may post a featured tutorial soon!
