Contactformulier

Appie

Geachte Gebruikers,

Ik zit met 2 vragen.

1. Bestaat er een mogelijkheid om de text boven de invulvelden, voor de invulvelden te plaatsen ?

2. Bestaat er een mogelijkheid om maar 1 "Verzend" button te laten weergeven ? ipv "Verzend" en "Reset" bijv.

Zie bijgevoegde afbeelding.

Ab

Henk Vrieselaar

1. Ik weet niet of dat mogelijk is. Je zou eventueel de plugin Formloom kunnen gebruiken.
2. Plak dit in de Custom CSS (Page-Inspector ] Header ] CSS):

.form-input-button[name="resetButton"] { 
display: none; 
}

En hier staan nog meer codes om je Contact-pagina te restylen.

smike

En hier staan nog meer codes om je Contact-pagina te restylen.[/quote]

@Henk. Telkens ik op "hier" klik, krijg ik een error. Heb verder gekeken en zie dat dit op verschillende posts voorkomt.

Groetjes

Henk Vrieselaar

Klopt. Een paar maanden geleden heeft RMS met het forum zitten knoeien en daarbij zijn van alle gebruikers honderden oudere berichten verdwenen. Dit is er dus één van. Van mij zijn meer dan duizend posts verdwenen.

smike

on 1328921013:

Klopt. Een paar maanden geleden heeft RMS met het forum zitten knoeien en daarbij zijn van alle gebruikers honderden oudere berichten verdwenen. Dit is er dus één van. Van mij zijn meer dan duizend posts verdwenen.

Jammer dat al die posts verdwenen zijn!

Ik zou graag de invulvelden wat kleiner willen maken en een hoover als ik over de "reset" en "verstuur" button ga. Hoe pak ik dat het best aan?

Ik heb mijn contactformulier in het midden van het scherm geplaatst (oogt wat mooier) maar mijn titel schuift mee. Ik had deze graag bovenaan gehad, of misschien hier helemaal niet.

Kan iemand me even verder helpen aub.

Henk Vrieselaar

Dat is een simpel trucje met de contact velden.

Als je ze kleiner wilt:

.form-input-field {width: 50%;}

50% is maar een voorbeeld.

Of dit:

input.form-input-field {width: 250px;}
textarea.form-input-field {width: 300px;}

Je mag de buttons ook wel een beetje opblazen:

.form-input-button[name="submitButton"] { 
        width: 120px;
        font-size: 16px;}

.form-input-button[name="resetButton"] { 
        width: 120px;
        font-size: 16px;}

Als je de Rest/Submit hover tekst een andere kleur wilt geven (hier #FF0000, dat is rood en anders maar een andere kleur):

input[type="reset"]:hover,input[type="submit"]:hover {color: #FF0000;}

Of alle invulvelden ook:

.form-input-button:hover,.form-input-field:hover {border-color: #FF0000;}

Of met een achtergrondkleurtje erbij:

.form-input-button:hover,.form-input-field:hover {
    border-color: #FF0000; background-color: #00FF00;}

En zo zijn er nog wel meer grapjes, bijvoorbeeld voor de Submit/Reset buttons:

.form-input-button {
  -moz-transform: scale(0.90);
  -webkit-transform: scale(0.90);}

.form-input-button:hover {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
-moz-transition: all 0.5s ease-out;  
    -o-transition: all 0.5s ease-out;  
    -webkit-transition: all 0.5s ease-out; }

Dat met de titel is lastig. Die kan ook elders op de pagina, maar dat vereist veranderingen in de index.html.
Maar je kunt ook je titel verbergen in de Theme Styles en vervolgens linksboven of rechtsboven zetten in de ExtraContent en dan gewoon de font-size daarvan flink vergroten.