Zero Config Contact Form with Logging for Wordpress
Install the plugin with the informations specified here
Wordpress with Bedrock, jQuery loaded.
composer require stereo/contact-form
Create forms in raw html and add class "js-stereo-cf" to your form.
<form class="[any other classes] js-stereo-cf">
<textarea name="message" required></textarea>
<input type="submit">
</form>
<div style="display:none">Thanks.</div>
With this code, an email with the message content will be sent to the admin email of your Wordpress installation.
The subject will be "Formulaire de contact"
It will be logged in your Wordpress Administration, with the date, followed by the first field of your form.
<form class="[any other classes] js-stereo-cf" data-reset-only>
<form class="[any other classes] js-stereo-cf" data-subject="Formulaire de contact de ma mère">
<textarea name="message" required></textarea>
<input type="submit">
</form>
<div style="display:none">Thanks.</div>
Setting the data-title to a comma seperated list of fields will concatenate each with a space between.
<form class="[any other classes] js-stereo-cf" data-title="Prenom,Nom">
<input name="Prenom" required>
<input name="Nom" required>
<input type="submit">
</form>
<div style="display:none">Thanks.</div>
The default category is Contact
<form class="[any other classes] js-stereo-cf" data-category="Subscription">
<input name="Prenom" required>
<input name="Nom" required>
<input type="submit">
</form>
<div style="display:none">Thanks.</div>
Set data-redirect with the redirect url
<form class="[any other classes] js-stereo-cf" data-redirect="/success">
<input name="Prenom" required>
<input name="Nom" required>
<input type="submit">
</form>
<div style="display:none">Thanks.</div>
If you want the email to go somewhere else :
add_filter('st_cf_mail_to',function() {
return 'Your Mom <[email protected]>';
});
If you want the email to get from somewhere else :
add_filter('st_cf_mail_from',function() {
return 'Your Mom <[email protected]>';
});
If you want to change the subject of emails :
add_filter('st_cf_mail_subject',function($subject) {
return '[My rebranded CMS] '.$subject;
});
If you want to add templating to your email :
add_filter('st_cf_mail_content',function($content) {
return '<html><body style="background:pink;">'.$content.'</body></html>';
});
Default mail headers are :
'From: '.$from
'Content-Type: text/html; charset=UTF-8'
If you have a "Courriel" field a replyTo will be added to your headers.
add_filter('st_cf_mail_field',function($field) {
return 'Email';
});
add_filter('st_cf_mail_headers',function($headers) {
$headers[] = "X-Some: More-Headers";
return $headers;
});
add_filter('st_cf_mailmsg',function($msg) {
return 'New form entry : ';
// Default : Nouveau formulaire reçu, voici l'information
});
Default mail headers are :
'From: '.$from
'Content-Type: text/html; charset=UTF-8'
If you have a "Courriel" field a replyTo will be added to your headers.
add_filter('st_cf_mail_field',function($field) {
return 'Email';
});
add_filter('st_cf_mail_headers',function($headers) {
$headers[] = "X-Some: More-Headers";
return $headers;
});
<form class="[any other classes] js-stereo-cf" data-callback="functionName">
<input name="Prenom" required>
<input name="Nom" required>
<input type="submit">
</form>
<div style="display:none">Thanks.</div>
All uploaded files with name file[] are sent by email by default, but if you want to do anything else with them : If you don't want to uploads file on the server use _file[]
This hook is not triggered if there are no uploaded files.
$files = array of files
$postid
= ID of saved post ID
add_action('st_cf_files',function($files,$postid) {
foreach($files as $f) {
// $f is a temp file path that will be deleted after this hook.
}
}, 10, 2);
Send files in mail uploaded before the form is submitted :
Files will be removed from the server after the form is sent. Handle uploaded files if you want to keep them.
$files = array of files
add_filter('st_cf_files_external',function($files, $post_id) {
$files[] = $file_name;
return $files;
}, 10, 2);
if (window.initStereoForm) window.initStereoForm();