Dropdown multiple selection or checkbox in horizontal style

I'm working on a form at work. So far so far, but I am no coder. I do have HTML / CSS knowledge. The website is run in CakePHP and I'm used to Wordpress. Anyway, there's a problem. I want one of the following:

1. Dropdown with multiple selection options
2. Horizontal checkbox layout

But, I'm very limited with the build-in contact form options. The current form can be found at: https:// http://ift.tt/2hJLz5i

The first question (Waar wilt u wonen? / Where do you want to live) is where I want either the dropdown with multiple options or make it a checkbox but in horizontal style. Below is the current code I'm using for the form. Please see the attached screenshots. My options seem quite limited to HTML and CSS.

Screenshot dropdown Screenshot checkbox

It looks like I can only work the class within the shortcode.. but perhaps you have the solution for me. Please help me! Thanks.

Current code:

<style>

        .titel {
                font-weight: bold;
                margin-top: 50px;
                margin-bottom: 15px;
        }
        .titel-2 {
                font-weight: bold;
                margin-top: 100px;
                margin-bottom: 15px;
        }
        .titel-3 {
                font-weight: bold;
                margin-top: 50px;
                margin-bottom: 15px;
        }
        
        .radio {
                display: inline-block;
                float: left;
        }
                
</style>

<div class="woningzoekenden"><p class="titel">Geografische wensen</p>

<label> Waar wilt u wonen? (vereist)
        [select multiple required="true" name="gewenste-plaats" placeholder="Maak uw keuze" options="Arnhem, Westervoort, Oosterbeek, Velp, Rheden"] 
</label>

<label> Wilt u in een specifieke wijk of straat wonen? (optioneel)
        [text name="specifiek" placeholder="U kunt hier uw wijk of straat achterlaten."]
</label>

<p class="titel">Financieel</p>

<label> Wilt u een huis kopen of huren? (vereist)
        [select required="true" name="kopen-huren" options="Kopen, Huren"]
</label>

<div>
<label> Min. en max. koopprijs:
        <div>
                <div style="width: 50%; float: left; padding-right: 5px;">
                        [select multiple required="true" name="minimum-koopprijs" options="Geen minimum, €50.000, €75.000, €100.000, €125.000, €150.000, €175.000, €200.000, €225.000, €250.000, €275.000, €300.000, €350.000, €400.000, €450.000, €500.000, €550.000, €600.000, €700.000, €800.000, €900.000, €1.000.000, €1.500.000, €2.000.000, n.v.t."]
                </div>
                <div style="width: 50%; float: left; padding-left: 5px;">
                        [select required="true" name="maximum-koopprijs" options="Geen maximum, €50.000, €75.000, €100.000, €125.000, €150.000, €175.000, €200.000, €225.000, €250.000, €275.000, €300.000, €350.000, €400.000, €450.000, €500.000, €550.000, €600.000, €700.000, €800.000, €900.000, €1.000.000, €1.500.000, €2.000.000, n.v.t."]
                </div>
        </div>            
</label>
</div>

<div>
<label> Min. en max. huurprijs p/m €:
        <div>
                <div style="width: 50%; float: left; padding-right: 5px;">
                        [select required="true" name="minimum-huurprijs" options="Geen minimum, €100, €200, €300, €400, €500, €600, €700, €800, €900, €1000, €1250, €1500, €1750, €2000, €3000, €4000, €5000, €6000, n.v.t."]
                </div>
                <div style="width: 50%; float: left; padding-left: 5px;">
                        [select required="true" name="maximum-huurprijs" options="Geen maximum, €100, €200, €300, €400, €500, €600, €700, €800, €900, €1000, €1250, €1500, €1750, €2000, €3000, €4000, €5000, €6000, n.v.t."]
                </div>
        </div>            
</label>
</div>

<p class="titel-2">Woningkenmerken</p>

<label> Soort object: (vereist)
        [select required="true" name="soort-object" placeholder="Maak uw keuze" options="Eensgezinswoning, Herenhuis, Landgoed, Landhuis, Appartement, Bungalow, Villa, Woonboerderij, 2-onder-1-kapwoning, Eindwoning, Geschakelde 2-onder-1-kapwoning, Halfvrijstaande woning, Vrijstaande woning"]
</label>

<label> Soort bouwvorm: (vereist)
        [select required="true" name="soort-bouwvorm" placeholder="Maak uw keuze" options="Bestaande bouw, Nieuwbouw"]
</label>

<label> Perceeloppervlakte: (vereist)
        [select required="true" name="perceel-oppervlakte" placeholder="Maak uw keuze" options="50+m², 75+m², 100+m², 150+m², 200+m², 250+m², 500+m², 1000+m², 2000+m²"]
</label>

<label> Woonoppervlakte: (vereist)
        [select required="true" name="woon-oppervlakte" placeholder="Maak uw keuze" options="50+m², 75+m², 100+m², 150+m², 250+m²"]
</label>

<label> Aantal kamers: (vereist)
        [select required="true" name="kamers" placeholder="Maak uw keuze" options="1+, 2+, 3+, 4+, 5+"] 
</label>

<label> Aantal slaapkamers: (vereist)
        [select required="true" name="slaapkamers" placeholder="Maak uw keuze" options="1+, 2+, 3+, 4+, 5+"]    
</label>

<p class="titel-3">Persoonlijke gegevens</p>

<label> Aanhef:
        [radio name="aanhef" options="Dhr., Mevr." class="radio"]
</label>

<div><label> Naam:
        <div>
                <div style="width: 30%; float: left; padding-right: 5px;">
                        [text name="voorletters" placeholder="Voorletters"]
                </div>
                <div style="width: 70%; float: left; padding-left: 5px;">
                        [text name="achternaam" placeholder="Achternaam"]
                </div>
        </div>            
</label>
</div>

<div><label> Adres:
        <div>
                <div style="width: 50%; float: left; padding-right: 5px;">
                        [text name="straat" placeholder="Straat"]
                </div>
                <div style="width: 25%; float: left; padding-left: 5px; padding-right: 3px;">
                        [text name="huisnummer" placeholder="Nr."]
                </div>
                <div style="width: 25%; float: left; padding-left: 7px;">
                        [text name="toevoeging" placeholder="Toev."]
                </div>            
        </div>            
</label>
</div>

<div>
<label> Postcode & Plaats:
        <div>
                <div style="width: 50%; float: left; padding-right: 5px;">
                        [text name="postcode" placeholder="Postcode"]
                </div>
                <div style="width: 50%; float: left; padding-left: 5px;">
                        [text name="plaats" placeholder="Plaats"]
                </div>
        </div>            
</label>
</div>

<div>
<label> Contactgegevens:
        <div>
                <div style="width: 50%; float: left; padding-right: 5px;">
                        [text name="telefoon" placeholder="Telefoonnummer"]
                </div>
                <div style="width: 50%; float: left; padding-left: 5px;">
                        [text name="mobiel" placeholder="Mobiel nummer"]
                </div>
        </div>            
</label>
</div>

<label> E-mailadres: (vereist)
        [email name="email" placeholder="E-mailadres"]
</label>

<label> Opmerkingen:
        [textarea name="opmerkingen" placeholder="Hier kunt u uw opmerkingen, vragen of suggesties kwijt."]
</label>

[submit placeholder="Verstuur"]</div>