WP Secure Forms (ver. 1.0)

Generator of Ajax forms for Wordpress developers

Go to the generator

What is WP Secure Forms

WP Secure Forms generates PHP, HTML, JS and CSS of Wordpress forms for use in WP themes.

User input is validated and sanitized. Forms are protected from spam by using nonces, hidden fields and optional security questions.

Forms generated by WP Secure Forms use ajax for sending data and may have conditionally displayed fields.

First steps

WP Secure Forms Generator is very easy to use. Simply write what fields you need (examples and cheat sheet are provided), choose settings that you need and click generate.

Next, simply copy the scripts to the files in your theme (it's also explained above each script).

IMPORTANT! If you've forgotten about something and need to generate the form again you need to copy ALL the scripts to your theme files again. If you don't do that the form may not work - the scripts all work together and have a range of common variables (e.g. random nonces or file and field names).

FYI. The preview section gives you a glimpse of the fields but nothing more. It cannot be submitted and so any validation won't work there.

FAQ

Are you planning to add any other fields?
Yup. URL and attachment.
Why do the triggers in "JS" always bubble up from $('body')?
This was done in case you ever need to load the whole form via ajax.
I have found a bug / would like to request a feature / give a comment.
You can do that here
I need to be able to add the form via a shortcode. Can I do that?
Sure. Refer to the article in the codex.
I would like to help developing this generator.
That's great to hear. Get in touch with me.

Available fields and settings

Text

Example markup:

Label {description}
> * 30 #fieldID .fieldClass1 .fieldClass2
| Placeholder
! Error message

Asterisk (*) indicates that the field is "required"
Number limits input length

Textarea

Example markup:

Label {description}
> * 150 #fieldID .fieldClass1 .fieldClass2
| Placeholder
|
|
! Error message

Asterisk (*) indicates that the field is "required"
Number limits input length
The number of "pipes" (|) indicates the number of rows of the textarea

Email

Example markup:

Label {description}
> * $ #fieldID .fieldClass1 .fieldClass2
@ Placeholder
! Error message

Asterisk (*) indicates that the field is "required"
Number limits input length
If the field is marked with $ than the given email will be placed in "Reply To" section in PHP header.

Number

Example markup:

Label {description}
> * -50 50 #fieldID .fieldClass1 .fieldClass2
#
! Error message

Asterisk (*) indicates that the field is "required"
Numbers define range limit. In this example the field can hold values from -50 to 50.

Select

Example markup:

Label {description}
> * #fieldID .fieldClass1 .fieldClass2
- {Choose}
- choice 1
- choice 2
- choice 3
! Error message

Asterisk (*) indicates that the field is "required"
Curly brackets are optional and indicate "no choice"
! Select field cannot have a limit

Radio

Example markup:

Label {description}
> * 1 #fieldID .fieldClass1 .fieldClass2
- choice 1
- choice 2
- choice 3
! Error message

Asterisk (*) indicates that the field is "required"
! Radio must have the limit set to 1

Checkbox (Multiple choices)

Example markup:

Label {description}
> * 2 #fieldID .fieldClass1 .fieldClass2
- choice 1
- choice 2
- choice 3
! Error message

Asterisk (*) indicates that the field is "required"
! Checkboxes must have the limit of fields that can be chosen set to more than 1.

Checkbox (Single choice)

Example markup:

Label {description}
> * 1 #fieldID .fieldClass1 .fieldClass2
- I agree with privacy policy
! Error message

Asterisk (*) indicates that the field is "required"

Security question

Example markup:

Question {description}
> #fieldID .fieldClass1 .fieldClass2
= answer
! Error message

Question field is the only field in which the label is required
Questions fields are always required so there's no need to put an asterisk

Hidden field

Example markup:

> H * 100 #fieldID .fieldClass1 .fieldClass2

! H indicates the type of the field
Asterisk (*) indicates that the field is "required"

Conditionals

Conditional fields can be triggered by select, checkbox or radio fields. Simply add curly braces after a chosen option to add conditional fields.

Example markup:

Checkbox label
- option 1
- option 2
{

Text line label
| Placeholder

}
- option 3

Importat! Conditionally displayed fields cannot be required.

Remember!

There has got to be at least one required field in the form (obviously).

Labels are optional in all the field types except "security question" (also obvious).

Inserting field IDs and classes is always optional

Limits are optional except "checkbox" and "radio" fields

Mind the curly brackets. They have special meaning.

Form & Email Settings

User notifications

This script goes into the PHP file of your theme. Copy to clipboard
This one goes into your functions.php Copy to clipboard
In your theme folder create an "ajax" folder with the file named . Paste into it the code below. Copy to clipboard
In your theme folder create an "ajax" folder with the file named . Paste into it this code. Copy to clipboard
Paste this code into your theme's main js file. Copy to Copy to clipboard 
$('body').on('click', 'input[type=radio]', function(){
	
  var wrapper = $(this).parent(),
    triggers = wrapper.find('.isTrigger');
	
  if(triggers.length > 0){
    triggers.each(function(){
      if($(this).is(':checked')){
        $('.' + $(this).attr('data-toggle')).slideDown(200);
      } else {
        $('.' + $(this).attr('data-toggle')).slideUp(200);
      }
    })
  }
  	
})
		
$('body').on('click', 'input[type=checkbox]', function(){
	
  var that = $(this),
    wrapper = that.parent(),
    limit = wrapper.attr('data-limit'),
    chosen = wrapper.find('input:checked').length;
	
  // disabling / enabling choices
  if(that.is(':checked')){
    if(chosen + 1 > limit){
      wrapper.find('input').not(':checked').prop('disabled', true);
    }
  } else {
    wrapper.find('input').prop('disabled', false);
  }
	
  // conditional showing / hiding fields
  if(that.hasClass('isTrigger')){
		
    var targetClass = that.attr('data-toggle');
		
    if(that.is(':checked')){
      $('.' + targetClass).slideDown(200);
    } else {
      $('.' + targetClass).slideUp(200);
    }
  }
})
		
$('body').on('change', 'select', function(){
	
  var  that = $(this),
    wrapper = that.parent(),
    triggers = wrapper.find('.isTrigger'),
    options = wrapper.find('option');
	
  if(triggers.length > 0){
    options.each(function(){
      if($(this).is(':selected')){
        if($(this).hasClass('isTrigger')){
          $('.' + $(this).attr('data-toggle')).slideDown(200);
        }
      } else {
        if($(this).hasClass('isTrigger')){
          $('.' + $(this).attr('data-toggle')).slideUp(200);
        }
      }
    })
  }
})
Paste the code below into your theme's main css file. Copy to clipboard 
form>div, form>p{
  margin-top: 0;
  margin-bottom: 1em;
}
form fieldset {
  margin: 0;
  border: none;
  padding: 0;
}
form label, form legend{
  display: block;
  margin-bottom: .25em;
}
form label span, form legend span{
  font-size: .8em;
  font-style: italic;
}
form label span::before, form legend span::before{
  content: '';
  display: block;
}
input[type="checkbox"]+label, input[type="radio"]+label, input[type="number"]+label{
  display: inline-block;
}
form .showOnTrigger{
  display: none;
}
.secureforms-error-msg{
  display: none;
  color: red;
}
.secureforms-error-msg.active{
  display: block;
}
.secureforms-hidden-wrapper{
  display: none;
}
.secureforms-message-wrap.error{
  border: 2px solid red;
}
.secureforms-message-wrap.success{
  border: 2px solid green;
}