Как удалить "div классы" после успешного метода post-get - PullRequest
0 голосов
/ 13 июня 2019

На странице контактов есть возможность отправить мне прямое сообщение через форму, которую оно перенаправляет на мою личную учетную запись Hotmail, если сообщение успешно. Приходит сообщение, отображаемое зеленым текстом, с рамкой и отступом, что сообщение было отправлено;

Но я просто хочу удалить некоторые классы "div", потому что они не выглядят достаточно аккуратно. Но также возвращайте классы "div", когда пользователь переходит на другую страницу или обновляет, или когда утверждение больше не является "истиной".

А когда пользователь отправляет форум и вводит свой адрес электронной почты; что пользователю не отправлено письмо без ответа с личным текстом и т. д. Это должно быть просто; как опция mailto:, но я понятия не имею, как и где это реализовать напрямую.

Помощь будет очень признателен!

Я попытался отредактировать строки успеха .CSS, но они не работают вообще, так же как и с дисплеем: атрибуты блоков и другие примеры, код много раз ломался, потому что я много пробовал, но без каких-либо В результате, это весь .liquid код из shopify. Я могу добавить все, что нужно для быстрого решения этой проблемы.

Также пробовал с element и затем воспроизводил это с помощью html / css и Javascript, но он просто портил весь экран страницы.

page.contact.liquid: код

 {%- assign formId = 'ContactForm' -%}
 {% form 'contact', id: formId %}
 {% include 'form-status', form_id: formId %}

 <div class="grid grid--half-gutters">
 <div class="grid__item medium-up--one-half">
 <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
              <input type="text" id="{{ formId }}-name" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

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

        {% endform %}
      </div>

form-status.liquid это код #include;

{%- if form.posted_successfully? -%}
  <p class="form-message form-message--success" tabindex="-1" data-form-status>
    {{ success_message | default: 'contact.form.post_success' | t }}
  </p>
{%- endif -%}

.CSS код

.note,
.form-message {
  padding: $input-padding-top-bottom-small;
  margin: 0 0 ($gutter-site / 2);

  @include media-query($medium-up) {
    padding: $input-padding-top-bottom;
  }
}

.note {
  border: 1px solid $color-border-form;
}

.form-message--success {
  border: 1px solid $color-success;
  background-color: $color-success-bg;
  color: $color-success;
  display: block;
  width: 100%;
}

Классы "div", которые необходимо удалить и снова появиться, когда утверждение больше не является "true" или когда пользователь нажимает на другую страницу / параметр обновления.

<div class="rte">

<div class="contact-form form-vertical"><form method="post" action="/contact#ContactForm" id="ContactForm" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="contact"><input type="hidden" name="utf8" value="✓">

HTML-код, который попадает на страницу контактов, когда пользователь успешно отправил свое сообщение;

<p class="form-message form-message--success" data-form-status="">
    Bedankt dat je contact met ons hebt opgenomen. We nemen zo snel mogelijk contact met je op. 
  </p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...