How to Put a Border Around Your Form

Introduction

Would you like to place a styled border around your form? CSS is a very strong and handy tool to have and know when wanting to customize the look of not just your form but your site as a whole. In this tutorial, we’re going to walk you through how to add CSS that will place a border around your form.

Creating the form

To begin, you’ll need to create your form and add your fields. For the purpose of this documentation, we’re just going to create a basic contact form.

If you need any help in how to create your form, please review this documentation.

create your form and add your fields

Adding the CSS

Next, we’re going to add some CSS to our site that will place the border around the form. We’re also going to add a little padding so the form has some white space between the form and the fields.

If you’re not sure how to add CSS to your site, please check out this tutorial.

form#wpforms-form-23 {
    padding: 20px;
    border-radius: 3px;
    border-width: 2px;
    border-color: #b95d52;
    border-style: double;
}

This CSS will only be applied to the form ID 23. You’ll need to change this ID to match your own form ID.

If you need help finding your form ID, please check out this tutorial.

We’ve set the padding to 20px which gives us some white space from the form’s container and form fields.

The border-radius is a setting that makes each corner of our border a little rounded. You can increase this number to have a more rounded form, or remove this completely to leave the border square.

The rest of the CSS defines the border’s width which sets the thickness of the border, the border’s color and then the border’s style. There are many styles to choose from and you can read more about that from W3 Schools.

By applying that CSS, our form will now have a slight highlight to it on the page.

If you would want to apply this same CSS to all of your forms, use this CSS instead.

form.wpforms-form {
    padding: 20px;
    border-radius: 3px;
    border-width: 2px;
    border-color: #b95d52;
    border-style: double;
}

And that’s all you need to place a border around your form! Would you like to add a print link to your forms? Check out our tutorial on How to Add a Print Link to Your Forms.