Using the Forms App: Impossible to style forms to match rest of the site

Shopify Apps
2

Hi there,

The Forms App may not offer all the styling options you need directly within the app. However, you can use custom CSS to make the necessary changes to match the rest of your site.

To apply custom styles to your forms, you’ll need to:

  1. Identify the Form Elements: Inspect the form on your site to find the specific classes or IDs used by the Forms App. You can do this using your browser’s developer tools (right-click on the form element and select “Inspect”).

  2. Add Custom CSS:

•From your Shopify admin, go to Online Store > Themes.

•Find the theme you are currently using, then click Actions > Edit code.

•In the left sidebar, under Assets, find and click on your theme.scss.liquid or theme.css file (depending on your theme).

  1. Write Your Custom CSS: Add your custom CSS targeting the form elements. For example:
/* Example of custom styling */
.custom-form-class h1 {
    font-family: 'Your Font Family', sans-serif;
    color: #YourColor;
}

.custom-form-class input,
.custom-form-class textarea {
    width: 100%;
    border: 1px solid #YourBorderColor;
}

.custom-form-class button {
    background-color: #YourButtonColor;
    color: #YourButtonTextColor;
}

Make sure to replace .custom-form-class with the actual class or ID of your form elements and adjust the properties to fit your design.

If you need further assistance with this, please let me know!