Remove "Your phone (optional)" field from contact page in Prestige

Topic summary

Goal: hide the “Your phone (optional)” input on a Prestige theme contact form.

Proposed approaches:

  • CSS-based: add custom CSS to hide the specific input. One suggestion was to insert code near the in theme.liquid; another to paste CSS at the end of theme.css/base.css to target the phone field and set display:none. Screenshots showed the field removed visually.
  • Markup-based: directly delete or comment out the phone input’s HTML block in the contact form template to avoid relying on CSS and potential performance overhead.

Debate: one participant questioned using CSS when the input can be removed in code. However, the original poster clarified that the quoted HTML block was intentionally added and should remain; the CSS method effectively hid the unwanted phone field instead.

Outcome: the CSS change resolved the issue for the poster. No further action items; discussion effectively closed.

Summarized with AI on December 12. AI used: gpt-5.

Hello,

I am struggling to remove a particular field from my contact page/contact form

I want to remove “Your phone (optional)”.

Every field in this form seems to be removable in the code, however I can’t seem to remove this particular field.

My website is linked below

https://luyendykjewelry.com/pages/contact

I am using the prestige theme and the contact form code is shown below

I hope someone can help me solve this :slightly_smiling_face:

<div class="Container">
  <header class="PageHeader">
    <div class="SectionHeader SectionHeader--center">
      <h1 class="SectionHeader__Heading Heading u-h1">{{ page.title }}</h1>
    </div>
  </header>

  <div class="PageContent PageContent--narrow">
    <div class="Rte">
      {{- page.content -}}

      {%- form 'contact', class: 'Form Form--spacingTight' -%}
        {%- if form.posted_successfully? -%}
          <p class="Alert Alert--success">{{ 'contact.form.successfully_sent' | t }}</p>
        {%- endif -%}

        {%- if form.errors -%}
          <div class="Form__Alert Alert Alert--error">
            <ul class="Alert__ErrorList">
              {%- for field in form.errors -%}
                {%- if field == 'form' -%}
                  <li class="Alert__ErrorItem">{{ form.errors.messages[field] }}</li>
                {%- else -%}
                  <li class="Alert__ErrorItem"><strong>{{ form.errors.translated_fields[field] }}</strong> {{ form.errors.messages[field] }}</li>
                {%- endif -%}
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}

        <div class="Form__Group">
          <div class="Form__Item">
            <input type="text" class="Form__Input" name="contact[name]" aria-label="{{ 'contact.form.name' | t }}" placeholder="{{ 'contact.form.name' | t }}" required {% if customer %}value="{{ customer.name }}"{% endif %}>
            <label class="Form__FloatingLabel">{{ 'contact.form.name' | t }}</label>
          </div>

          <div class="Form__Item">
            <input type="email" class="Form__Input" name="contact[email]" aria-label="{{ 'contact.form.email' | t }}" placeholder="{{ 'contact.form.email' | t }}" required {% if customer %}value="{{ customer.email }}"{% endif %}>
            <label class="Form__FloatingLabel">{{ 'contact.form.email' | t }}</label>
          </div>
        </div>
        <div class="Form__Item"><input type="text" class="Form__Input" name="contact[Your phone (optional)]" aria-label="Your phone (optional)" placeholder="Telefoonnummer (niet verplicht)">
                <label class="Form__FloatingLabel">Your phone (optional)</label>
        </div>
        
        {%- for block in section.blocks -%}
          {%- assign field_title = block.settings.title -%}

          {%- if field_title == blank -%}
            {%- capture field_title -%}Custom field {% increment custom_field %}{%- endcapture -%}
          {%- endif -%}

          {%- if block.type == 'text' -%}
            <div class="Form__Item">
              {%- if block.settings.use_long_text -%}
                <textarea name="contact[{{ field_title | escape }}]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ block.settings.title | escape }}" placeholder="{{ block.settings.title | escape }}" {% if block.settings.is_required %}required{% endif %}></textarea>
                <label class="Form__FloatingLabel">{{ block.settings.title | escape }}</label>
              {%- else -%}
                <input type="text" class="Form__Input" name="contact[{{ field_title | escape }}]" aria-label="{{ block.settings.title | escape }}" placeholder="{{ block.settings.title | escape }}" {% if block.settings.is_required %}required{% endif %}>
                <label class="Form__FloatingLabel">{{ block.settings.title | escape }}</label>
              {%- endif -%}
            </div>
          {%- elsif block.type == 'dropdown' -%}
            {%- assign values = block.settings.values | split: ',' -%}

            {%- if values == empty -%}
              {%- continue -%}
            {%- endif -%}

            <div class="Form__Item">
              <div class="Form__Select Select Select--primary">
                {%- render 'icon' with 'select-arrow' -%}

                <select name="contact[{{ field_title | escape }}]" title="{{ block.settings.title | escape }}" required>
                  <option value="" disabled selected>{{ block.settings.title | escape }}</option>

                  {%- for value in values -%}
                    {%- assign trim_value = value | strip -%}

                    <option value="{{ trim_value | escape }}">{{ trim_value | escape }}</option>
                  {%- endfor -%}
                </select>
              </div>
            </div>
          {%- endif -%}
        {%- endfor -%}

        <div class="Form__Item">
          <textarea name="contact[body]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ 'contact.form.message' | t }}" placeholder="{{ 'contact.form.message' | t }}" required></textarea>
          <label class="Form__FloatingLabel">{{ 'contact.form.message' | t }}</label>
        </div>

        <button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'contact.form.submit' | t }}</button>
      {%- endform -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Contact page",
  "settings": [],
  "blocks": [
    {
      "type": "text",
      "name": "Text field",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Name",
          "default": "Custom field"
        },
        {
          "type": "checkbox",
          "id": "use_long_text",
          "label": "Use long text",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "is_required",
          "label": "Field is required",
          "default": false
        }
      ]
    },
    {
      "type": "dropdown",
      "name": "Dropdown",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Naam",
          "default": "Custom field"
        },
        {
          "type": "text",
          "id": "values",
          "label": "Values",
          "info": "Separate each value by a comma.",
          "default": "value 1, value 2, value 3"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "text",
        "settings": {
          "title": "Your phone (optional)"
        }
      }
    ]
  }
}
{% endschema %}
1 Like

Hey @Chrystel078

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like

Thank you so much! I have been struggling for hours

1 Like

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like

Hi @Chrystel078

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.Form__Item:nth-of-type(3) input[placeholder="Your phone (optional)"] {
    display: none !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

Not sure why everyone suggests a css display: none; solution when code is in front of you.

Simple solution is remove/comment this code

 <div class="Form__Item"><input type="text" class="Form__Input" name="contact[Your phone (optional)]" aria-label="Your phone (optional)" placeholder="Telefoonnummer (niet verplicht)">
                <label class="Form__FloatingLabel">Your phone (optional)</label>
        </div>

No need to add any css and increase the load time of the store.

Not sure what you people are looking for in the community by providing unnecessary solutions.

btw if I’m wrong please let me know why we need to use css in this case ?

This part I actually added and want to keep. The suggested solutions, changes in css, did the trick