WordPress.org

Ready to get started?Download WordPress

Plugin Directory

NEX-Forms - Ultimate Form builder

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

Using NEX-Forms - The Ultimate WordPress Form Builder plugin

Be sure to check out the interactive tutorial.

Creating Forms

  1. After Plugin Activation Go to your Admin Dashboard and navigate to NEX-Forms from the left hand menu.
  2. Drag form elements from the left column to the center.
  3. You can delete form elements by cliking on the trash icon while editing the field or simply drop in into the trash can at the bottom of the forms canvas.
  4. Click on the field's title, input or helptext to trigger the corrosponding settings (Input settings differ from field to field). Note that you can duplicate the field or add it to your clipboard to be used in other forms.
  5. You can preview the form by clicking on the preview icon (notice that you can change the device to see how the form will display on different screen resoltions)
  6. When you are done give your form a title(at any piont) and click save form. You can save the form as a template to be re-opened and re-used as new forms.

Add Form to Page, Post or Sidebar Widget

Add forms to pages and post

  1. After your form has been saved go to your pages (add new or edit)
  2. Click on the NEX-Forms icon
  3. Select the form from the dropdown
  4. Click on the insert into post button
  5. Save the page or post

Add a form to Sidebar Widget

  1. After your form has been saved go to your widgets
  2. Drag and drop NEX-Forms into your desired sidebar
  3. Select the form
  4. Save the widget

Setup Confirmation Mails on form submissions

  1. Click on settings top bar
  2. Click on Autoresponder
  3. Complete the form as instructed
  4. Note you need a text or custom field set to be validated as email to be used as the address to send user confirmation mails
  5. Use the form data section to insert submitted values into your email body (submmited form values will be replaced with the field data found between the brackets {{ }}.

Form Animation Settings

  1. Choose to run or not to run the form animation
  2. If the animations runs change the time the animation should take to complete the form drawing

On Form Submission

  1. Add your "thank you" message to be displayed after a successfull (validation passed) form submmision.
  2. or Choose to redirect to a URL, for example a thank page

Default Form CSS

Note: Forms uses Bootstrap, Font Awsome (fontawesome) and jQuery UI styling frameworks

nex-forms .style_bold{font-weight:bold !important;} nex-forms .style_italic{font-style:italic !important;} nex-forms .ui-nex-forms-container .grid-system .panel-body, nex-forms .ui-nex-forms-container .grid-system .panel-body .row {padding: 0 !important;} nex-forms .animated{/* visibility:hidden;*/} nex-forms .visible {visibility: visible !important;} nex-forms .ui-nex-forms-container .grid-system {border: medium none !important;box-shadow: none;outline: medium none !important;padding: 0 !important;} nex-forms .ui-nex-forms-container .upload-single .input-group{width:100%;} nex-forms div.fileinput a {position: relative;z-index: 100 !important;} nex-forms .timepicker-picker a.btn span {text-align: center;width: 40px;} nex-forms .bootstrap-datetimepicker-widget td span {height: 25px !important;line-height: 25px !important;} nex-forms .align_right{text-align:right;right:0;} nex-forms .align_left{text-align:left;} nex-forms .align_center{text-align:center;} nex-forms .align_justify{text-align:justify;} nex-forms div.form_field .help-block.input-lg, nex-forms div.form_field .help-block.input-sm{padding:0;height:auto;} nex-forms .submit-button small {width: 100%;display: block;clear: both;margin-top: 7px;} nex-forms .ui-nex-forms-container .grid-system {margin-bottom: 15px;} nex-forms .grid-system .row, .grid-system .input_holder, nex-forms .grid-system .col-sm-2, nex-forms .grid-system .col-sm-10 {padding: 0 !important;margin: 0 !important;} nex-forms .grid-system .panel.grid-system > .panel-body {margin: 0 !important;padding: 10px;min-height: 61px;background:none;} nex-forms input[name="company_url"]{position:absolute;z-index:-1;top:-100000px;} nex-forms .grid-system .panel.grid-system {border: 1px dotted #ccc;border-radius: 0;margin: 0;min-height: 61px;background:none;} nex-forms hr{border-color:#dddddd;margin:0;} nex-forms p {background: none !important;} nex-forms .submit-button span.fa-spinner {} nex-forms .panel-heading.btn-lg, nex-forms .panel-heading.btn-sm {border-bottom-left-radius: 0;border-bottom-right-radius: 0;} nex-forms .ui-nex-forms-container{visibility:hidden;} nex-forms .ui-nex-forms-container #field_container {margin-bottom: 10px;} nex-forms .ui-nex-forms-container label#nexf_title, nex-forms .ui-nex-forms-container .help-block{display:none;} nex-forms .ui-nex-forms-container .form_field .input_holder .grid-system .panel {margin-right: 15px;} nex-forms .ui-nex-forms-container .form_field .input_holder:last-child > .grid-system .panel {margin-right: 0;} nex-forms .ui-nex-forms-container .grid-system .panel.grid-system > .panel-body {padding: 0 !important;} nex-forms .ui-nex-forms-container .grid-system .panel.grid-system {border: medium none !important;margin: 0 !important;padding: 0 !important;} nex-forms .grid-system #field_container {padding: 0 !important;} nex-forms .square .form-control, nex-forms .square .input-group-addon, nex-forms .square .selectpicker, nex-forms .square .dropdown-menu, nex-forms .square .btn, nex-forms .square .ui-slider-range, nex-forms .square #slider, nex-forms .square .panel:first-child, nex-forms .square .panel-body:first-child, nex-forms .square .panel-heading:first-child{border-radius: 0 !important;} nex-forms .full_rounded .form-control, nex-forms .full_rounded .input-group-addon, nex-forms .full_rounded .selectpicker, nex-forms .full_rounded .btn{border-radius: 50% !important;} nex-forms .form_field.grid .panel {margin-bottom: 15px;} nex-forms .form_field.grid, nex-forms .form_field.grid .input_holder {margin: 0 !important;} nex-forms div#nex-forms .color_pallet span.caret, nex-forms .bootstrap-select.btn-group .btn .caret{margin-top:0 !important;} nex-forms .btn.selectpicker {text-align: left;} nex-forms small.sub-text{font-weight:normal;color:#999;} nex-forms .ui-slider {margin-left: 6px;margin-right: 20px;position: relative;text-align: left;} nex-forms .ui-slider .ui-slider-handle{width:auto !important;height:auto !important;padding:5px;text-decoration:none !important;outline:none;cursor:pointer !important;top:-10px !important;font-size:12px !important;} nex-forms span.ui-spinner {width: 100%;} nex-forms span.ui-spinner input{border:none;padding:0 !important;padding-left:10px !important;} nex-forms div#star img,span.star_holder{position:relative;} nex-forms div#star{width:100% !important;} nex-forms span.ui-spinner.ui-widget-content{border:1px solid #ddd;} nex-forms button, nex-forms input, nex-forms select, nex-forms textarea{margin:0 !important;} nex-forms .is_required.btn-xs {padding: 0 !important;margin-right: 2px;font-size: 8px;top: -2px;} nex-forms .ui-slider-range-max:first-child {background: none repeat scroll 0 0 #F2F2F2;border:1px solid #ddd;} nex-forms .ui-slider-range-max:last-child {background: none repeat scroll 0 0 #FFFFFF;border:1px solid #ddd;} nex-forms .ui-slider{border:1px solid #ddd;} nex-forms .autocomplete, .autocomplete div.input-inner {z-index: 1001 !important;} nex-forms .ui-autocomplete {z-index: 1000 !important;background: #FFF !important;} nex-forms .the-radios .col-sm-12 {padding-left: 0;} nex-forms .prefix span, nex-forms .postfix span {font-size: 17px;} nex-forms .heading .input_holder, nex-forms .paragraph .input_holder, nex-forms .divider .input_holder {margin: 0;} nex-forms .display-block{margin-right:0 !important;} nex-forms div.radio-group label.radio-inline, nex-forms div.radio-group label.checkbox-inline, nex-forms div.checkbox-group label{height: 30px;line-height: 30px;padding-left:35px;position: relative;} nex-forms div.radio-group label a, nex-forms div.checkbox-group label a{position:absolute;top:0;left:0;text-decoration:none;} nex-forms div.input_holder{position:relative;margin-bottom:18px;} nex-forms div.input-inner{position:relative;top:2px;left:0;} nex-forms ul.selectpicker {display:block !important;} nex-forms .popover h3 {display: none;} nex-forms .ui-nex-forms-container .paragraph .input-group, nex-forms .ui-nex-forms-container .heading .input-group {width: 100% !important;} nex-forms h1.the_input_element, nex-forms h2.the_input_element, nex-forms h3.the_input_element, nex-forms h4.the_input_element, nex-forms h5.the_input_element, nex-forms h6.the_input_element{color:#000;margin:0;font-weight:normal;} nex-forms svg{position:absolute;z-index:20;top:0;left:0;} nex-forms svg {pointer-events: none;} nex-forms .do_show {opacity: 1 !important;} nex-forms .do_hide {opacity: 0 !important;} nex-forms .line-drawing, nex-forms .illustration {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;} nex-forms .line-drawing path {fill: none;stroke: #ccc;stroke-width: 1;} nex-forms path.line-round {stroke-linecap: round;} nex-forms path.stroke-medium {stroke-width: 2;} nex-forms path.stroke-thin {stroke-width: 0.5;} nex-forms .do_show, nex-forms .do_hide {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}

Locations of all CSS files included: /wp-content/plugins/Nex-Forms/css/

Javascript

This form plugin uses the following javascript libraries:

  • jQuery
  • Bootstrap
  • 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/

Requires: 3.5 or higher
Compatible up to: 3.9.1
Last Updated: 2014-7-22
Downloads: 4,096

Ratings

3 stars
3.9 out of 5 stars

Support

3 of 3 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

1 person says it works.
0 people say it's broken.

67,3,2
67,3,2
100,3,3 100,1,1