se agrego Componente formulario
This commit is contained in:
176
resources/views/components/form/basic-contact.blade.php
Normal file
176
resources/views/components/form/basic-contact.blade.php
Normal file
@ -0,0 +1,176 @@
|
||||
@props([
|
||||
'id' => 'contact-form',
|
||||
'fields' => [],
|
||||
'buttonLabel' => 'Enviar',
|
||||
'successMessage' => '¡Gracias! Te contactaremos muy pronto.',
|
||||
'action' => config('app.contact_form_action', request()->url()), {{-- Ajusta si usas una ruta específica --}}
|
||||
'method' => 'POST',
|
||||
'buttonClass' => 'btn btn-primary custom-btn text-center text-uppercase text-decoration-none border-0 py-0 px-5 font-weight-semibold',
|
||||
'class' => 'row g-3',
|
||||
'showHoneypot' => true,
|
||||
])
|
||||
|
||||
@php
|
||||
// Normaliza campos y valores por defecto
|
||||
$normalized = collect($fields)->map(function ($f) {
|
||||
$f = collect($f);
|
||||
return [
|
||||
'type' => $f->get('type', 'text'),
|
||||
'name' => $f->get('name', ''),
|
||||
'label' => $f->get('label', ''),
|
||||
'placeholder' => $f->get('placeholder', ''),
|
||||
'value' => old($f->get('name'), $f->get('value', '')),
|
||||
'required' => (bool) $f->get('required', false),
|
||||
'rows' => (int) $f->get('rows', 6),
|
||||
'options' => $f->get('options', []), // para selects/radios si en el futuro lo usas
|
||||
'col' => $f->get('col', 'col-12'), // grid responsive opcional
|
||||
'help' => $f->get('help', ''),
|
||||
'attrs' => $f->get('attrs', []), // atributos HTML extra
|
||||
];
|
||||
});
|
||||
@endphp
|
||||
|
||||
<form id="{{ $id }}"
|
||||
action="{{ $action }}"
|
||||
method="{{ strtoupper($method) === 'GET' ? 'GET' : 'POST' }}"
|
||||
class="contact-form custom-form-style-1 {{ $class }}"
|
||||
novalidate
|
||||
>
|
||||
@csrf
|
||||
@if(!in_array(strtoupper($method), ['GET','POST']))
|
||||
@method($method)
|
||||
@endif
|
||||
|
||||
{{-- Porto: alertas de éxito / error --}}
|
||||
@if (session('contact_success'))
|
||||
<div class="contact-form-success alert alert-success mt-2" role="status">
|
||||
<strong>¡Éxito!</strong> {{ session('contact_success') ?: $successMessage }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="contact-form-error alert alert-danger mt-2" role="alert">
|
||||
<strong>¡Error!</strong> Verifica los datos del formulario.
|
||||
<ul class="mb-0 mt-2">
|
||||
@foreach ($errors->all() as $e)
|
||||
<li>{{ $e }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Honeypot antispam (oculto a usuarios reales) --}}
|
||||
@if($showHoneypot)
|
||||
<div aria-hidden="true" class="d-none">
|
||||
<label for="{{ $id }}-website">Sitio web</label>
|
||||
<input type="text" name="website" id="{{ $id }}-website" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Render dinámico de campos --}}
|
||||
@foreach($normalized as $field)
|
||||
@php
|
||||
$inputId = $id . '-' . $field['name'];
|
||||
$required = $field['required'] ? 'required' : '';
|
||||
$isInvalid = $errors->has($field['name']) ? 'is-invalid' : '';
|
||||
$attrs = collect($field['attrs'])->map(fn($v, $k) => $k.'="'.e($v).'"')->implode(' ');
|
||||
@endphp
|
||||
|
||||
@if($field['type'] === 'hidden')
|
||||
<input type="hidden" name="{{ $field['name'] }}" value="{{ $field['value'] }}">
|
||||
@continue
|
||||
@endif
|
||||
|
||||
<div class="form-group {{ $field['col'] }}">
|
||||
@if($field['label'])
|
||||
<label class="form-label mb-1 font-weight-bold text-dark" for="{{ $inputId }}">
|
||||
{{ $field['label'] }}
|
||||
@if($field['required']) <span class="text-danger" aria-hidden="true">*</span>@endif
|
||||
</label>
|
||||
@endif
|
||||
|
||||
@switch($field['type'])
|
||||
@case('textarea')
|
||||
<textarea
|
||||
id="{{ $inputId }}"
|
||||
name="{{ $field['name'] }}"
|
||||
rows="{{ $field['rows'] }}"
|
||||
class="form-control {{ $isInvalid }}"
|
||||
placeholder="{{ $field['placeholder'] ?: $field['label'] }}"
|
||||
{{ $required }}
|
||||
aria-required="{{ $field['required'] ? 'true' : 'false' }}"
|
||||
aria-invalid="{{ $errors->has($field['name']) ? 'true' : 'false' }}"
|
||||
{!! $attrs !!}
|
||||
>{{ $field['value'] }}</textarea>
|
||||
@break
|
||||
|
||||
@case('select')
|
||||
<select
|
||||
id="{{ $inputId }}"
|
||||
name="{{ $field['name'] }}"
|
||||
class="form-select {{ $isInvalid }}"
|
||||
{{ $required }}
|
||||
aria-required="{{ $field['required'] ? 'true' : 'false' }}"
|
||||
aria-invalid="{{ $errors->has($field['name']) ? 'true' : 'false' }}"
|
||||
{!! $attrs !!}
|
||||
>
|
||||
<option value="" disabled {{ $field['value'] === '' ? 'selected' : '' }}>
|
||||
{{ $field['placeholder'] ?: 'Selecciona una opción' }}
|
||||
</option>
|
||||
@foreach($field['options'] as $optValue => $optLabel)
|
||||
<option value="{{ $optValue }}" {{ (string)$optValue === (string)$field['value'] ? 'selected' : '' }}>
|
||||
{{ $optLabel }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@break
|
||||
|
||||
@default
|
||||
<input
|
||||
id="{{ $inputId }}"
|
||||
type="{{ $field['type'] }}"
|
||||
name="{{ $field['name'] }}"
|
||||
value="{{ $field['value'] }}"
|
||||
class="form-control {{ $isInvalid }}"
|
||||
placeholder="{{ $field['placeholder'] ?: $field['label'] }}"
|
||||
{{ $required }}
|
||||
aria-required="{{ $field['required'] ? 'true' : 'false' }}"
|
||||
aria-invalid="{{ $errors->has($field['name']) ? 'true' : 'false' }}"
|
||||
{!! $attrs !!}
|
||||
/>
|
||||
@endswitch
|
||||
|
||||
@if($field['help'])
|
||||
<div class="form-text">{{ $field['help'] }}</div>
|
||||
@endif
|
||||
|
||||
@error($field['name'])
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- Botón enviar al estilo Porto --}}
|
||||
<div class="form-group col-12 mt-2">
|
||||
<button type="submit" class="{{ $buttonClass }}">
|
||||
<span class="me-2">{{ $buttonLabel }}</span>
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{-- Mejora UX: evita reenvío al volver / scroll a errores --}}
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Evita reenvío en back/forward cache
|
||||
if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
|
||||
|
||||
const errorBox = document.querySelector('.contact-form-error');
|
||||
if (errorBox) {
|
||||
const y = errorBox.getBoundingClientRect().top + window.pageYOffset - 120;
|
||||
window.scrollTo({ top: y, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user