Customize form input styles

This tutorial isn’t so much of total customization of forms and form elements, but more of simply changing certain style attributes of input fields. 

The About Me Contact Form

The form that you see below, displays the “Name” field being clicked to enter some text into it:

about form style

This form is setup to be like this on the live demo site for the “About Me” page, but it does not mean all form elements will do this kind of styling. The demo code for this form can be obtained from the “Make a Contact Form like the demo” tutorial. Ultimately, to achieve this kind of form input field styling, your form needs to be in a container with an ID of:

 <div id="contact-form"> 

However, to customize the colours for this, we will follow these steps

  1. Go to Appearance >> Customize >> Colours
  2. Look for the settings relating to the Contact Form
    contact form colour settings
  3. Change your colours using the colour selectors
  4. Click “Save & Publish

 Customize the Input Borders for your Forms

This is slightly different, whereas we will customize our input field borders.

  1. Go to Appearance >> Customize >> Colours
  2. Look for the settings relating to the “Input Field” borders
    input field border setting
  3. Change your colours using the colour selectors
  4. Click “Save & Publish