ander uiterlijk invulvelden contact formulier

[rob1970]

https://met-rob.com/zuidwest_def/offerte.html

Hier staat een contact formulier.

De bovenste invulvelden hebben een ander uiterlijk als de velden "telefoon" - "Naam" en "Email"

Dit is de broncode:

<form action="post2.php" method="post">
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Datum verhuizing:</label>
            <input type="text" class="form-control" name="datumverhuizing" id="datumverhuizing" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Aantal uren:</label>
            <input type="text" class="form-control" name="aantaluren" id="aantaluren" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Extra verhuizer nodig:</label>
            <input type="text" class="form-control" name="extraverhuizer" id="extraverhuizer" Placeholder=" vul in: ja of nee" required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Adres en huisnummer:</label>
            <input type="text" class="form-control" name="adres" id="adres" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Postcode en plaatsnaam:</label>
            <input type="text" class="form-control" name="postcodeplaats" id="postcodeplaats" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Woonlaag:</label>
            <input type="text" class="form-control" name="woonlaag" id="woonlaag" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Naam:</label>
            <input type="text" class="form-control" name="naam" id="naam" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Telefoon:</label>
            <input type="tel" class="form-control" name="phone" id="phone" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label class="contact-p1">Email:</label>
            <input type="email" class="form-control" name="email" id="email" Placeholder=" " required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <p><label class="contact-p1">Toelichting:</label></p>
            <p><textarea placeholder="" name="message" type="text" required style="width: 100%; height: 152px;"></textarea></p>
            <p class="help-block"></p>
        </div>
    </div>
    <span class="checkmark"></span>
    </label>
    <div id="success"></div>
    <!-- For success/fail messages -->
    <button type="submit" class="btn btn-primary">Verzenden</button>
</form>

Ik zie hier bij de bovenste velden niets anders staan als bij de velden naam, email, etc

Hetzelfde is er aan de hand bij de pagina https://met-rob.com/zuidwest_def/contact.html

Alleen hier is alleen het bovenste veld anders dan de onderste 3


mod. inspringen html code aangepast.

 

[OctaFish]

Als ik jouw code in een lege HTML plak, ziet het er uit zoals het hoort. Geldt ook voor de code van jouw offerte pagina, die doet 't ook prima verder. Ziet er niet uit vanwege de ontbrekende stylesheets, maar de tekstvakken zijn ok. Ik kan het dus zo niet reproduceren op basis van de code . Heb je het formulier met sleuren en pleuren opgebouwd?

 

[Aar]

Maak er gewoon een een type="text" van?

 

[rob1970]

het ligt aan de "id"

Ik heb even verder zitten vogelen.

Ik heb nu op deze regel: <input type="tel" class="form-control" name="phone" id="naam" Placeholder=" " required> de "id" aangepast naar "naam"

Dat heb ik ook met de regel "email" gedaan

Het resultaat zie je hier:https://met-rob.com/zuidwest_def/offerte2.html

Dan is het dus wel goed.

Maar zodra ik de id weer aanpas naar "phone" ziet het er weer verkeerd uit.

Dus daar ligt het aan. Nu de oplossing nog......

 

[bron]

Het komt door deze css

section.contact-w3ls input#name,
section.contact-w3ls input#email,
section.contact-w3ls input#phone {
    font-size: 1em;
    color: #000;
    background-color: transparent;
    border-radius: 0;
    border-color: #000;
    padding: 0.8em;
}

Waarom niet bij input#name komt door een bug in de html want in de html staat id="naam"


-- edti: nog een bugje, zie #1. In regel 73 staat </label> die nergens bij hoort, gewoon weghalen.

 

[rob1970]

Maak er gewoon een een type="text" van?

heb ik net geprobeerd: https://met-rob.com/zuidwest_def/offerte3.html

geen verbetering

 

[rob1970]

Het komt door deze css

section.contact-w3ls input#name,
section.contact-w3ls input#email,
section.contact-w3ls input#phone {
    font-size: 1em;
    color: #000;
    background-color: transparent;
    border-radius: 0;
    border-color: #000;
    padding: 0.8em;
}

Waarom niet bij input#name komt door een bug in de html want in de html staat id="naam"


-- edti: nog een bugje, zie #1. In regel 73 staat </label> die nergens bij hoort, gewoon weghalen.

Dat was het idd. reuze bedankt

 

[Aar]

Als je het probleem isoleert door naar de verschillen te kijken tussen wat wel werkt, en wat niet werkt, dan zie je dat het probleem bij je id="phone" zit.
Verander beiden eens naar: id="name", of maak een aparte selector aan. Dat laatste lijkt me beter, dan heb je gangbare namen.

Voor de verwerking maakt dit niet uit, zolang de name-attribuut maar uniek is.

 

[bron]

<input type="tel">

Hetzelfde als type="text" zodat je ook bijv. dhr. Janssen ofzo achter het telefoonnr. kan zetten. Het type="tel" heeft dus geen validatie. Voordeel van type="tel" is dat een smartphone een handiger keyboard opent.

<input type="email">

Heeft een eenvoudige validatie; a@b.c is voldoende.