Wp-Form Customise submit Button

To customize the style of the submit button in WP-FORM, you can follow these steps:

Open your stylesheet (style.css) file. It is highly recommended to use a child theme for making modifications to ensure that your changes are not lost during theme updates.

Add the following CSS code to the style.css file:

/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
padding: 5px !important; /* Increase distance between text and border */
width: 25% !important; /* Make the button full-width */
font-size: 1.5em !important; /* Increase text size */
background-color: #0000ff !important; /* blue background */
color: #fff !important; /* White text */
border: 6px double #ffffff !important; /* Dark red, double-line border */
border-radius: 50px;
}

By adding the above code, you can customize various aspects of the submit button’s appearance. Here’s a breakdown of what each CSS property does:

padding: Specifies the space between the button’s text and its border.
width: Sets the width of the button. Adjust the percentage value as needed.
font-size: Determines the size of the button’s text. Modify the pixel value to achieve your desired size.
background-color: Defines the background color of the button. Change the hexadecimal value to the color of your choice.
color: Sets the text color of the button. Use the hexadecimal value for the desired color.
border: Specifies the border style of the button. Adjust the color and border width as desired.
border-radius: Creates rounded corners for the button. Increase or decrease the pixel value to change the level of roundness.
Remember to save the changes to the style.css file. Once you refresh your WP-FORM, the submit button should reflect the updated styles you defined.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More post