Create a border around the contact form in Brooklyn

Highlighted
Tourist
8 0 2

May I know how do you add a border to the contact form (I created a page for 'contact us') and control the thickness of it? Also how do I increase the margin between the contact form and my text above it? :) Thanks.

Nick

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 116

Hi, Nick!

May here from Shopify.

Yes, absolutely! You can add a border to your contact form and adjust its thickness by editing your theme code. Are you wanting to add a border around each individual fields, or a border around the entire form?

Since I am uncertain to which one you prefer, I will walk you through on how to do both!

  1. Adding border around the entire form

    i. From your admin, click on ‘Online Store > Actions > Edit code’.
    ii. Inside your ‘Asset’ folder, select ‘theme.scss.liquid’.
    iii. Search for a ‘form {’, then add this code right after .
    border: 1px soid;

    To adjust your border thickness, you can change ‘1px’ with a larger or smaller numbers depending on your preference! Your code should look like this:

    form {
       border: 1px solid;
       margin: 0 auto;
       max-width: 520px;

    iv. Click ‘Save’.

  2. Adding border around individual fields

    i. Inside the theme editor, look for a file called ‘timber.scss.liquid’ inside your ‘Assets’ folder.
    ii. Search for ‘.input-full’, and add this code:
    border: 1px solid;

    Just like the steps above, you can adjust the thickness of the border by putting a smaller of larger number of pixels. Here is what your code should look like:

    &.input-full {
       border: 1px solid;
       width: 100%;
     }

    iii. Click ‘Save’.

Now, to add the margin, you’ll want to go back to your ‘theme.scss.liquid’ file and search for ‘form {’ once again. Then, remove replace ‘margin: 0px auto;’ with ‘margin-top: 100px;’ or change the pixels depending on how wide you want the margin to be.

As always, I highly recommend making a duplicate of your theme before making any changes to your theme, especially if you are making changes to your ‘scss.liquid’ files. Since with these files, you cannot revert back to older version if you want to undo your changes.

If you run into any issues, just let me know, and I will try my best to help out. Alternatively, since you are using a theme made by Shopify, you can contact our support, and our theme support team may be able to make the change for you if your account is eligible!

Cheers,

May

Shopify Support

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
8 0 2

I could do it for the individual boxes but could not get the border for the whole form. This is my code at line 1315 - is this the form you are referring to? If so, there is no change to my website after I click save.

 form {
    margin-top: 100px;
    max-width: 520px;

    .newsletter--form {
      padding: $gutter / 3;
    }
    .note,
    .errors {
      margin-bottom: 0;
    }
  }

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 116

Hi again, Nick!

Thank you for letting me know. I’m sorry to hear that you aren’t able to add the border still. Another way is to search for ‘.form-vertical {‘ inside your ‘timber.scss.liquid’ file. You can add both border and margin inside the ‘form-vertical’ class like so:

After you save this, you might find yourself wanting to add padding around the form. If you want to add padding you can simply add ‘padding: [your pixel number here]px;’ inside ‘form-vertical’ as well!

I hope this resolves the issue. Please let me know if you’re still unable to make the change.

Kind Regards,

May

Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
5 0 1

WORKED!  Thank you!

0 Likes