Skip to main content
título editado
Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Problemas con Contact formular 7 en css ¿Cómo alinear el botón a la altura de los input del formulario?

se añadieron 87 caracteres en el cuerpo
Origen Enlace
Dario B.
  • 455
  • 1
  • 3
  • 18

Y lo que quiero es que el boton de envio quede justo debajo de el de email, pero a la derecha. Pero no encuentro la solucion, por que cuando disminuyo la pantalla se rueda bastante. Aquì os dejo un enlace a jsfiddle Gracias y un saludo

Y lo que quiero es que el boton de envio quede justo debajo de el de email, pero a la derecha. Pero no encuentro la solucion, por que cuando disminuyo la pantalla se rueda bastante. Gracias y un saludo

Y lo que quiero es que el boton de envio quede justo debajo de el de email, pero a la derecha. Pero no encuentro la solucion, por que cuando disminuyo la pantalla se rueda bastante. Aquì os dejo un enlace a jsfiddle Gracias y un saludo

Origen Enlace
Dario B.
  • 455
  • 1
  • 3
  • 18

Problemas con Contact formular 7 en css

os explico, tengo lo que seguramente sera un problema bastante simple, pero que no le encuentro las solucion. Tengo el siguiente codigo asi

.row {
    width: 100%;
    position: relative;
    float: left;

}
.col7 {
        width: 100%;
        float: left;
    }

.border_right {
border-right: 1px solid;
-moz-border-image: -moz-linear-gradient(#ffffff 0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% , #000000 100%);
-webkit-border-image: -webkit-linear-gradient( #ffffff  0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% ,  #000000 100%);
border-image: linear-gradient(#ffffff 0%,#ffffff  11%, #5aa8c4 12%, #5aa8c4 47% , #000000 100%);
border-image-slice: 1;
font-family: 'serif';
}

.footer-title h1 {
    text-align: left;
    font-size: 2em;
    border-bottom: 1px solid black;
    padding: 1em;
}

.formular {
    margin: 2em 0em 0 2em;
}

.f-form {
    margin: 1em 0em 1em 2em;

}

.form-title {
    float: left;
    width: 59%;
    border-right: 1px solid;
    margin-top: 2em;
}

.form-title h2 {
    margin: 1em;
    color: #5aa8c4;
}

.cont-section {
    float: left;
    width: 40%;
    margin-top: 2em;
}

#contact .block1, .block2, .block3 {
    margin:0em 0em 2em 0em;
}

#contact h3 {
    color: #5aa8c4;
    font-size: 1.1em;
}

#contact p {
    font-size: 0.9em;
    line-height: 1.2em;
    font-weight: 600;
}

#contact a {
    color: black;
 }

.contactform input {
    padding: 0.8em 0em 0.8em 2em;
    width: 81%;
 }

.contactform label {
    margin-left: 1em;
    font-size: 1.2em;
 }

.contactform select {
    padding: 0.5em 2em 0.5em 2em;
    text-align: center;
    width: 86%;
    background: white;
    background: -webkit-linear-gradient(white, #d1d1d1 30%);
    background: -o-linear-gradient(white, #d1d1d1 30%);
    background: -moz-linear-gradient(white, #d1d1d1 30%);
    background: linear-gradient(white, #d1d1d1 30%);
    border: none;
    font-weight: 600;
    font-size: 1em;
 }

.contactform p {
    margin-bottom: 1em;
}


.wpcf7-submit {
    width: 30% !important;
    background-color: #3c95b8;
    color: white;
    font-weight: 600;
    font-size: 1.1em;
    padding: 0.5em !important;
}

.wpcf7-textarea {
    width: 85%;
}

.wpcf7-form-control {
    margin-bottom: 1em;
}

.wpp-list li {
    list-style: inside square;
}

.wpcf7 input[type="submit"] {

}
 <div class="col7">
                            <div>
                                <div class="contactform row border_right">
<div class="formular">
                                        <h2>Kontaktformular</h2>
                                         <div class="f-form"><div role="form" class="wpcf7" id="wpcf7-f59-o1" dir="ltr" lang="de-DE">
<div class="screen-reader-response"></div>
<form action="/test/fitnesspedia_neu/wp-content/themes/fitnesspedia/query_handler.php#wpcf7-f59-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input name="_wpcf7" value="59" type="hidden">
<input name="_wpcf7_version" value="4.9.1" type="hidden">
<input name="_wpcf7_locale" value="de_DE" type="hidden">
<input name="_wpcf7_unit_tag" value="wpcf7-f59-o1" type="hidden">
<input name="_wpcf7_container_post" value="0" type="hidden">
</div>
<p><label> Betreff / Thema:*<br>
    <span class="wpcf7-form-control-wrap Betreff"><input name="Betreff" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span> </label></p>
<p><label> <strong>Ihre Nachricht:*</strong><br>
   <span class="wpcf7-form-control-wrap textarea-200"><textarea name="textarea-200" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span> </label></p>
<p><label> Meine Nachricht enthält:* (bitte auswählen)<br>
<span class="wpcf7-form-control-wrap menu-682"><select name="menu-682" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Verbesserungsvorschlag">Verbesserungsvorschlag</option><option value="Infos">Infos</option></select></span></label></p>
<p><span class="wpcf7-form-control-wrap nameUser"><input name="nameUser" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Name" type="text"></span><br>
<span class="wpcf7-form-control-wrap adresse"><input name="adresse" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Adresse" type="text"></span><br>
<span class="wpcf7-form-control-wrap plz"><input name="plz" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="PLZ, Stadt" type="text"></span><br>
<span class="wpcf7-form-control-wrap telefon"><input name="telefon" value="Telefon" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span><br>
<span class="wpcf7-form-control-wrap email"><input name="email" value="Email" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></p>
<p><input value="Abschicken" class="wpcf7-form-control wpcf7-submit" type="submit"></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div>
                                    </div>
                                    </div>
                                    </div>

Y lo que quiero es que el boton de envio quede justo debajo de el de email, pero a la derecha. Pero no encuentro la solucion, por que cuando disminuyo la pantalla se rueda bastante. Gracias y un saludo