Solved

Remove blue border around sections of contact form and move section titles to top of lines

flammagreg
Trailblazer
250 0 38

Hi guys,

 

Two questions on my contact us page. Website: seraneeva.com.

 

How can I move the section titles on the contact pages to be above the entry rectangles? Pic for reference:

Screenshot 2024-05-28 at 12.21.08 AM.png

 

 

 

How can I remove the blue border around each section when clicked in on the contact form? 

Screenshot 2024-05-28 at 8.52.13 AM.png

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @flammagreg

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save 

 

#ContactForm input, #ContactForm textarea {
   outline: none !important;
}

 

Here is result: 

BSSTechVenture_0-1716903943651.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @flammagreg

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid. After you insert my code inside it

BSSTechVenture_0-1716905727578.png

{%- if full_url contains 'contact-us' -%}
      <script>
        let input_contact_list = document.querySelectorAll('.input-wrapper input, .input-wrapper textarea');
        let label_title = '';
        if(input_contact_list.length > 0) {
          input_contact_list.forEach((item) => {
             label_title = item.getAttribute('placeholder');
             id = item.getAttribute('id');
             item.setAttribute('placeholder', '')
             item.insertAdjacentHTML("beforebegin", `<label style="margin-bottom: 5px" for='${id}'>${label_title}</label>`);
          })
        }
      </script>
      {% endif %}

Here is result: 

BSSTechVenture_1-1716905776686.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @flammagreg

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save 

 

#ContactForm input, #ContactForm textarea {
   outline: none !important;
}

 

Here is result: 

BSSTechVenture_0-1716903943651.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-HDL
Shopify Expert
733 244 255

This is an accepted solution.

Hi @flammagreg

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid. After you insert my code inside it

BSSTechVenture_0-1716905727578.png

{%- if full_url contains 'contact-us' -%}
      <script>
        let input_contact_list = document.querySelectorAll('.input-wrapper input, .input-wrapper textarea');
        let label_title = '';
        if(input_contact_list.length > 0) {
          input_contact_list.forEach((item) => {
             label_title = item.getAttribute('placeholder');
             id = item.getAttribute('id');
             item.setAttribute('placeholder', '')
             item.insertAdjacentHTML("beforebegin", `<label style="margin-bottom: 5px" for='${id}'>${label_title}</label>`);
          })
        }
      </script>
      {% endif %}

Here is result: 

BSSTechVenture_1-1716905776686.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency