More elements on one line in the CF7

I use Ordered List elements to display multiple fields on single line.

HTML:

<ol class="singleline">
<li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
<li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>
</ol>

Added to Form section of CF7 interface. Labels are added for improved accessability.

CSS:

.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}

.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}

Add via Child Theme or use custom CSS plugin.

See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Thank you very much for the rapidity!
I made a cf with your html code and put the css code in the specific page where the cf will be. But i have 1 problem:

I will have some cf in specific pages but i’ll also have a cf in a pop up. How can i make the cf as i want with 2 elements per line of the size that i want directly from the cf editor? So that i’ll be able later to copy the cf code and paste it in the pop up.

I put you here a test page where i’m trying an order form with cf7:

https://www.sed.it/richiesta-consumabili

This order form is quite long and it would be nice to decrease its length by putting 2 elements on the same line. As you can see, i could put 4 elements in the same line nearly at the end of the cf. But i also would like to put the first elements 2 per line but i don’t know how to do it.

I copy you here my cf code so that you can clearly see what i have now and if you can maybe tell me how can i join for example the first 2 lines in 1 line:

<div class=”control-group required”>
<p>Nome e Cognome / Ragione Sociale <span>*</span>
[text* your-name] </p>
</div>
<div class=”control-group required”>
<p>Indirizzo <span>*</span>
[text* Indirizzo] </p>
</div>
<div class=”control-group required”>
<p>Provincia <span>*</span>
[select* Provincia include_blank “Agrigento” “Alessandria” “Ancona” “Arezzo” “Ascoli Piceno” “Asti” “Avellino” “Bari” “Barletta-Andria-Trani” “Belluno” “Benevento” “Bergamo” “Biella” “Bologna” “Bolzano/Bozen” “Brescia” “Brindisi” “Cagliari” “Caltanissetta” “Campobasso” “Carbonia-Iglesias” “Caserta” “Catania” “Catanzaro” “Chieti” “Como” “Cosenza” “Cremona” “Crotone” “Cuneo” “Enna” “Fermo” “Ferrara” “Firenze” “Foggia” “Forlì-Cesena” “Frosinone” “Genova” “Gorizia” “Grosseto” “Imperia” “Isernia” “L’Aquila” “La Spezia” “Latina” “Lecce” “Lecco” “Livorno” “Lodi” “Lucca” “Macerata” “Mantova” “Massa Carrara” “Matera” “Medio Campidano” “Messina” “Milano” “Modena” “Monza e della Brianza” “Napoli” “Novara” “Ogliastra” “Olbia-Tempio” “Oristano” “Padova” “Palermo” “Parma” “Pavia” “Perugia” “Pesaro e Urbino” “Pescara” “Piacenza” “Pisa” “Pistoia” “Pordenone” “Potenza” “Prato” “Ragusa” “Ravenna” “Reggio Calabria” “Reggio nell’Emilia” “Rieti” “Rimini” “Roma” “Rovigo” “Salerno” “Sassari” “Savona” “Siena” “Siracusa” “Sondrio” “Taranto” “Teramo” “Terni” “Torino” “Trapani” “Trento” “Treviso” “Trieste” “Udine” “Valle d’Aosta/Vallée d’Aoste” “Varese” “Venezia” “Verbano-Cusio-Ossola” “Vercelli” “Verona” “Vibo Valentia” “Vicenza” “Viterbo”] </p>
</div>
<div class=”control-group required”>
<p>Email <span>*</span>
[email* Email] </p>
</div>
<div class=”control-group required”>
<p>Telefono <span>*</span>
[tel* Telefono] </p>
</div>
<div class=”control-group required”>
<p>Marca e Modello <span>*</span>
[text* MarcaeModello] </p>
</div>
<div class=”col span_3″>
<p>Toner Nero<span></span>
[text TonerNero] </p>
</div>
<div class=”col span_3 col_last”>
<p>Toner Giallo<span></span>
[text TonerGiallo] </p>
</div>
<div class=”col span_3 col_last”>
<p>Toner Magenta<span></span>
[text TonerMagenta] </p>
</div>
<div class=”col span_3 col_last”>
<p>Toner Ciano<span></span>
[text TonerCiano] </p>
</div>
<div class=”control-group required”>
<p>Dove desideri ricevere i tuoi consumabili? <span></span>
[select Trasporto include_blank “GRATIS – Desidero ricevere il prodotto presso il mio indirizzo” “GRATIS – Desidero ritirare il prodotto presso SED Srl in Via Leone Pancaldo 66 37138 Verona (VR)”] </p>
</div>
<div class=”control-group required”>
<p>Note<span></span>
[text Note] </p>
</div>
</div>
<p>[submit “Invia”]</p>

Thank you very much for reading and i apoligize for this long message.
Francesco