Michael Janea

 

 

MJ Form Builder

Let your users create their own form with built-in email functionality!

  • Compatible with Bootstrap and Non-Bootstrap
  • No database required
  • Available in 66 languages
  • jQuery / PHP Email function ready
  • Real-time validation (MJ Form Validation)
  • Date/Time Picker
  • Back-end is 100% customizable, you may use your own code
  • WP Gravity Form inspired
  • Easily configure the title, description, settings and confirmation message using the form settings.
  • Standard Fields
    • Single Line Text (Textbox)
    • Paragraph Text (Textarea)
    • Dropdown
    • Multi Select
    • Checkboxes
    • Radio Buttons
    • Number
  • Advanced Fields
    • Date
    • Time
    • Website (URL)
    • Email
    • File Upload
  • Notifications - Easily configure notification emails that are sent when a form is submitted. Quickly respond to users filling out your form with a User notification that acts as an auto-responder thanking them for submission.

 

Spam Security Features

  • Allow users to send an email every 30 seconds (100% configurable)
  • reCaptcha

 

Road Map / Future Features

  • Advanced Fields - Sometimes standard form fields just don't cut the mustard. That's where the advanced fields come in.. from capturing names, addresses and phone numbers. The advanced fields are here to make your life even easier.
  • Pricing Fields - Order forms can incorporate pricing specific fields to allow your users to make selections and generate a total based on product and option selections.
  • Conditional Logic - Conditional Logic allows you to configure your form to show or hide fields, sections, pages or even the submit button based on user selections. This allows you to easily control what information your user is asked to provide on your WordPress powered site and tailor the form specifically to their needs.
  • and many more...

Demo

 

Dependencies

It requires the following plugins to work: Widget and Line Utilities.

 

How to Install

  1. Extract the downloaded file (mjFormBuilder.zip)
  2. Copy the "mjFormBuilder" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'widget,lineutils,mjFormBuilder';
    config.contentsCss = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.allowedContent = true;
    config.mjFormBuilder_date_class_name = 'datepicker';
    config.mjFormBuilder_time_class_name = 'timepicker';
    config.mjFormBuilder_sitekey = 'enter reCaptcha site key';
    config.mjFormBuilder_use_bootstrap = true;
    config.mjFormBuilder_date_format_selection = [
        'MM/DD/YYYY',
        'DD/MM/YYYY',
        'DD-MM-YYYY',
        'DD.MM.YYYY',
        'YYYY/MM/DD',
        'YYYY-MM-DD',
        'YYYY.MM.DD'
    ];
    config.mjFormBuilder_time_format_selection = [
        'hh:mm A',
        'HH:mm'
    ];
    config.fillEmptyBlocks = false;
  5. Use the toolbargroupname: "MJFormBuilder" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'MJFormBuilder', 'Source' ] }
    ];
  6. Open the file "ckeditor.html"
  7. Configure the CKEditor's options to your own preferences
  8. Update the source path of "ckeditor.js"
    <script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
  9. Download the front-end demo here
  10. Open "ajax.php"
  11. Configure email code section to your preferences especially the reCaptcha's secret key
  12. Download Bootstrap 3 Datepicker here
  13. Download MJ Form Validation here
  14. Add the following code to your front-end's <head> tag
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-datetimepicker-master/build/js/moment.js"></script>
    <script type="text/javascript" src="bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="mjFormValidation/mjFormValidation.js"></script>
    <script type="text/javascript">
    $(function(){
        $('form').mjFormValidation();
    
        $('.datepicker').each(function(){
           $(this).datetimepicker({
                format  : $(this).attr('data-date-format')
            }); 
        });
    
        $('.timepicker').each(function(){
           $(this).datetimepicker({
                format  : $(this).attr('data-time-format')
            }); 
        });
    
        $(document).on('submit', '.mj-forms', function(){
            // get form object
            var el = $(this).closest('form');
    
            // set button placeholder
            $(el).find('[name=submit]').prop('disabled', true).innerHTML = 'Sending...';
    
            // remove any alert boxes
            $(el).find('.alert').remove();
    
            // get all datas needed
            var serialized_data = new FormData(this)
            serialized_data.append('data-send-to', $(this).closest('form').attr('data-send-to'));
            serialized_data.append('data-bcc', $(this).closest('form').attr('data-bcc'));
            serialized_data.append('data-from-name', $(this).closest('form').attr('data-from-name'));
            serialized_data.append('data-from-email', $(this).closest('form').attr('data-from-email'));
            serialized_data.append('data-subject', $(this).closest('form').attr('data-subject'));
            serialized_data.append('data-body', decodeURIComponent($(this).closest('form').attr('data-body')));
    
            // get file data
            $(this).closest('form').find('.mjFormBuilder_file').each(function(){
                serialized_data.append('data-' + ($(this).attr('name')).replace('[]', '') + '-allowed-file-extensions', $(this).attr('data-allowed-file-extensions'));
                serialized_data.append('data-' + ($(this).attr('name')).replace('[]', '') + '-maximum-file-size', $(this).attr('data-maximum-file-size'));
            });
    
            // sending email
            $.ajax({
                type        : 'post',
                dataType    : 'json',
                data        : serialized_data,
                processData :false,
                contentType : false,
                cache       : false,
                url         : 'ajax.php',
                success     : function(data){
                    $('html, body').animate({scrollTop:$(el).offset().top});
                    if(data.success && data.captcha && data.error == ''){
                        $(el).prepend('<div class="alert alert-success" role="alert">' + decodeURIComponent($(el).attr('data-confirmation-message')) + '</div>');
                        $(el).find('input, select, textarea').val('');
                    }else{
                        var errmsg = '';
                        if(data.error == ''){
                            errmsg += data.waiting_time > 0 && data.captcha ? "This form requires that you wait 30 seconds between submissions. Please try again in " + data.waiting_time + " seconds.\n" : '';
                            errmsg += !data.captcha ? "Invalid reCaptcha.\n" : '';
                        }else{
                            errmsg += data.error;
                        }
                        $(el).prepend('<div class="alert alert-danger" role="alert">' + errmsg + '</div>');
                    }
                    $(el).find('[name=submit]').prop('disabled', false).innerHTML = 'Submit';
                },
                error   : function(param1, param2, param3){
                    console.log(param2);
                }
            });
    
            // reset captcha
            grecaptcha.reset();
    
            // prevent default
            return false;
        });
    });
    </script>
    <script src="https://www.google.com/recaptcha/api.js"></script>
  15. Make sure to clear your browser's cache
  16. Done
  1. Extract the downloaded file (mjFormBuilder.zip)
  2. Copy the "mjFormBuilder" folder to "sites/all/modules/ckeditor/plugins/" folder
  3. Open the file "sites/all/modules/ckeditor/ckeditor.config.js"
  4. Add these lines:
    config.allowedContent = true;
    config.mjFormBuilder_date_class_name = 'datepicker';
    config.mjFormBuilder_time_class_name = 'timepicker';
    config.mjFormBuilder_sitekey = 'enter reCaptcha site key';
    config.mjFormBuilder_use_bootstrap = true;
    config.mjFormBuilder_date_format_selection = [
        'MM/DD/YYYY',
        'DD/MM/YYYY',
        'DD-MM-YYYY',
        'DD.MM.YYYY',
        'YYYY/MM/DD',
        'YYYY-MM-DD',
        'YYYY.MM.DD'
    ];
    config.mjFormBuilder_time_format_selection = [
        'hh:mm A',
        'HH:mm'
    ];
    config.fillEmptyBlocks = false;
  5. Open the file "sites/all/modules/ckeditor/css/ckeditor.css"
  6. Add this line at the top:
    @import  url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
  7. Open the file "sites/all/modules/ckeditor/plugins/mjFormBuilder/ckeditor.html"
  8. Configure the CKEditor's options to your own preferences
  9. Update the source path of "ckeditor.js"
    <script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
  10. Make sure to clear your browser's cache
  11. Go to your Drupal's admin side -> Configuration -> Content Authoring -> CKEditor -> Profile -> Choose any profile you want and click "Edit" link -> Editor Appearance -> Available buttons -> Drag & drop mjFormBuilder icon to "Current Toolbar" -> click "Save"
  12. Configure email code section to your preferences especially the reCaptcha's secret key
  13. Download Bootstrap 3 Datepicker here
  14. Download MJ Form Validation here
  15. Add the following code to your front-end's <head> tag
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-datetimepicker-master/build/js/moment.js"></script>
    <script type="text/javascript" src="bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="mjFormValidation/mjFormValidation.js"></script>
    <script type="text/javascript">
    $(function(){
        $('form').mjFormValidation();
    
        $('.datepicker').each(function(){
           $(this).datetimepicker({
                format  : $(this).attr('data-date-format')
            }); 
        });
    
        $('.timepicker').each(function(){
           $(this).datetimepicker({
                format  : $(this).attr('data-time-format')
            }); 
        });
    
        $(document).on('submit', '.mj-forms', function(){
            // get form object
            var el = $(this).closest('form');
    
            // set button placeholder
            $(el).find('[name=submit]').prop('disabled', true).innerHTML = 'Sending...';
    
            // remove any alert boxes
            $(el).find('.alert').remove();
    
            // get all datas needed
            var serialized_data = new FormData(this)
            serialized_data.append('data-send-to', $(this).closest('form').attr('data-send-to'));
            serialized_data.append('data-bcc', $(this).closest('form').attr('data-bcc'));
            serialized_data.append('data-from-name', $(this).closest('form').attr('data-from-name'));
            serialized_data.append('data-from-email', $(this).closest('form').attr('data-from-email'));
            serialized_data.append('data-subject', $(this).closest('form').attr('data-subject'));
            serialized_data.append('data-body', decodeURIComponent($(this).closest('form').attr('data-body')));
    
            // get file data
            $(this).closest('form').find('.mjFormBuilder_file').each(function(){
                serialized_data.append('data-' + ($(this).attr('name')).replace('[]', '') + '-allowed-file-extensions', $(this).attr('data-allowed-file-extensions'));
                serialized_data.append('data-' + ($(this).attr('name')).replace('[]', '') + '-maximum-file-size', $(this).attr('data-maximum-file-size'));
            });
    
            // sending email
            $.ajax({
                type        : 'post',
                dataType    : 'json',
                data        : serialized_data,
                processData :false,
                contentType : false,
                cache       : false,
                url         : 'ajax.php',
                success     : function(data){
                    $('html, body').animate({scrollTop:$(el).offset().top});
                    if(data.success && data.captcha && data.error == ''){
                        $(el).prepend('<div class="alert alert-success" role="alert">' + decodeURIComponent($(el).attr('data-confirmation-message')) + '</div>');
                        $(el).find('input, select, textarea').val('');
                    }else{
                        var errmsg = '';
                        if(data.error == ''){
                            errmsg += data.waiting_time > 0 && data.captcha ? "This form requires that you wait 30 seconds between submissions. Please try again in " + data.waiting_time + " seconds.\n" : '';
                            errmsg += !data.captcha ? "Invalid reCaptcha.\n" : '';
                        }else{
                            errmsg += data.error;
                        }
                        $(el).prepend('<div class="alert alert-danger" role="alert">' + errmsg + '</div>');
                    }
                    $(el).find('[name=submit]').prop('disabled', false).innerHTML = 'Submit';
                },
                error   : function(param1, param2, param3){
                    console.log(param2);
                }
            });
    
            // reset captcha
            grecaptcha.reset();
    
            // prevent default
            return false;
        });
    });
    </script>
    <script src="https://www.google.com/recaptcha/api.js"></script>
  16. Make sure to clear your browser's cache
  17. Done
Not yet supported
Not yet supported

 

More Set-up Information

Option Description
config.mjFormBuilder_date_class_name Class name used for date pickers. You may also use your own jQuery date picker.
config.mjFormBuilder_time_class_name Class name used for time pickers. You may also use your own jQuery time picker.
config.mjFormBuilder_sitekey sitekey given by reCaptcha
config.mjFormBuilder_use_bootstrap

set this to true to use Bootstrap's HTML form structure

Default Value: false
Choices: true, false
config.mjFormBuilder_date_format_selection

available date formats for date picker you are using

Default Value: ['MM/DD/YYYY', 'DD/MM/YYYY', 'DD-MM-YYYY', 'DD.MM.YYYY', 'YYYY/MM/DD', 'YYYY-MM-DD', 'YYYY.MM.DD'];
config.mjFormBuilder_time_format_selection

available time formats for time picker you are using

Default Value: ['hh:mm A', 'HH:mm'];

 

Logs

  • 1.4
    • ADDED: Drag and drop sorting
    • ADDED: File Upload support
  • 1.3
    • ADDED: config.mjFormBuilder_use_bootstrap to support non-bootstrap
    • ADDED: config.mjFormBuilder_date_format_selection to manage date formats available for custom date pickers
    • ADDED: config.mjFormBuilder_time_format_selection to manage time formats available for custom time pickers
  • 1.2
    • ADDED: base64 encryption for email addresses to prevent robots from crawling these
    • FIXED: function() default parameter value bug for IE and Safari
  • 1.1
    • ADDED: Date, Time, Website and Email
    • ADDED: reCaptcha for additional security
    • ADDED: Dropdown for dynamic fields in Body's popup
    • CHANGED: HTML5 Validation to MJ Form Validation for cross-browser compatibility
    • FIXED: Tab index
    • FIXED: Minor bugs
  • 1.0
    • Initial release

 

Package Details

INDIVIDUAL 

$10.00

 

  • Free updates for 2 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Form Builder

INDIVIDUAL
+ UPDATES

$40.00

$60.00

  • Free updates for 6 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Form Builder

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.