Ondersteuning » Algemeen WordPress » invoerveld contactformulier verkleinen

  • hallo allen,
    kan het invoerveld contactformulier(bv uw naam verplicht, uw email verplicht) van het contactformulier verkleind worden of beter afgebakend worden qua layout? Ondanks responsive coller thema loopt het veld weg uit het scherm op tablet en pc(niet alle beeldschermen). Men moet toch volledige gegevens kunnen blijven invoeren, dus aantal posities invoer moet vrij blijven.
    Ik heb geen idee waar ik dit kan aanpassen en of het mogelijk is.
    dank alvast,
    groet pascale
    (PS ik ben gebruik wp als beginner, kan wel html e.d. en een beetje met filezilla overweg..)

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Hi Pascale,

    Geef aub de url van je site, dan kunnen we advies op maat geven.
    Dit soort aanpassingen doe je mbv CSS.

    == == == leesvoer
    http://www.w3schools.com/css/default.asp
    http://codex.wordpress.org/Getting_Started_with_WordPress
    http://codex.wordpress.org/CSS
    http://codex.wordpress.org/Finding_Your_CSS_Styles
    http://codex.wordpress.org/FAQ_Troubleshooting
    http://codex.wordpress.org/Backing_Up_Your_Database
    Natuurlijk zijn er ook trainingen op het internet te vinden…
    bijv. [engels, betaald] Lynda.com:
    http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.html
    Natuurlijk zijn we op dit forum bereid je verder te helpen met je vragen / keuzes…

    Thread starter Pascale1

    (@pascale1)

    Hoi Willem,
    daar ben je weer als reddende engel! Het leesvoer ga ik van het weekend doornemen. CSS zegt mij nu niets, maar dat komt omdat ik het niet gelezen heb. Sorry.
    de URL is http://www.ontspannenvoordeklas.nl
    Als beginner, maar wel met interesse in de achtergrond…als het te ingewikkeld wordt, raad je het me dan af?
    Het veld loopt alleen weg op een nieuwe laptop en tablet. heel vreemd.
    dank alvast, groet Pascale

    Pascale,

    Helaas valt er op het webadres alleen een ‘under construction’ te zien 😉 Ik kan dus helaas weinig concreets waarnemen en oplossen… ;( . Geef even een gil als je site zichtbaar is… 😉

    == == ==

    Het veld loopt alleen weg op een nieuwe laptop en tablet. heel vreemd.

    Zo vreemd is dat niet…

    We gebruiken een website om veel info -in de ruimste zin- met elkaar te delen. Een site gebruikt HTML, CSS etc. om die info -relatief statisch- vorm te geven.
    Tegenwoordig echter zijn de verwachtingen en hardware van gebruikers een stuk minder statisch.. 😉 We gebruiken een PC, smartphone, tablet, smartwatch om die info te bekijken.
    De schermafmetingen en bijv. resolutie kan daarbij belangrijk afwijken van de opmaak van onze website…
    Door gebruik te maken van zgn. ‘responsive themes’ proberen we zoveel mogelijk rekening te houden met ’t gebruik van PC, smartphone, tablet, smartwatch etc. Een responsive theme gebruikt waar mogelijk ‘relatieve maten’* en trucs om zicht aan te passen aan diverse schermgroottes etc.

    Daarnaast kunnen we bij het bouwen van een site / lay-out een aparte opmaak maken voor diverse hardware-varianten. Op die manier proberen webbouwers de presentatie van de content van hun site te beheren, beheersen, ongeacht de gebruiker, hardware etc.

    Die ‘responsive themes’ zijn niet altijd perfect… soms geeft het verrassingen op een type device. Gelukkig valt ook hier vaak wat aan te doen…
    == == ==

    voorbeeld relatieve maten vs absolute maten

    H1{font-size:18px; /*absoluut, ONGEACHT de standaard resolutie van het scherm van de gebruiker */}
    
    H1{font-size:2em; /*relatief -tov de standaard resolutie van het scherm van de gebruiker */}
    
    #content-area{ width:800px;/*absoluut, ONGEACHT de standaard resolutie van het scherm van de gebruiker */}
    
    #content-area{ width: 65%;/*relatief -tov de standaard resolutie van het scherm van de gebruiker */}

    Door steeds de relatieve maat als uitgangspunt te nemen, kan je de presentatie van je site beter ‘managen’ vwb de diverse devices.

    == == ==

    Als beginner, maar wel met interesse in de achtergrond…als het te ingewikkeld wordt, raad je het me dan af?

    Alle leren is tegelijk inspannend, ‘moeilijk’ misschien, en uitdagend.
    Daarbij probeer ik de grenzen van de toehoorder wel in de gaten te houden -voor zover dit kan in dit medium. Als iets ‘niet kan’, onverstandig of risicovol is, of een hoge mate van expertise vergt, vermeld ik dat doorgaans.

    Ik presenteer mijn adviezen in ‘stappen’ te verdelen.

    Tips:

    • Wees zuinig met het aanbrengen van nieuwe veranderingen in probleemsituaties. Zo blijft het achterhalen van de oorzaken en het ’terugdraaien’ // oplossen, beter overzichtelijk.
    • werk langzaam en nauwkeurig
    • neem de volgende stap pas als de vorige succesvol is afgerond
    • gaat er iets fout? ga een stap / wat stappen terug en loop de zaak na [maak daarbij zo weinig mogelijk wijzigingen; Controleer steeds of je aanpassing werkt; je wilt systematisch zoeken naar een oplossing]
    • VRAAG GERUST!

    Thread starter Pascale1

    (@pascale1)

    Hoi Willem,
    site is online,
    is css hetzelfde als html (zie tekst bij lettergrootte e.d. dat ik heb ingevoerd)

    groet pascale

    Hi Pascale,

    Dank voor de aanvullende info.
    Ik heb naar de contactpagina van je site gekeken mbv 3 ‘devices’:

    • PC: Het contactformulier wordt netjes gepresenteerd, ook als extreem wordt ingezoomd verandert het weliswaar van opmaak, maar het blijft herkenbaar en werkbaar
    • IPAD2: Zowel in ‘portret-stand’als in ‘landschap-stand’ – het formulier wordt netjes weergegeven
    • mobiel Samsung Galaxy GT19000 [oud]: portret: de opmaak wordt netjes aangepast aan het kleine scherm. Het formulier ziet er anders uit, maar blijft er herkenbaar en werkbaar uitzien; landschap: Het formulier ziet er anders uit en is slecht overzichtelijk en niet echt werkbaar…; Met name dit laatste verbaast, omdat de portret-stand zoveel smaller, maar veel beter werkt…

    == == == suggestie[s]

    Wellicht geeft het aanpassen van de maximale breedte van het formulier en velden, een beter uiterlijk op alle schermen.

    Opgelet… Ook als het formulier wordt verkleind, blijft het aantal mogelijk in te voeren tekens ongewijzigd.

    form.wpcf7-form,
    input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
    input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email,
    textarea.wpcf7-form-control.wpcf7-textarea {
        max-width: 85%;
    }

    == == == WAT NU TE DOEN MET DEZE CODE…

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
    Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    == == == Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. Activeer het childtheme.
    6. ==

    7. om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
      – Maak je aanpassingen in style.css van het childtheme;
    • Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
    • open de map van je childtheme
    • gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
    • voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
    • UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
    • browser: druk <CTRL-F5> om je browser te verversen
    • bekijk het resultaat

    – mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.

    == == == Extra
    Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen,rechtsklik en kies ‘element inspecteren’.

    Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren, layout etc. aanpassen.

    Loop je vast, kom je er niet uit? Of heb ik je verkeerd begrepen?
    >>geef aanvullende info<<
    Laat even weten welke stappen je met succes hebt doorlopen. Vertel ook waar [welke stap] je bent vastgelopen.
    Verder helpt het de url van je site en het gebruikte thema om je probleem te tackelen.

    Thread starter Pascale1

    (@pascale1)

    Hoi Willem,

    ik durf het niet aan met CSS enzo, gaat behoorlijk boven mijn petje (en ik heb niet eens een petje!)….ik heb nu de achtergrondkleur lichter gemaakt en nu kun je het verschil niet meer zien. Via een collega ga ik wp kaal installeren op de pc, zodat je kan oefenen. Ik geef niet op hoor!!
    Dank je wel..ga zeker nog jouw info gebruiken!

    groet pascale

    Hi Pascale,

    Oefenen – bijvoorbeeld met een localhost-versie op je PC geinstalleerd, is idd een prima manier om te oefenen mett bijvoorbeeld CSS en HTML.
    Ook het leren maken van backups van je site is belangrijk.
    Heb je dat onder de knie, dan kan je gerust[er] proberen de boel aan te passen. Gaat er onverhoopt toch iets mis, dan zet je gewoon de backup terug…;)
    Ook het leesvoer hierboven genoemd, youtube, linda.com etc. bieden veel bruikbare info.
    Veel plezier!

    W.

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘invoerveld contactformulier verkleinen’ is gesloten voor nieuwe reacties.