Would you like to make your form stand out on your website by adding a custom border? With a simple code snippet, you can add a stylish border around your form to enhance its visual appeal and make it more prominent on your page.
This guide will show you how to add and customize a border around your WPForms.
Setting Up Your Form
To begin, you’ll need to identify your form’s ID. This is essential as the code will target a specific form using this ID. If you need help finding your form ID, please check our guide on finding form and field IDs.
Adding the Border Code
Next, you’ll need to add the code snippet that will create the border around your form. If you need help adding code snippets to your site, please review this tutorial on adding custom CSS.
The code above adds a border to your form with some additional styling for better visual appeal. Here’s what each line does:
- On line 2, replace 1234 with your actual form ID.
- On line 3, you can modify the border width (2px), style (solid), and color (#333333).
- On line 4, the padding creates space between your form elements and the border.
- On line 5, border-radius adds rounded corners to your form.
- On line 6, background-color sets a white background for your form.
- On line 7, box-shadow adds a subtle shadow effect around your form.
If you would want to apply this same CSS to all of your forms, use this CSS instead.
And that’s all you need to place a border around your form! Would you like to also center your forms? Check out our tutorial on How to Center a Form.