3

Estoy tratando de colocar un text area al lado del boton de enviar, pero por alguna razón por mas que pruebe a crear columnas y filas siempre aparece debajo. introducir la descripción de la imagen aquí

Estoy usando contact form 7 de wordpress Este sería el código usado:

<div class="row shorten">
  <div class="col-12 col-sm-3">
    <div class="input-filled radius">
      [text* your-name placeholder "Nombre"]
    </div>
    <br />
    <div class="input-filled radius">
      [text* your-phone placeholder "Telefono "]
    </div>
  </div>
  <br />
  <div class="col-12 col-sm-3">
    <div class="input-filled radius">
      [email* your-email placeholder "Email "]
    </div>
    <br />
  </div>
  <div class="col-6 col-sm-3">
    [textarea* your-message x1 class:form-control placeholder "Mensaje"]
  </div>
  <div class="col-6 col-sm-3">
    <button type="submit" class="wpcf7-submit btn radius">▷</button>
  </div>
</div>

También he probado:

<div class="row shorten">
  <div class="col-12 col-sm-3">
    <div class="input-filled radius">
      [text* your-name placeholder "Nombre"]
    </div>
    <div class="input-filled radius">
      [text* your-phone placeholder "Telefono "]
    </div>
  </div>
  <div class="col-12 col-sm-3">
    <div class="input-filled radius">
      [email* your-email placeholder "Email "]
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <div class="input-filled radius">
        [textarea* your-message x1 class:form-control placeholder "Mensaje"]
      </div>
    </div>
    <div class="col-xs-6">
      <button type="submit" class="wpcf7-submit btn col-12 col-sm-12 radius">▷</button>
    </div>
  </div>
</div>

no se muy bien porque no puedo colocarlo paralelo es decirintroducir la descripción de la imagen aquí

Gracias de antemano.

2 respuestas 2

1

Te dejo por aquí una solución usando css, junté el boton y el textArea en el mismo div y les asigne un float left:

HTML

<div class="row shorten">
  <div class="col-12 col-sm-3">
    <div class="input-filled radius">
      [text* your-name placeholder "Nombre"]
    </div>
    <div class="input-filled radius">
      [text* your-phone placeholder "Telefono "]
    </div>
  </div>
  <div class="col-12 col-sm-3">
    <div class="input-filled radius">
      [email* your-email placeholder "Email "]
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <div class="input-filled radius textArea">
        [textarea* your-message x1 class:form-control placeholder "Mensaje"]
      </div>
      <button
        type="submit"
        class="wpcf7-submit btn col-12 col-sm-12 radius boton"
      >
        ▷
      </button>
    </div>
  </div>
</div>;

CSS

.boton, .textArea{
  float: left;
}

Espero que te sirva y ten un buen dia!

3
  • Muchas gracias por tu ayuda! el problema es que se me queda el text area muy pequeño, he tenido que colocarle un tamaño y al ampliar o reducir la página se va abajo otra vez.
    – Sara11
    Commented el 10 mar. 2022 a las 10:21
  • para eso tienes que jugar con los col-xs, me olvidé de cambiártelo a 12, el div donde esta tu textArea con el botón esta en col-xs-6, ve jugando con las rejillas y encontraras la solución
    – Panken0
    Commented el 10 mar. 2022 a las 10:27
  • Gracias, aunque si lo puse en 12 y seguía saliendo mas pequeño.
    – Sara11
    Commented el 10 mar. 2022 a las 11:40
0

Prueba meter el mensaje y el botón dentro de un div con la clase "row", así se quedarían en la misma fila pero además, controla que el tamaño de ambos div(mensaje y botón) sean un poco menos que 12, porque estás usando un col-sm-3. Al darle ese margen estás tomando espacio de otra col (por eso no puede dar 12 la suma de las 2 porque se te baja el botón). Modifiqué el código que pasaste al principio haciendo lo que te explico. Pruébalo y me cuentas. Un saludo!

<div class="row shorten">
      <div class="col-12 col-sm-3">
        <div class="input-filled radius">
          [text* your-name placeholder "Nombre"]
        </div>
        <br />
        <div class="input-filled radius">
          [text* your-phone placeholder "Telefono "]
        </div>
      </div>
      <br />
      <div class="col-12 col-sm-3">
        <div class="input-filled radius">
          [email* your-email placeholder "Email "]
        </div>
        <br />
      </div>
      <div class="row">
      <div class="col-9 col-sm-3">
        [textarea* your-message x1 class:form-control placeholder "Mensaje"]
      </div>
      <div class="col-2 col-sm-3">
        <button type="submit" class="wpcf7-submit btn radius">▷</button>
      </div>
    </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.