WordPress.org

Ready to get started?Download WordPress

Plugin Directory

X Forms Express

Build unlimited forms in seconds using this advanced user friendly form creator! Includes some amazing features!

Using X Forms

Layout

  • Left hand column: Contains all fields grouped into 4 sections (click on the headings to toggle through). Drag them to the canvas area and drop.
  • Centre column: The very top contains all forms next to the "New Form" tab. Click on the tabs to switch forms. Next is the form title, form actions (duplicate and delete), Viewing tabs (Build, Design, Form Entries and Code), and then we have the actual form canvas where elements can be dropped, sorted (drag up or down) or removed (click on the X top right corner of the field).
  • Right hand column: When in "build" view this contains General settings, Email Setup, Form Layout and Color schemes(themes). When in "Design" view this contains The Visual Editor, Form Layout and Color schemes(themes). Click on these to toggle hide and show.
  • Using the Visual Editor: When in design view you will notice the visual editor on the right hand column. You can change a all of a single form element's style attributes by clicking on it or you can change specific elements types as a whole by using the dropdown labelled (Overall styling selections)

Field settings

  • Editing field settings: After a field has been dropped into the canvas, hover over it and you will notice a few links popup. Click on edit settings to customize the field title, error message (shown if required, or pre-formatted) and help text. If the hower state get switched around just click on current form tab agian.
  • Editing Field titles, paragraphs and heading: Just click on them, enter the desired name and hit enter or click somewhere away from the field.
  • Radio and Check groups, Dropdowns, Autocomplete, Upload file and Date-picker fields: These have settings unique to theme. you will finsd it by hover over the field.

  • The views and setting are unigue to each form and not as n whole...*

Adding a form to a page post

  1. Go to your post or page.
  2. Check the top strip of the editor for a "XF" button.
  3. Click it.
  4. Select the form you want to insert.
  5. Click insert into post.

Adding a form directly into your HTML or PHP script

  1. Go to X Forms
  2. Click on the form you want to insert
  3. Click on the "Code" tab, just below the form title
  4. follow the instructions and copy the PHP/HTML code
  5. Paste it into your HTML or PHP script

Adding a form to a Sidebar

  1. Go to Appearance -> widgets
  2. Drag the X Forms widget into the desired sidebar
  3. Select the form the widget should include/display
  4. Click save

Known Bugs

  • Unfortunately there is one bug that simple wont die and at this stage still remain: If you drag a form element onto the canvas area (center column) it sometimes does'nt convert into the actual field. This happens mostly if the element is dropped at the very top or bottom of the form. Just drag and drop it little, almost shaking it until it converts.

Why X Forms

We created X Forms, where X=Any, because we got sick of trying to find the perfect form builder. From the knowledge we gathered from all the form builders that came short we came up with this, X Forms...and we share it with you!

Default Form CSS

.xforms_ui div.field_holder{clear:both;}ul.ui-autocomplete{z-index:9999;}.xforms_ui div.form_field label.title {font-weight: bold;margin-bottom: 2px;display: inline !important;}.xforms_ui div.form_field input.text,.xforms_ui div.form_field input.date,.xforms_ui div.form_field input.time,.xforms_ui div.form_field input.text_only,.xforms_ui div.form_field input.numbers_only,.xforms_ui div.form_field input.auto,.xforms_ui div.form_field input.email,.xforms_ui div.form_field input.phone_number,.xforms_ui div.form_field input.file{/* border: 1px solid #DDDDDD;/border-radius: 5px 5px 5px 5px;display: block;padding: 5px;width: 98%;/float:left;/}.xforms_ui div.form_field input.email,.xforms_ui div.form_field input.phone_number,.xforms_ui div.form_field input.date,.xforms_ui div.form_field input.time,.xforms_ui div.form_field input.text_only,.xforms_ui div.form_field input.numbers_only,.xforms_ui div.form_field input.url{padding-left: 36px;width: 93%;font-weight:inherit;}.xforms_ui div.form_field {margin-bottom: 15px;}.xforms_ui div.form_field input[type="radio"], .xforms_ui div.form_field input[type="checkbox"] {margin-right: 5px;}.xforms_ui div.form_field select option {padding: 3px 5px;}.xforms_ui div.form_field textarea {width: 99%;padding-right:2px;display: block;min-height:87px;font-family:inherit;/float:left;/}.xforms_ui hr {clear: both;margin: 0 !important;}.xforms_ui div.form_field select {/ border: 1px solid #ccc;/border-radius: 5px 5px 5px 5px;display: block;height: 27px;padding: 3px;width: 100%;/float:left;/}.xforms_ui div.form_field select:hover,.xforms_ui div.form_field textarea:hover,.xforms_ui div.form_field input[type="text"]:hover{/border:1px solid #ccc;*/box-shadow:0px 0px 2px #ccc;}.combowrap input[type="text"]:hover{border:none !important;box-shadow:none !important;cursor:pointer;}div.field_actions {display:none;}.xforms_ui div.form_field.show_actions div.field_actions {display:block;}span.set_required, span.add_edit_items,span.show_field_settings,span.add_description,span.set_error_message,span.field_settings,span.click_to_edit{visibility:hidden;padding-left:10px;display:none;}label.normal{font-weight:normal !important;}div.error_msg{border-radius: 7px 7px 7px 7px;display: none;margin-bottom: 10px;padding: 5px 10px 5px 13px;width: 96%;}div.radio_button_group label,div.check_box_group label {margin-bottom: 0 !important;margin-left: -3px;margin-right: 0 !important;margin-top: 0 !important;padding: 4px 10px;}.ui-tooltip {padding: 10px 20px;text-transform: none !important;box-shadow: 1px 1px 3px #333;z-index:99999999;max-width:200px;}div#help_text {cursor: help;display: none;float: right !important;height: 17px;margin: 0 !important;position: relative;width: 14px;z-index: 100;}div.radio_button_group input.ui-helper-hidden-accessible,div.check_box_group input.ui-helper-hidden-accessible{position: relative !important;top: 0 !important;left: 0 !important;float: left;margin-top: 6px !important;margin-left: 5px;margin-right: 6px;}div.radio_button_group label,div.check_box_group label {border-radius: 4px 4px 4px 4px !important;display: block;margin-bottom: 3px !important;margin-top: 3px !important;width: 50% !important;padding-left: 26px;cursor:pointer;}div.radio_button_group.inline input.ui-helper-hidden-accessible, div.check_box_group.inline input.ui-helper-hidden-accessible {float: none;margin-left: 0;margin-right: 0;position: absolute;}div.radio_button_group.inline label, div.check_box_group.inline label {float: left;width: auto !important;border-radius: 4px !important;margin-top: 0 !important;margin-bottom: 0 !important;white-space: nowrap !important;border-radius:0 !important;padding-left: 7px;padding-top:0 !important;padding-top:0 !important;}div.radio_button_group.inline label:last-child,div.check_box_group.inline label:last-child{border-radius: 0 4px 4px 0 !important;}div.radio_button_group.inline label:first-child,div.check_box_group.inline label:first-child,div.radio_button_group.inline label.ui-corner-left,div.check_box_group.inline label.ui-corner-left{border-radius: 4px 0px 0px 4px !important;}div.radio_button_group,div.check_box_group{margin-bottom: 10px;margin-left: 4px;margin-top: 0;}.xforms_ui div.form_field.submit_button {clear: both;}div.examples {width: 83%;padding: 10px;}.iz-submit {cursor: pointer;}div.submit_form_entry{min-width:20%;}div.form_holder.heading {margin: 0 !important;padding: 0 !important;}div.form_holder.heading h1,div.form_holder.heading h2,div.form_holder.heading h3,div.form_holder.heading h4,div.form_holder.heading h5,div.form_holder.heading h6 {margin-top: 5px;margin-bottom: 5px;}span.prepend-icon{height: 40px;left: 7px;position: absolute;top: 27%;width: 40px;text-shadow:0px 0px 1px #fff;font-size: 12px !important;}span.icon-mail {background: url("../images/ui-icons/mail.png") no-repeat scroll 0 0 transparent !important;}span.icon-phone {background: url("../images/ui-icons/phone.png") no-repeat scroll 0 0 transparent !important;}span.icon-date {background: url("../images/ui-icons/date.png") no-repeat scroll 0 0 transparent !important;}span.icon-time {background: url("../images/ui-icons/time.png") no-repeat scroll 0 0 transparent !important;}span.icon-num {font-family: Georgia,"Times New Roman",Times,serif;left: 6px;top: 11%;}span.icon-text {font-family: Georgia,"Times New Roman",Times,serif;left: 6px;top: 11%;}span.icon-url {left: 7px;top: 16%;text-transform:lowercase !important;}div.form_container {min-height: 100px;}.xforms_ui hr {margin: 0 !important;}.prepend-input .ui-button-text{cursor:pointer;}span.is_required{display:inline !important;}

Javascript

This form plugin uses the following javascript libraries:

  • jQuery
  • Backbone
  • Underscore
  • JSON
  • Forms validation function
  • Form Ajax submit functions
  • Custom form functions

Locations of all Javascript files included: /wp-content/plugins/Nex-Forms/js/

You also might be interested in

NEX-Forms - The Ultimate wordpress form builder

The Ultimate WordPress Forms Builder plugin that will allow you to effortlessly create astonishing web forms with amazing user friendly form fields...

NEX-Forms - Demo
NEX-Forms - Admin Panel

NEX-Forms - A Form Builder in its own league!

NEX-Forms is a high quality and simple to use drag and drop/single click form creator offering a wide range of customizability, flexibility, design and usability that will make online form building a walk in the park. Do you have a need to easily create and customize professional and awesome looking forms on your WordPress website, Then this form builder is the one you need! Easiest to use back-end panel you have seen!

Features include:

  • Fully responsive forms
  • Conditional logic/laws to hide and show fields
  • 35+ form elements
  • Create custom form fields
  • Animated forms
  • Drag and drop or click to add elements to forms
  • Form Grid layout system (with unlimited nesting)
  • On form submmision email Auto-responder
  • Live form previewer with different devices
  • 1200+ Fonts available for forms
  • 400+ Icons available for forms
  • Ajax powered forms
  • Sidebar form widget
  • Retina ready font-awesome icons
  • Anti-spam form submision control
  • Form entry storage
  • Form entry Export
  • Duplicate form fields function
  • Unlimited forms
  • Add form fields to a clipboard
  • Bootstrap integrated form fields
  • Bootstrap integrated web elements
  • jQuery integrated form fields
  • NO Programing skills required to create forms
  • Fun and easy to use admin panel, very very easy to use!
  • Interactive tutorial
  • Unlimited Forms

Requires: 3.2 or higher
Compatible up to: 3.8.3
Last Updated: 2014-7-23
Downloads: 12,249

Ratings

4 stars
4.1 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1
100,1,1
100,1,1
100,1,1
100,1,1
100,2,2
100,1,1
100,1,1
100,1,1
100,1,1
100,1,1