xyweb/wp-libre-form

Easy native HTML5 forms for WordPress

WP Libre Form

Use standard HTML5 markup to create fully functional forms for WordPress

Features

• Uses only HTML5 syntax to build forms. No GUIs, shortcodes, no bullshit
• Works with any valid HTML form. Just copy any form from any website and it will work. It's magic!
• Submissions are saved as custom post type posts. Form values are saved as custom fields.
• Validates required fields tagged with the native HTML5 required attribute.
• It's hackable. Add your own functionality with hooks and APIs.
• Email notifications of received form submissions
• Full file upload support to Media Library with input type=file
• Multilingual support with Polylang

Why?

Modern HTML markup is already a great way to build forms. With Libre Form, there's no need to learn clunky form builders that are hard to customise.

Just use standard HTML inputs to build, or copy a form to your WordPress site that will just magically work. No need to touch PHP code if you don't want to.

Required field validation, email notifications, file uploads to WP gallery and lots more are included by default in the core of the plugin, but you can also add your own functionality with hooks and APIs provided by Libre Form.

Screenshots

Editing a Form

Form displayed in the default Twentysixteen theme

Submissions view

Single submission view

Installation

The Composer Way (preferred)

Install the plugin via Composer

composer require anttiviljami/wp-libre-form

Activate the plugin

wp plugin activate wp-libre-form

The Old Fashioned Way

This plugin is available on the official WordPress.org plugin directory.

You can also install the plugin by directly uploading the zip file as instructed below:

1. Download the plugin
2. Upload to the plugin to /wp-content/plugins/ via the WordPress plugin uploader or your preferred method
3. Activate the plugin

Filter / Action API

Filter: wplf_validate_submission

Used to add validation to your forms.

Form specific hooks

This filter supports form specific hooks:

• wplf_{form_id}_validate_submission
• wplf_{form_slug}_validate_submission

These filters are only applied for the target form by ID or slug.

Example: Google ReCaptcha integration

/**
 * ReCaptcha for WP Libre Form
 */
add_filter( 'wplf_validate_submission', 'wplf_recaptcha' );
function wplf_recaptcha( $return ) {
  // skip this validation if submission has already failed
  if ( ! $return->ok ) {
    return $return;
  }

  $secret = RECAPTCHA_KEY; // substitute with your own secret recaptcha key string
  $options = [
    'http' => [
      'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
      'method'  => 'POST',
      'content' => http_build_query([
        'secret' => $secret,
        'response' => $_POST['g-recaptcha-response'],
      ])
    ],
  ];

  $context  = stream_context_create( $options );
  $result = file_get_contents( 'https://www.google.com/recaptcha/api/siteverify', false, $context );

  $captcha_obj = json_decode( $result );

  if ( false === $captcha_obj->success ) {
    $return->ok = 0;
    $return->error = __("Please prove you're not a robot before submitting.");
  }

  return $return;
}

Action: wplf_post_validate_submission

Triggers after the form validation is done.

Form specific hooks

This action supports form specific hooks:

• wplf_{form_id}_post_validate_submission
• wplf_{form_slug}_post_validate_submission

These actions are only run for the target form by ID or slug.

Example: Send a thank you email to the email in the submission

add_action( 'wplf_post_validate_submission', 'my_email_thankyou' );
function my_email_thankyou( $return ) {
  // recipient details from submission
  $name = sanitize_text_field( $_POST['name'] );
  $email = sanitize_email( $_POST['email'] );

  // email subject
  $subject = __( 'Thank You For Submitting A Form' );

  // text body of email
  $body = wp_sprintf( __('Thanks, %s for clicking Submit on this glorious HTML5 Form!'), $name );

  // send the email
  wp_mail( $email, $subject, $body );
}

Javascript API

Client side callbacks

WP Libre Form supports client side callbacks after form submission using window.wplf object. Example usage:

window.wplf.successCallbacks.push(res => alert('Form submission success: ' + res.form_id));
window.wplf.errorCallbacks.push(() => alert('Form submission failed!'));

These callbacks are executed in the order they appear.

To avoid running your JavaScript too early, add wplf-form-js to your enqueue dependencies:

wp_enqueue_script( "themejs", "/path/to/theme.js", array( "wplf-form-js" ), ... );

Otherwise you might run into errors like "Cannot read property 'push' of undefined".

Multilingual

You can create multilingual forms using Polylang. WPLF will register and automatically fetch the translation when you use special template tags.

Example:

<input type="text" placeholder="{{ Test string }}" name="test">

You can also disable this feature, and create your own middleware for WPML, if you'd like.

add_filter( 'wplf_load_polylang' , __return_false );

Adding extra classes to the form element

You can use the xclass attribute inside the shortcode to add your own extra classes for CSS.

[libre-form id="1" xclass="extra"]

Adding extra attributes to the form element

You can add any custom attributes to the form element easily by adding them to the shortcode

[libre-form id="1" data-custom-attr="contactme"]

The attribute will render as is on the <form> element

<form class="libre-form libre-form-1" data-custom-attr="contactme">