Skip to main content
The contact form allows you to reach out to Tienda ETCA with questions, feedback, or support requests. This page explains how to use the contact form effectively.

​
Accessing the Contact Form

The contact page is available through the main navigation:
  1. Navigate to the Contact section from the site menu
  2. The contact page loads with a centered form
  3. The cart remains accessible from this page

​
Page Layout

The contact page features:
  • Header: Standard site navigation and cart icon
  • Page Title: “Contacto” heading centered at the top
  • Introduction Text: Brief message encouraging you to get in touch
  • Contact Form: Centered form with input fields
  • Footer: Standard site footer
// Reference: ~/workspace/source/src/layout/Contacto.jsx:14-27
<div className="container py-5" style={{ backgroundColor: '#ffffff', minHeight: '70vh' }}>
  <h2 className="text-center mb-4">Contacto</h2>
  <p className="text-center mb-5">
    Si tienes alguna consulta, no dudes en escribirnos a través del siguiente formulario.
  </p>
  
  <div className="row justify-content-center">
    <div className="col-md-8">
      <Formulario />
    </div>
  </div>
</div>

​
Form Fields

The contact form includes three required fields:

​
1. Name (Nombre)

  • Field Type: Text input
  • Placeholder: “Nombre”
  • Required: Yes
  • Purpose: Identify who is sending the message

​
2. Email (Correo)

  • Field Type: Email input
  • Placeholder: “Correo”
  • Required: Yes
  • Validation: Must be a valid email format
  • Purpose: Allow Tienda ETCA to respond to your inquiry

​
3. Message (Mensaje)

  • Field Type: Text input
  • Placeholder: “Mensaje”
  • Required: Yes
  • Purpose: Your question, comment, or inquiry
All three fields are required. You cannot submit the form with any empty fields.

​
Form Structure

// Reference: ~/workspace/source/src/components/Formulario.jsx:14-53
<form className="container my-4" onSubmit={manejarEnvio}>
  <div className="row g-3">
    <div className="col-md-4">
      <input
        type="text"
        className="form-control"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Nombre"
        required
      />
    </div>
    <div className="col-md-4">
      <input
        type="email"
        className="form-control"
        value={mail}
        onChange={(e) => setMail(e.target.value)}
        placeholder="Correo"
        required
      />
    </div>
    <div className="col-md-4">
      <input
        type="text"
        className="form-control"
        value={mensaje}
        onChange={(e) => setMensaje(e.target.value)}
        placeholder="Mensaje"
        required
      />
    </div>
    <div className="col-12 text-end">
      <button type="submit" className="btn btn-primary">
        Enviar
      </button>
    </div>
  </div>
</form>

​
Submitting the Form

​
How to Submit

  1. Fill in all three required fields:
    • Enter your full name
    • Provide a valid email address
    • Type your message or inquiry
  2. Click the “Enviar” (Send) button
  3. The form is validated before submission

​
Form Validation

The form uses HTML5 validation:
  • Empty Fields: Cannot submit with any empty required fields
  • Email Format: The email field must contain a valid email address (e.g., [email protected])
  • Browser Validation: Your browser will display validation messages if fields are invalid
Make sure to provide a valid email address so that Tienda ETCA can respond to your inquiry.

​
After Submission

When you successfully submit the form:
  1. A browser alert appears with the message: 
    Formulario enviado por: [Your Name]
  2. This confirms your form was processed
  3. Click “OK” to dismiss the alert
// Reference: ~/workspace/source/src/components/Formulario.jsx:9-12
function manejarEnvio(evento) {
  evento.preventDefault();
  alert(`Formulario enviado por: ${nombre}`);
}
Currently, the form displays a confirmation alert but does not send the data to a backend server. This is a demonstration form showing the frontend implementation.

​
Form State Management

The contact form uses React state to manage input values: 
// Reference: ~/workspace/source/src/components/Formulario.jsx:5-7
const [nombre, setNombre] = useState('');
const [mensaje, setMensaje] = useState('');
const [mail, setMail] = useState('');
  • Each field’s value is controlled by React state
  • As you type, the state updates in real-time
  • Form data is available for submission when you click “Enviar”

​
Use Cases

The contact form is ideal for:

Product Inquiries

Ask questions about specific products, availability, or specifications for archery equipment.

Order Support

Request help with orders, shipping, or purchase-related questions.

Technical Issues

Report problems with the website, cart, or browsing experience.

General Feedback

Share suggestions, feedback, or comments about Tienda ETCA.

​
Best Practices

1

Be Specific

Provide detailed information in your message. If asking about a product, include the product name or ID.
2

Valid Email

Double-check your email address before submitting to ensure you receive a response.
3

Clear Subject

Start your message with a clear subject or summary of your inquiry.
4

Include Context

If reporting an issue, describe what you were trying to do when the problem occurred.

​
Tips for Effective Contact Messages

​
Cart Access

While on the contact page, your shopping cart remains accessible:
  • Click the cart icon in the header to view your cart
  • The cart drawer slides in from the side
  • You can manage cart items without leaving the contact page
// Reference: ~/workspace/source/src/layout/Contacto.jsx:30
<Cart isOpen={isCartOpen} onClose={() => setCartOpen(false)} />
You can browse products and contact Tienda ETCA without losing your cart contents.

​
Form Styling

The contact form uses Bootstrap styling for a clean, responsive layout:
  • Bootstrap Grid: Responsive column layout
  • Form Controls: Styled input fields with consistent appearance
  • Button Styling: Primary button style for the submit action
  • Spacing: Proper padding and margins for readability

Build docs developers (and LLMs) love

Get started for freeTalk to us