Simple but smart and modern Ajax contact form. With Form Blocks and Gutenberg based settings page.
Unfortunately WordPress does not come with built-in functionality for a simple contact form. Although, there are a bunch of plugins that allow you to create various forms of any configuration and complexity. But for me the problem with all these plugins is that they are too huge and functional. When the site needs only one simple (but convenient) feedback form, then a multifunctional monster is too much for me. That's why I wrote this plugin. And then, when Gutenberg appeared, I decided to rewrite the settings page using React components... it turned out very conveniently.
🎃 Of course, all that plugin has is its lightweight size and simple settings. No unnecessary flexibility and functionality. The simple must remain simple.
The plugin allows you to add a feedback form or booking form to the page. The data is sent to the server via AJAX (this can be disabled using the settings and the form will be submitted as usual, with a page reload... but why do you need it?). You can flexibly personalize the form and its fields.
The form is added to a page using the Gutenberg Custom Blocks - with these blocks, the possibilities for customizing your form are greatly increased.
You can also add a form to a page using the shortcode [zu-contact] or [zu-booking].
- Lightweight
JS script&CSS(only 4 KB minified and gzipped) - Includes form blocks for the new Gutenberg WordPress block editor
- Also supports adding a contact form to any post or page using a shortcode
- Form submission via AJAX (configurable by settings)
- Data validation on the server
- Support for required fields
- Responsive layout
- Notification of submissions to default admin or custom email addresses
- Send a
carbon copyof the submitted message (configurable by settings) - Basic
SMTP(Simple Mail Transfer Protocol) configuration - Protect submissions from spam with Google
reCAPTCHA(configurable by settings) - Automatically checks all submissions against global database of spam (with Akismet)
- Save messages to the database as comments to a post or page
- Compatible with the latest version of WordPress
With custom blocks for Gutenberg WordPress editor you can easily create new contact forms and customize them with great flexibility:
- You can create a form based on templates or from scratch
- Add and remove form fields
- Change the position of fields, their type and other attributes
- Change field labels, placeholders and validation error messages
- Add to verification form using Google
reCAPTCHA - Change the animation of the form loader (used during form submission)
You can also personalize the form by adding attributes to the shortcode:
- class - Change CSS class of form:
class="my-contact-form" - form - Select one of preloaded forms:
form="contact" - subheading - Change form subheading:
subheading="My Contact Form" - ajax - Disable form submission via AJAX:
ajax=false - recaptcha - Disable Google reCAPTCHA widget:
recaptcha=false - rows - Change rows amount in textarea:
rows=12 - message - Set predefined form message:
message="Thanks for your hard work!"
- With custom subheading and without reCAPTCHA:
[zu-contact subheading="My Contact Form" recaptcha=false]
- With custom class, without AJAX and with 8 rows in textarea:
[zu-contact class="my-contact-form" ajax=false rows=8]
❗ Plugin only works under WordPress 5.1 or higher and PHP 7.0 or higher
- Upload the
zu-contactfolder to the/wp-content/plugins/directory. - Activate the plugin using the
Pluginsmenu in your WordPress admin panel. - You can adjust the necessary settings using your WordPress admin panel in "Settings > Zu Contact".
- Create a page or a post and insert the shortcode
[zu-contact]or[zu-booking]into the text.
❗ After creating blocks for the Gutenberg block editor, creating forms in PHP is no longer relevant and practically does not have any advantages over creating a form interactively using Gutenberg blocks. The only benefit I see right now is creating a form in PHP using the __() functions to access various translations of field labels and other attributes. Therefore, for now, I leave here a description for creating forms in PHP. In the future, I plan to modify this plugin to work with the QTranslate-XT plugin, and then this section will completely lose its relevance.
Basically, adding new forms is not intended for the user. The simple must remain simple. But it is possible to create new forms using PHP. You just need to add a little code to your theme's functions.php file or any other php file that will be called on loading (you need to understand a little about how WordPress works).
First, you need to create an object of the zu_ContactFields class and set the form name and possibly some other parameters. Then add the required fields and finally register the form. After that, you can use the name of the new form in the shortcode:
// check if plugin is activated
if(function_exists('zucontact')) {
// available form options:
// 'rows' - rows amount in textarea
// 'carbon_copy' - if true then sends a 'copy' of the message to the submitter
// 'prefix' - prefix which will be used for all CSS classes with this form
$form = new zu_ContactFields('booking', ['carbon_copy' => true]);
$form->add(
// field id (could be any)
'name',
// field label
__('Name', 'my-theme'),
// field type
'text',
// if there is validation message - filed is required
// field validation message (if empty)
__('Please give your name.', 'my-theme'),
// field placeholder
__('Your Name', 'my-theme')
);
$form->add(
// field id
'email',
// field label
__('Email', 'my-theme'),
// field type
'email',
// if there is validation message - filed is required
// field validation message (array)
// [
// 0 - if empty,
// 1 - if non valid
// ]
[
__('Please give your email address.', 'my-theme'),
__('Please enter a valid email address.', 'my-theme')
],
// field placeholder
__('Your Email Address', 'my-theme')
);
$form->add(
// field id
'phone',
// field label
__('Phone', 'my-theme'),
// field type
'tel',
// if there is no validation message - filed is not required
'',
// field placeholder
__('Your Phone Number eg. +49-541-754-3010', 'my-theme')
);
$form->add(
// field id
'places',
// field label
__('Places', 'my-theme'),
// field type
'number',
__('Please give the amount of places to book for you.', 'my-theme'),
// field placeholder
__('How Many Places?', 'my-theme')
);
$form->add(
// field id
'message',
// field label
__('Message', 'my-theme'),
// field type
'textarea',
'',
// field placeholder
__('Your Message', 'my-theme')
);
$form->add(
// field id
'submit',
// field label
__('Book', 'my-theme'),
// field type
'submit'
);
zucontact()->register_form($form);
}Using the new form in shortcode is pretty simple:
[zu-contact form="my-form"]
Need help? This is a developer's portal for Zu Contact and should not be used for general support and queries. Please visit the support forum on WordPress.org for assistance.
