The tag adds extra space between the form inputs and this can get in the way of styling the form later on so it’s my preference to remove it so we have complete control over the space we add later. This removes a tag that gets added to the frontend of the form. I’ve also placed the label text all on the same line whereas before it was on two. So for the ‘Name’ field we’ll add: ĭoing this for the rest of the fields means we now have this in the backend. To replace with a placeholder we need to add this option in along with the placeholder text we want to show. For example, delete “Your Name (required)”. Removing the labels is a simple matter of deleting them. The image below shows the default contact form that comes with the plugins. To do this we’ll need to change the form in the WordPress backend. I wouldn’t recommend doing this for long contact forms with lots of inputs because this would be bad for user experience but when there are so few entries it’s okay. The first thing I’m going to do is remove the labels and replace them with placeholders inside the input boxes. For this tutorial, I’m using the CSS plugin Simple CSS because it’s a little easier to see what I’m doing other adding it to the style.css file. I’ve made a container for the form that has a max-width of 960px.Īs you can see, the unstyled form does the job but aesthetically it is very lacking so let’s get writing some CSS to make it look good.Īdd the CSS in whatever way you prefer. My starting point for styling the form is I’ve installed the Underscores theme on WordPress and I’ve installed Contact Form 7 and added the basic contact form it comes with to a contact page.
CHOOSE WHICH CONTACT FORM OSHIN THEME HOW TO
I’m going to show you how to style Contact Form 7 and give you some CSS that you can simply copy and paste into your own website. Fortunately, due to its popularity, a lot of themes come with prewritten styles for the form. However, if your theme doesn’t or you’re using a starter theme like Underscores or Sage you’ll want to add some CSS to make the form look nice. The problem is that Contact Form 7 doesn’t look good unless you add some CSS to style it.
CHOOSE WHICH CONTACT FORM OSHIN THEME FREE
Its popularity is due to its flexibility and free features. With 5 million downloads it is the most downloaded contact form plugin on WordPress. It is one of WordPress’ oldest and most widely used contact form plugins.
0 kommentar(er)
