Como yo trabajo los formularios de Contact Form 7
-
Christian Himmer
- Actualizado el: 05/04/2025
Tabla de Contenido
En este artículo, quiero compartir contigo cómo trabajo yo los formularios de Contact Form 7 . Al principio, cuando empecé a usar esta herramienta, me costó entender su funcionamiento porque no encontraba mucha información clara. Por eso, decidí crear este tutorial detallado para ayudarte a dominarla y personalizar tus formularios como un experto.
La página de la estructura principal (Crocoblock) es esta: —>Link <—
Códigos CSS:
/* Código de los campos */
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=rut],
select,
textarea {
background-color: #919193; /* Color de fondo de los campos */
color: white; /* Color del texto */
border: 1px solid #666;
border-radius: 15px; /* Bordes redondeados */
padding: 10px; /* Espaciado interno */
width: 100%; /* Ocupa todo el ancho disponible */
box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}
/* Código de los campos en foco */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="rut"]:focus,
textarea:focus {
background-color: #919193; /* Color de fondo en foco */
color: white; /* Color del texto en foco */
outline: none; /* Elimina el contorno por defecto */
}
/* Código de los campos los Placeholder */
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="rut"]::placeholder,
textarea::placeholder{
color: white; /* Color del texto en foco */
padding-left: 5px;
}
/*Selector (Dropdown)*/
.wpcf7-select{
}
/*Dropdown Color del Texto*/
.wpcf7-select option{
color: #000; /* Color del texto */
}
/* Botón Submit */
.wpcf7-form input[type="submit"] {
}Agregar validador de Rut en CF7
Como sale en el video. Primero tienes que agregar este código a tu Code Snippets.
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
/**
* ------------------------------------------------------------------------
* Main class
* ------------------------------------------------------------------------
*/
class CF7RUT {
function __construct() {
// Register shortcodes
add_action('wpcf7_init', array(__CLASS__, 'add_shortcodes'));
// Tag generator
add_action('admin_init', array(__CLASS__, 'tag_generator'), 590);
}
static function add_shortcodes() {
if (function_exists('wpcf7_add_form_tag'))
wpcf7_add_form_tag(array( 'rut', 'rut*'), array(__CLASS__, 'shortcode_handler'), true);
else if (function_exists('wpcf7_add_shortcode')) {
wpcf7_add_shortcode(array( 'rut', 'rut*'), array(__CLASS__, 'shortcode_handler'), true);
} else {
throw new Exception('functions wpcf7_add_form_tag and wpcf7_add_shortcode not found.');
}
add_filter('wpcf7_messages', array(__CLASS__, 'wpcf7_text_messages_rut'), 30, 1 );
add_filter('wpcf7_validate_rut', array(__CLASS__, 'validation_filter'), 10, 2);
add_filter('wpcf7_validate_rut*', array(__CLASS__, 'validation_filter'), 10, 2);
}
static function shortcode_handler($tag) {
if ( empty( $tag->name ) ) {
return '';
}
$validation_error = wpcf7_get_validation_error( $tag->name );
$class = wpcf7_form_controls_class( $tag->type, 'wpcf7-text' );
$class .= ' wpcf7-validates-as-rut';
if ( $validation_error ) {
$class .= ' wpcf7-not-valid';
}
if( $tag->has_option( 'onformat' )){
$class .= ' wpcf7-rut-onformat';
}
if( $tag->has_option( 'onlynumbers' )){
$class .= ' wpcf7-rut-onlynumbers';
}
$atts = array();
$atts['size'] = $tag->get_size_option( '40' );
$atts['maxlength'] = '9';
$atts['minlength'] = $tag->get_minlength_option();
if ( $atts['maxlength'] and $atts['minlength']
and $atts['maxlength'] < $atts['minlength'] ) {
unset( $atts['maxlength'], $atts['minlength'] );
}
$atts['class'] = $tag->get_class_option( $class );
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option( 'tabindex', 'signed_int', true );
if ( $tag->is_required() ) {
$atts['aria-required'] = 'true';
}
$atts['aria-invalid'] = $validation_error ? 'true' : 'false';
$value = (string) reset( $tag->values );
if ( $tag->has_option( 'placeholder' )
or $tag->has_option( 'watermark' ) ) {
$atts['placeholder'] = $value;
$value = '';
}
$value = $tag->get_default_option( $value );
$value = wpcf7_get_hangover( $tag->name, $value );
$atts['value'] = $value;
if ( wpcf7_support_html5() ) {
$atts['type'] = $tag->basetype;
} else {
$atts['type'] = 'text';
}
$atts['name'] = $tag->name;
$atts = wpcf7_format_atts( $atts );
$html = sprintf(
'<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s</span>',
sanitize_html_class( $tag->name ), $atts, $validation_error );
return $html;
}
static function tag_generator() {
if (! function_exists( 'wpcf7_add_tag_generator'))
return;
wpcf7_add_tag_generator('rut',
'RUT',
'wpcf7-tg-pane-rut',
array(__CLASS__, 'rut_pane')
);
}
static function rut_pane( $contact_form, $args = '' ) {
?>
<div class="control-box">
<fieldset>
<legend>Genera una etiqueta de formulario para un campo de entrada RUT. La validación del campo está contemplada por defecto.</legend>
<table class="form-table">
<tbody>
<tr>
<th scope="row">Tipo de campo</th>
<td>
<fieldset>
<legend class="screen-reader-text">Tipo de campo</legend>
<label><input type="checkbox" name="required"> Campo requerido</label>
</fieldset>
</td>
</tr>
<tr>
<th scope="row"><label for="tag-generator-panel-text-name">Nombre</label></th>
<td><input type="text" name="name" class="tg-name oneline" id="tag-generator-panel-text-name"></td>
</tr>
<tr>
<th scope="row"><label for="tag-generator-panel-text-values">Valor predeterminado</label></th>
<td><input type="text" name="values" class="oneline" id="tag-generator-panel-text-values"><br>
<label><input type="checkbox" name="placeholder" class="option"> Use este texto como marcador del campo</label></td>
</tr>
<tr>
<th scope="row"><label for="tag-generator-panel-text-id">Atributo de ID</label></th>
<td><input type="text" name="id" class="idvalue oneline option" id="tag-generator-panel-text-id"></td>
</tr>
<tr>
<th scope="row"><label for="tag-generator-panel-text-class">Atributo de clase</label></th>
<td><input type="text" name="class" class="classvalue oneline option" id="tag-generator-panel-text-class"></td>
</tr>
<tr>
<th scope="row"><label for="tag-generator-panel-text-values">Auto formatear</label></th>
<td><label><input type="checkbox" name="onformat" class="option" checked="checked"> Permite automáticamente dar formato de RUT al campo</label></td>
</tr>
<tr>
<th scope="row"><label for="tag-generator-panel-text-values">Solo números</label></th>
<td><label><input type="checkbox" name="onlynumbers" class="option" checked="checked"> Solo permite ingresar números al campo</label></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<div class="insert-box">
<input type="text" name="rut" class="tag code" readonly="readonly" onfocus="this.select()" />
<div class="submitbox">
<input type="button" class="button button-primary insert-tag" value="<?php echo esc_attr(__('Insert Tag', 'contact-form-7')); ?>" />
</div>
<br class="clear" />
<p class="description mail-tag"><label for="tag-generator-panel-text-mailtag">Para recibir los datos enviados a través de este campo, debes insertar la etiqueta correspondiente (<strong><span class="mail-tag"></span></strong>) en alguno de los campos de la pestaña Correo electrónico.<input type="text" class="mail-tag code hidden" readonly="readonly" id="tag-generator-panel-text-mailtag"></label></p>
</div>
<?php
}
static function wpcf7_text_messages_rut( $messages ) {
$messages = array_merge( $messages, array(
'invalid_rut' => array(
'description' => 'El RUT que introdujo el usuario no es válido',
'default' => 'El RUT que has introducido no es válido.',
),
) );
return $messages;
}
static function validation_filter($result, $tag) {
$name = $tag->name;
$value = isset( $_POST[$name] )
? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
: '';
if ( 'rut' == $tag->basetype) {
if( $tag->is_required() and '' == $value ) {
$result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) );
}elseif ('' != $value and !self::validate_rut($value)) {
$result->invalidate( $tag, wpcf7_get_message( 'invalid_rut' ) );
}
}
return $result;
}
static function validate_rut($rut){
if (!preg_match("/^[0-9.]+[-]?+[0-9kK]{1}/", $rut)) {
return false;
}
$rut = preg_replace('/[\.\-]/i', '', $rut);
$dv = substr($rut, -1);
$number = substr($rut, 0, strlen($rut) - 1);
$i = 2;
$sum = 0;
foreach (array_reverse(str_split($number)) as $v) {
if ($i == 8)
$i = 2;
$sum += $v * $i;
++$i;
}
$dvr = 11 - ($sum % 11);
if ($dvr == 11)
$dvr = 0;
if ($dvr == 10)
$dvr = 'K';
if ($dvr == strtoupper($dv))
return true;
else
return false;
}
}
new CF7RUT;
/**
* ------------------------------------------------------------------------
* Get plugin url
* ------------------------------------------------------------------------
*/
function wpcf7rf_plugin_url( $path = '' ) {
$url = plugins_url( $path, __FILE__ );
if ( is_ssl() && 'http:' == substr( $url, 0, 5 ) ) {
$url = 'https:' . substr( $url, 5 );
}
return $url;
}
/**
* ------------------------------------------------------------------------
* Add required script
* ------------------------------------------------------------------------
*/
add_action( 'wp_enqueue_scripts', 'wpcf7rf_enqueue_scripts', 20, 0 );
function wpcf7rf_enqueue_scripts() {
wp_enqueue_script('wpcf7rf-scripts', wpcf7rf_plugin_url('scripts.js?'.time()), null, null, true);
}
/**
* ------------------------------------------------------------------------
* JavaScript for Campo RUT para Contact Form 7
* ------------------------------------------------------------------------
*/
add_action('wp_footer', function() {
?>
<script type="text/javascript">
function cf7rf_ready(callback){
if (document.readyState!='loading') callback();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') callback();
});
}
function cf7rf_setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
});
}
function cf7rf_formatRut(rut) {
rut = rut.replace(/^0+/, "");
if (rut != '' && rut.length > 1) {
rut = rut.replace(/\./g, "");
rut = rut.replace(/-/g, "");
var dv = rut.substring(rut.length - 1);
rut = rut.substring(0, rut.length - 1);
var rutPoints = "";
var i = 0;
var j = 1;
for (i = rut.length - 1; i >= 0; i--) {
var c = rut.charAt(i);
rutPoints = c + rutPoints;
if (j % 3 == 0 && j <= rut.length - 1) {
rutPoints = "." + rutPoints;
}
j++;
}
rutPoints = rutPoints + "-" + dv;
return rutPoints;
}else{
return null;
}
}
cf7rf_ready(function(){
if(typeof document.getElementsByClassName('wpcf7-form')[0] !== 'undefined' && document.getElementsByClassName('wpcf7-form')[0] !== null){
if(typeof document.getElementsByClassName('wpcf7-validates-as-rut')[0] !== 'undefined' && document.getElementsByClassName('wpcf7-validates-as-rut')[0] !== null){
var fields = document.getElementsByClassName('wpcf7-validates-as-rut');
for (var i = 0; i < fields.length; ++i) {
var field = fields[i];
if(field.classList.contains("wpcf7-rut-onlynumbers")){
cf7rf_setInputFilter(field , function(value) {return /^[0-9kK]*$/.test(value); });
}
field.addEventListener("blur", blurCallback, false);
}
function blurCallback(e) {
var field = e.currentTarget
var value = field.value;
if(typeof value !== 'undefined' && value != '' && value != null){
if(field.classList.contains("wpcf7-rut-onformat")){
field.value = cf7rf_formatRut(value);
}
}
}
}
}
});
</script>
<?php
});
Si tienen alguna duda pueden escribirme con toda confianza.
Saludos a tod@s.
