Sorry, the link was wrong.

Hi Doris,

I’ve had the same issue. Than I changed “display order” to “ascending”. Now it works fine for me. Maybe it could help you too?

Best regards,
hermelina

Hi Skibro,
please, have a look at my contactform http://magazinschmiede.de/anmeldung/. I think, it’s nearly what you are searching for (on desktop; on small mobile-devices it looks different). If so, here are my settings:

I added these classes in the style.css of my child theme – I think you have to change the colors and maybe font-size:

.wpcf7
{
max-width:630px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full, .column-third, .column-twothird{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
border-radius: 5px;
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}

/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
.column-third{
width: 30%;
}
.column-twothird{
width: 70%
}
}

.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: left;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border-radius: 5px;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #a81010;
border-color: #000000;
color: #ffffff;
margin: 0;
}

And here the data for the contact form:

<div class=”clearfix”>

<div class=”form-row”>
<div class=”column-third”>Frau/Herr* [select menu-377 “Frau” “Herr”]</div>
<div class=”column-full”>Vor- und Nachname* [text* your-name]</div>
</div>

<div class=”form-row”>
<div class=”column-half”>Straße und Hausnummer* [text* text-832]</div>
<div class=”column-half”>Postleitzahl und Wohnort* [text* text-833]</div>
</div>

<div class=”form-row”>
<div class=”column-third”>Unternehmen[text text-690]</div>
<div class=”column-third”>E-Mail* [email* your-email]</div>
<div class=”column-third”>Telefon* [tel* tel-293]</div>
</div>

<div class=”form-row”>
<div class=”column-half”>Bitte wählen Sie Ihr Training* [select* menu-789 “BasisWissen Magazin” “BasisWissen Business Blog” “Professionell schreiben” “Reportage, Feature, Portrait” “Meldung, Bericht, Interview” “Teaser, Titel, Bildunterschriften”]</div>
<div class=”column-half”>Bitte tragen Sie den Termin ein* [text* text-891]</div>
</div>

<div class=”form-row”>
<div class=”column-full”>Nachricht (optional) [textarea your-message]</div>
</div>

<div class=”form-row”>
<div class=”column-full”>Ich habe die AGB gelesen und akzeptiere sie* [acceptance acceptance-842]</div>
<div class=”column-half”>[submit “Senden”]</div>
</div>

</div><!–end 4–>

Cheers!
hermelina

Hallo Susanne,

ich hatte das gleiche Problem. Mir hat das hier geholfen:

https://kriesi.at/support/topic/menu-showing-as-right-sidebar-on-mobile/#post-390169

Beste Grüße
hermelina