Add border to input fields in Contact Page

[tomorrowgolf]

Hi there,

need some help designing my contact us submission form.

So I figured out how to change the style of the "Name" and "E-Mail" input field, but don't know how to do the same with the "Category" field and "Message" field.

Also, do you know how to add a border or different background colour to the overall contact form?

Right now it looks like this: 

Thank you!

This is the code:

<div class="page-width">

  <header class="section-header text-center">

    <h1 class="section-header__title h2">{{ page.title }}</h1>

  </header>

  <div class="grid">

<style> 

    input[type=text] {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border: 2px solid red;

  border-radius: 4px;

}

 input[type=email] {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border: 2px solid red;

  border-radius: 4px;

}   

</style>

    <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">

      {% if page.content != blank %}

        <div class="rte rte--contact">

          {{ page.content }}

        </div>

      {% endif %}

      {% form 'contact' %}

        {% if form.posted_successfully? %}

          <p class="form-success">

            {{ 'contact.form.post_success' | t }}

          </p>

        {% endif %}

        {{ form.errors | default_errors }}

        <div class="grid">

          <div class="grid__item medium-up--one-half">

            <label for="ContactFormName">Your name</label>

            <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">

          </div>

          <div class="grid__item medium-up--one-half">

            <label for="ContactFormEmail">Your email (required)</label>

            <input required type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

          </div>

        </div>

      <label for="ContactFormCategory">How can we help you?</label>

<select id="ContactFormCategory" name="contact[Category]">

  <option>Question about my order</option>

  <option>Question about the products</option>

  <option>I have a business enquiry</option>

              <option>Other</option>

</select>

        <label for="ContactFormMessage">Your message</label>

        <textarea rows="6" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

        <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">

      {% endform %}

    </div>

  </div>

</div>

[KetanKumar]

@tomorrowgolf 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

[tomorrowgolf]

@KetanKumar 

Thanks a lot for your message!

This is the URL: https://tomorrowgolf.com/pages/contact-us
PWD: letsmakeitbig

[Kinjaldavra · Accepted solution]

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#contact_form{
    padding: 12px;
    background: #dde4e2;
    border: 1px solid #000000;
}

[Alia_Makarem]

Hello @Kinjaldavra and @KetanKumar 

I'm looking into adding a 1 px border color #a6b4b3 border around the input fields not the full form, please can you help with this.

I have 2 different contact form templates.

https://namat.sa/pages/contact-us 

page.contact.liquid

https://namat.sa/pages/bespoke-orders 

page.contact-bespoke.liquid

---

UPDATE: I was able to modify the borders, but I had to edit each row under the contact template. is there a fix to write the code once?