Font size
Add this css to the Forminator appearance settings (bottom) to change the default font-size to theme default
/* -- START Change forminator font size to theme default -- */
label.forminator-label,
button.forminator-button.forminator-button-submit {
font-size: inherit !important;
}
/* -- END Change forminator font size to theme default -- */
Code language: CSS (css)
Field stacking
There are two mechanisms to stack fields on top of each other rather then next to each other:
- The container width is 480px or lower (JS).
To not stack fields in small containers, ensure that the minimum container width is 481px + padding. - The viewport width is 783px or lower (media query)
Use the below CSS to add a media query that prevents stacking on a viewport width 500 and larger (such as iPad portrait with 768px).
/* -- START Prevent field stacking on small sceens (default is iPad portrait 768px) -- */
@media (min-width: 500px) {
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="enclosed"] .forminator-row{
display: flex;
flex-wrap: wrap;
margin-right: -7px;
margin-left: -7px;
}
}
@media (min-width: 500px) {
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=enclosed] .forminator-col:not(:last-child) {
margin-bottom: 0;
}
}
@media (min-width: 500px) {
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=enclosed] .forminator-col {
min-width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 7px;
}
}
/* -- END Prevent field stacking on small sceens (default is iPad portrait 783px) -- */
Code language: CSS (css)
Select / dropdown field colors
In the appearance settings:
- The settings under ‘Select’ are for the closed field.
- The settings under ‘Drop down’ are for the opened field.
reCapcha badge not shown
Likely caused by a plugin conflct, but couldn’t find it. Workaround is to add the following css to the form appearance.
.grecaptcha-badge { visibility: visible !important; }
Code language: CSS (css)
Submission fields
To add to the admin email
{all_fields}
ID: {submission_id}
IP: {user_ip}
Datum/tijd: {date_dmy} {submission_time}
Submission time
https://wordpress.org/support/topic/submission-time-in-email-notification-doesnt-work/#post-15492831
The submission time is in a 12h clock format with am/pm. This code changes it to a 24h clock. It is supposed to work as a ‘[must use plugin](https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins)’. Could probably also be added in functions.php.
<?php
/**
* Plugin Name: [Forminator Pro] - Submission Time placeholder
* Description: [Forminator Pro] - Makes the {time24_hms}
placeholder available globally.
* Author: Anderson Salas & Prashant Singh @ WPMUDEV
* Author URI: https://premium.wpmudev.org
* License: GPLv2 or later
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
} elseif ( defined( 'WP_CLI' ) && WP_CLI ) {
return;
}
function wpmudev_fm_submission_time( $message ) {
$now = forminator_local_timestamp();
$placeholders = array(
'{time24_hms}' => date_i18n( 'H:i:s, T', $now, true ),
);
return str_ireplace(
array_keys( $placeholders ),
array_values( $placeholders ),
$message
);
}
add_filter( 'forminator_custom_form_mail_admin_message',
'wpmudev_fm_submission_time' );
add_filter( 'forminator_replace_variables',
'wpmudev_fm_submission_time' );
Code language: HTML, XML (xml)
Form vertalen met WPML
Forminator isn’t compatible with WPML. You have to copy the form and translate the labels and email yourself. Then use the shortcode of the translated form in the page translation. To be able to translate the shortcode, you have to register the forminator shortcode in WPML » Settings » Custom XML Configuration like this:
<wpml-config>
<shortcodes>
<shortcode>
<tag label="Forminator form">forminator_form</tag>
<attributes>
<attribute>id</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>
Code language: HTML, XML (xml)
Also add the following to functions.php:
// START Allow WPML to translate shortcode ID's
add_filter( 'wpml_tm_job_field_is_translatable', '__return_true'
);
// END Allow WPML to translate shortcode ID's
Code language: JavaScript (javascript)
Then translate the page with the Forminator shortcode and change the ID of the form into the ID of the form for that language. Search for the source ID if the translation item is hidden.