Creating a form and submitting it to the backend in WordPress using the Nette Form form class

In WordPress use page templates to create custom forms to allow users to enter data from the front-end page process is very troublesome, the main trouble lies in the creation of HTML forms and validate the data submitted by the user, this process needs to write a lot of code, not careful, it will be very easy to error, resulting in the form can not be submitted, or there are some security issues.

Nette From class library is the PHP Nette framework form processing class, we can take this class out of the separate use, the use of the method is also very simple, let's look at the following code are written in a WordPress standard page template.

The first step is to install and introduce the Nette-From library.

Installing the Nette-From library via Composer

composer require nette/forms

If you don't know how to use Composer, please refer to the previous article on this siteUsing PHP Composer in a WordPress theme or plugin。

Introducing the Nette From Class

This is a simple step, once you have installed it through Composer, you can just introduce the autoload.php file generated by Composer directly into the page template.

require_once( dirname( __FILE__ ) . '/vendor/autoload.php' );

use Nette\Forms\Form;

Create a form and display it

The most important step is to create the form, which is also different from the direct use of HTML to create the form, here, the code to create the form is completely written in PHP, do not have to write a mess of HTML code, the amount of code is reduced by a lot, the chance of error is naturally less.

// Get user data, used when setting default data for the form
$uid = wp_get_current_user()->ID;
$nickname = get_user_meta($uid, 'nickname' ,true);
$card = get_user_meta($uid, 'card' ,true);

// Create a form
$form = new Form;
$form->setMethod( 'POST' );

$form->addText( 'nickname', 'Nickname:' )
     ->setRequired( 'Please enter a nickname' ) // This is set as a required field for validation
     ->setDefaultValue($nickname);

$form->addText( 'card', ' Card Number:' )
     ->setDefaultValue($card); $form->addText( 'card', ' membership card number:' )

$form->addSubmit( 'send', 'Modify Profile' );

// Display the form
echo $forms.;

In the code above:

• We need to get the current user using the wp_get_current_user function
• Use get_user_meta to get the current user's custom fields

Submit to back office

The last step is to submit the data submitted to the background, before submitting, we can first verify that the data on the form meets the conditions we have set, the verification process Nette From helps us deal with, we just need to simply determine whether the verification is successful or not can be done, if the verification is successful, the data will be saved to the background, where the data is saved to a user-defined field directly using the update_user_ meta. meta to save the data to a user-defined field. If the validation fails, an error message will be displayed.

// Validate the form
if ( $form->isSuccess() ) {
    // Get the values of the form, with this, you don't have to go through the ugly $POST[*] to get the values submitted by the form.
    $values = $form->getValues();
    // Save the custom fields, with this action to save the data to the database
    update_user_meta( $uid, 'nickname', $values->nickname );
    update_user_meta( $uid, 'card', $values->card);

    // Show success alerts
    echo '<div class="ui-c-alert ui-c-alert-success">User Profile Modification Successful</div>';
}

// If the form has errors, display the error message
$form-&gt;render( 'errors' );

Here, a full-featured form is handled, of course, the demo code needs to deal with less data, it seems that there may not be much need to imagine, if the case of a very large number of form items, the direct use of HTML to create a form, or the use of this article describes the method is more convenient, I believe that the results are clear at a glance.