[Wordpress] Contact form 7 stijlen

[Vitruvius]

Beste Tweakers,

Mijn kennis over CSS is zeer matig maar met een avondje Google ben ik al best een eind gekomen.
Ik ben m'n websites contact formulier aan het aanpassen.

Hiervoor heb ik de volgende code gemaakt:

code:

.wpcf7-form { 
    background:#ffffff; 
    padding:14px; 
    border:1px solid #d8d8d8; 
    margin-bottom:10px; 
    border-radius:0px; 
}
 
.wpcf7-form input { 
    background:#f7f7f7; 
    padding:14px 14px; 
    border:1px solid #d8d8d8; 
    margin-bottom:0px; 
    border-radius:0px;
    width:60%;
}
 
.wpcf7-form textarea { 
    background:#f7f7f7; 
    padding:14px 14px 14px 14px; 
    border:1px solid #d8d8d8; 
    border-radius:0px;
    width:60%;
}
 
.wpcf7-form p { 
    color:#4f2a0f; 
    margin-top:10px;
}
 

.wpcf7 select {
    background-color: #f7f7f7;
    border: 1px solid #d8d8d8;
    border-radius: 0px 0px 0px 0px;
    margin: 0;
    padding: 14px;
    text-indent: 0px;
    width:60%;
    z-index: 100;
}

.wpcf7-form .wpcf7-submit { 
    background:#f46136; 
    cursor:pointer; 
    padding-left:14px; 
    padding-right:14px; 
    color:#ffffff; 
    border-radius:0px;
    width:60%;
}

En het volgende in de contact form 7 plugin geschreven:

code:

<h2>Contactgegevens</h2>
<table><tr><td>
<p>Voornaam (verplicht)<br />
    [text* Voornaam "Uw voornaam"]</p>
</td><td>
<p>Achternaam (verplicht)<br />
    [text* Achternaam "Uw Achternaam"]</p>
</td></tr></table>
<p>E-mailadres (verplicht)<br />
    [email* E-mailadres "Uw E-mailadres"]</p>
<table><tr><td>
<p>Telefoonnummer (verplicht)<br />
    [tel* Telefoon "Uw telefoonnummer"]</p>
</td><td>
<p>Woonplaats (verplicht)<br />
    [text tourcity "Uw woonplaats"]</p>
</td></tr></table>
<p>Aanvullende informatie/vragen<br />
    [textarea your-message] </p>

<h2>Feest informatie</h2>

<p>Kies je soort feest<br />
    [select Feestsoort size:40 "Verjaardagsfeest" "Huwelijksfeest" "Schoolfeest" "Studentenfeest" "Zakelijk evenement" "Sport evenement" "Sweet sixteen" "Examenfeest" "Overige feesten"]</p>
<table><tr><td>
<p>Hoeveel mensen verwacht je?<br />
    [number Gasten min:20 max:250 "Verwacht aantal gasten"]</p>
</td><td>
<p>Op welke datum is het feest?<br />
    [date Datum min:today "Feestdatum (dd-mm-jjjj)"] </p>
</td></tr></table>
<p>[submit "Verzenden"]</p>

Op de een of andere manier lijnt de code niet goed uit, ik zelf heb al van alles geprobeerd, dit zou ik graag als resultaat hebben:



Wat moet ik aanpassen zodat het er zo uit komt te zien. Tevens zou ik graag de velden "Feest informatie" onder de contactgegevens zien verdwijnen bij een mobiele weergave.

Alvast bedankt.

[Raem]

In plaats van tabellen zou ik werken met divs en de display van bijvoorbeeld voor- en achternaam op inline-block zetten om deze naast elkaar te plaatsen.
Ditzelfde kun je ook doen met een div contactgegevens en feestinformatie en deze met inline-block naast elkaar zetten.

Ook zou ik voor je velden een placeholder gebruiken in plaats van een default value. Dan hoef je niet eerst de tekst weg te halen wanneer je het veld in wilt vullen.

[P_Tingen]

Je gebruikt verschillende tabellen voor de velden. Je maakt het jezelf gemakkelijker door de zaken in 1 tabel te zetten (of beter: met divs). Door voor 1 tabel te kiezen en de kolommen samen te voegen voor de invulvelden die alleen staan (email en info) krijg je alle rechterkanten gelijk.

code:

<h2>Contactgegevens</h2>
<table>
<tr><td>
        <p>Voornaam (verplicht)<br />
        [text* Voornaam "Uw voornaam"]</p>
    </td>
    <td>
        <p>Achternaam (verplicht)<br />
        [text* Achternaam "Uw Achternaam"]</p>
    </td>
</tr>
<tr><td colspan=2>
        <p>E-mailadres (verplicht)<br />
        [email* E-mailadres "Uw E-mailadres"]</p>
    </td>
</tr>
<tr><td>
        <p>Telefoonnummer (verplicht)<br />
        [tel* Telefoon "Uw telefoonnummer"]</p>
    </td>
    <td>
        <p>Woonplaats (verplicht)<br />
        [text tourcity "Uw woonplaats"]</p>
  </td>
</tr>
<tr><td colspan=2>
        <p>Aanvullende informatie/vragen<br />
        [textarea your-message] </p>
  </td>
</tr>
</table>

ps: "Feest informatie" moet één woord zijn, dus "Feestinformatie"
ps2: informatie over placeholders hier

[ Voor 4% gewijzigd door P_Tingen op 21-10-2015 11:17 ]

[Vitruvius]

Gelukt, thanks!