cms_plugin_request

cms_plugin_news

Samples
API Reference
Styling and Controls
Dependences

* Mandatory fields

Note 1: you can't submit form data in this sample. This form submission is disabled but form validation is enabled.

Note 2: you can't update data of this sample due insufficient permissions of logged demo user

jQuery code snippet:


cms_plugin_request= $('#sample-request').cms_plugin_request({ // create cms_plugin_request instance
	cms_path: skin_cms_path, // cms folder relative path
	form: "#sample-request-form", // plugin control element class
	enable: false, // disable submit form data (demo)
	rules: {
		name: {
			rule: {
				required: true,
				maxlength: 100
			},
			message: {
				required: _("Enter your full name"),
				maxlength: _("Exceeds max length") + ": 100"
			}
		},
		email: {
			rule: {
				required: true,
				email: true,
				maxlength: 100
			},
			message: {
				required: _("Enter your email"),
				email: _("Enter your valid email"),
				maxlength: _("Exceeds max length") + ": 100"
			}
		},
		message: {
			rule: {
				required: true,
				maxlength: 1000
			},
			message: {
				required: _("Enter your message"),
				maxlength: _("Exceeds max length") + ": 1000"					
			}
		},
		default: {
			rule: {
				maxlength: 100
			},
			message: {
				maxlength: _("Exceeds max length") + ": 1000"					
			}
		}
	},
	success_message: _("Your message succesfully sent"), // success message
	failure_message: _("Request form submission temporary disabled. Try later"), // failure message
	dialog: {
		failure: _("Failure"),
		success: _("Success"),
		error: _("Error")
	}
});

$('#sample-request-form a').click(function(){
	$('#sample-request-form').submit();
	return false;
});

HTML code snippet:



<div class="sample-form-container" id="sample-request">
	<div class="sample-form-box">
		<form id="sample-request-form" method="post" enctype="multipart/form-data">	
			<div class="sample-form-row">
				<div class="sample-form-label">{t}Name{/t}:*</div>
				<div class="sample-form-input"><input name="name" type="text" placeholder="{t}Enter your full name{/t}"></div>
			</div>
			<div class="sample-form-row">
				<div class="sample-form-label">{t}Email{/t}:*</div>
				<div  class="sample-form-input"><input type="text" name="email" placeholder="{t}Enter your e-mail address{/t}"></div>
			</div>
			<div class="sample-form-row sample-form-row-message">
				<div class="sample-form-label">{t}Description{/t}:*</div>
				<div class="sample-form-input"><textarea name="message"></textarea></div>
			</div>
			<div class="sample-form-button"><a>{t}Send{/t}</a></div>
		</form>
		<div>* {t}Mandatory fields{/t}</div>
	</div>
</div>

CSS code snippet:



.sample-form-container {
  position: relative;
  display: block;
  max-width: 750px;
  margin: 0px auto;
  clear: both;
}
.sample-form-container .sample-form-box {
  position: relative;
  left: 0;
  right: 0;
  margin: 0px auto;
}
.sample-form-container .sample-form-box .sample-form-label {
  line-height: 48px;
  position: absolute;
}
@media only screen and (min-width: 375px) {
  .sample-form-container .sample-form-box .sample-form-label {
    padding-left: 5px;
  }
}
.sample-form-container .sample-form-box .sample-form-row {
  display: block;
  position: relative;
  clear: both;
  font-size: 16px;
  color: #333;
  background-color: #f8f8f8;
  border: 1px #ccc solid;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 2px;
  min-height: 46px;
}
.sample-form-container .sample-form-box .sample-form-row.sample-form-row-message {
  min-height: 114px;
}
.sample-form-container .sample-form-box .sample-form-row.sample-form-row-message .sample-form-label {
  top: 5px;
  line-height: 1;
}
.sample-form-container .sample-form-box .sample-form-input {
  display: block;
  position: relative;
  padding-right: 2px;
  padding-left: 135px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.sample-form-container .sample-form-box .sample-form-input input, .sample-form-container .sample-form-box .sample-form-input textarea, .sample-form-container .sample-form-box .sample-form-input select {
  height: 40px;
  width: 98%;
  border: 1px #ccc solid;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #333;
  position: relative;
  display: block;
}
@media only screen and (max-width: 374px) {
  .sample-form-container .sample-form-box .sample-form-input input, .sample-form-container .sample-form-box .sample-form-input textarea, .sample-form-container .sample-form-box .sample-form-input select {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.sample-form-container .sample-form-box .sample-form-input input:focus, .sample-form-container .sample-form-box .sample-form-input textarea:focus, .sample-form-container .sample-form-box .sample-form-input select:focus {
  border: 1px black dotted;
  color: black;
}
.sample-form-container .sample-form-box .sample-form-input textarea {
  top: 25px;
  left: 5px;
  position: absolute;
  height: 76px;
}

.sample-form-container .sample-form-button {
  display: block;
  position: relative;
  padding-top: 0px;
  margin-top: 0px;
  text-align: center;
  clear: both;
  margin: 0px auto;
}
.sample-form-container .sample-form-button a {
  display: block;
  position: relative;
  margin: 20px auto;
  max-width: 100px;
  padding: 3px 20px;
  border: 1px #1e4369 solid;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  text-decoration: none;
  color: #1e4369;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  font-style: normal;
}
.sample-form-container .sample-form-button a::before {
  font-family: FontAwesome;
  content: "\f0e0";
  padding-right: 6px;
}
.sample-form-container .sample-form-button a:link {
  text-decoration: none;
  color: #1e4369;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
}
.sample-form-container .sample-form-button a:visited {
  text-decoration: none;
  color: #1e4369;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
}
.sample-form-container .sample-form-button a:active {
  text-decoration: none;
  color: #1e4369;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
}
.sample-form-container .sample-form-button a:hover {
  text-decoration: none;
  color: #1e4369;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  color: white;
  background-color: #1e4369;
 }
.sample-form-button a {
  font-style: normal;
}

.sample-plugin-control {
	position: absolute; width: 24px; height: 24px; right: 2px; top: 1px; 
	background: url('/skin/images/applications-system.png') no-repeat center center; 
	z-index: 1
}

.cms_plugin_request()

Option	Method	Callback
class_control, admin, control, submit
form_class, form_input_name, form_input_mail, form_input_phone, form_input_message
success_message, failure_message, dialog
id, cms_path, cms, messages

.cms_plugin_request( settings )

Description: Plugin will support request form data validation, submit, store and manage.

.cms_plugin_request( settings )

- settings
- Type: PlainObject
- A set of key/value pairs that configure cms_plugin_request() plugin.
  - - class_control (default: 'cms-plugin-control')
    - Type: String
    - Plugin tools marker selection class
  - - admin (default: ['admin'])
    - Type: Array
    - Array of user groups (roles) can use this plugin control
  - - control (default: true)
    - Type: Boolean
    - Enable plugin control
  - - submit (default: true)
    - Type: Boolean
    - Enable plugin form data submission
  - - form_class (default: 'cms-plugin-request-form')
    - Type: String
    - Plugin form class
  - - form_input_name (default: 'cms_plugin_request_form_name')
    - Type: String
    - Plugin form input "name"
  - - form_input_mail (default: 'cms_plugin_request_form_mail')
    - Type: String
    - Plugin form input "mail"
  - - form_input_phone (default: 'cms_plugin_request_form_phone')
    - Type: String
    - Plugin form input "phone"
  - - form_input_message (default: 'cms_plugin_request_form_message')
    - Type: String
    - Plugin form input "message"
  - - success_message (default: 'Your message succesfully sent')
    - Type: String
    - Plugin form submission success message
  - - failure_message (default: 'Request form submission temporary disabled. Try later')
    - Type: String
    - Plugin form submission failure default message
  - - dialog (default: '{ failure: "Failure",success: "Success",error: "Error" }')
    - Type: PlainObject
    - Plugin message dialog title for:
      - failure
      - success
      - error
  - - id (default: 'eng')
    - Type: String
    - Plugin data file id
  - - cms_path (default: '/cms/srv')
    - Type: String
    - Relative path to CMS software
  - - cms (default: true)
    - Type: Boolean
    - Use plugin with cms
  - - messages (default: see below)
    - Type: PlainObject
    - Plugin form validation messages for:
      - form_input_name: required, maxlength
      - form_input_mail: required, email, maxlength
      - form_input_phone: required, maxlength
      - form_input_message: required, maxlength
      Default messages:
      
      { cms_plugin_request_form_name: { required: "Enter your name", maxlength: "Exceeds max length: 100" }, cms_plugin_request_form_mail:{ required: "Enter your e-mail", email: "Enter your valid e-mail", maxlength: "Exceeds max length: 100" }, cms_plugin_request_form_phone: { required: "Enter your valid phone number", maxlength: "Exceeds max length: 50" }, cms_plugin_request_form_message:{ required: "Enter your message", maxlength: "Exceeds max length: 1000" } }

cms_plugin_request plugin plugin styling and control (plugin implementation in sample):

sample-request-form - request form element
sample-request-form table - request form table
sample-request-form textarea - request form textarea element
sample-request-form input - request form input element
sample-request-form input[type=text]:focus - request form input element type=text :focus
sample-request-form textarea:focus - request form textarea element :focus
sample-request-form input.error - request form input error class for validator
sample-request-form textarea.error - request form textarea error class for validator
sample-request-form label.error - label with error class
sample-request-form input[type=submit] - request form submit button
sample-request-form-submit - request form submit class
sample-plugin-control - plugin control

Plugin cms_plugin_request depends on following jQuery packages:

User ID:
User Password: