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

[flammagreg]

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:

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

[BSSCommerce-HDL · 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: 

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 😍

[BSSCommerce-HDL · 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: 

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 😍

[BSSCommerce-HDL · 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

{%- 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: 

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 😍