Body: <p>Using the standard form plugin can you redirect for errors to a id, which works for the submission confirmation (success)?</p>
  
  <pre><code> {{ redirectInput('#contact') }}
  </code></pre>
  
  <p>My form is half way down the page so jumps you to the top when it has errors.</p>
  
  <p>Full code:</p>
  
  <pre><code> &lt;div class="cta-section" id="contact"&gt;
    &lt;div id="thanks" role="alert"&gt;
  {% if craft.app.session.hasFlash('notice') %}
      &lt;div class="alert-thanks"&gt;&lt;p class="message notice"&gt;&lt;strong&gt;{{ craft.app.session.g*emphasized text*etFlash('notice') }}&lt;/strong&gt;&lt;/p&gt;&lt;/div&gt;
  {% elseif craft.app.session.hasFlash('error') %}
      &lt;div class="alert-error"&gt;&lt;p class="message error"&gt;&lt;strong&gt;{{ craft.app.session.getFlash('error') }}&lt;/strong&gt;&lt;/p&gt;&lt;/div&gt;
  {% endif %}
  &lt;/div&gt;
  
  
        {% macro errorList(errors) %}
      {% if errors %}
          &lt;ul class="errors"&gt;
              {% for error in errors %}
                  &lt;li&gt;{{ error }}&lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
      {% endif %}
  {% endmacro %}
  
  {% from _self import errorList %}
  
  &lt;div class="text-left"&gt;
  &lt;form method="post" action="" accept-charset="UTF-8" id="form"&gt;
      {{ csrfInput() }}
      &lt;input type="hidden" name="action" value="contact-form/send"&gt;
      {{ redirectInput('#contact') }}
  
  &lt;div class="w-full md:flex "&gt;
      &lt;div class="w-full md:w-1/2 mb-4 md:mr-6"&gt;  
  
        &lt;h3 class="float-left w-full uppercase"&gt;&lt;label for="from-name"&gt;Name&lt;/label&gt;&lt;/h3&gt;
        &lt;input id="from-name" type="text" name="fromName" class="w-full" value="{{ message.fromName ?? '' }}"&gt;
        {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
  
      &lt;/div&gt;
  
      &lt;div class="w-full mb-4 md:w-1/2"&gt;  
  
        &lt;h3 class="uppercase"&gt;&lt;label for="from-email"&gt;Email&lt;/label&gt;&lt;/h3&gt;
        &lt;input id="from-email" type="email" name="fromEmail" class="w-full" value="{{ message.fromEmail ?? '' }}"&gt;
        {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  
  &lt;div class="w-full clearfix"&gt; 
      &lt;h3 class="uppercase"&gt;&lt;label for="message"&gt;Message&lt;/label&gt;&lt;/h3&gt;
      &lt;textarea rows="5" cols="40" id="message" name="message" class="clearfix"&gt;{{ message.message ?? '' }}&lt;/textarea&gt;
      {{ message is defined and message ? errorList(message.getErrors('message')) }}
    &lt;/div&gt;
  
      &lt;div class="mt-4 clear text-center"&gt;&lt;input type="submit" value="Send"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-05-29T18:00:57.187Z
Comments.Text: Where is the HTML element whose id is "contact"?
Comments.UserDisplayName: Kota.M
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-04T12:54:03.350Z
Comments.Text: It is wrapped in a <div id="contact"> updated above.
Comments.UserDisplayName: sarah3585
Tags: <plugin-contactform>
Title: Contact form plugin - if errors jumps to top of page
ThreadText: # Contact form plugin - if errors jumps to top of page
  
  (Asked by: username_0 on 2020-05-28)
  
  Using the standard form plugin can you redirect for errors to a id, which works for the submission confirmation (success)?
  
  ```
   {{ redirectInput('#contact') }}
  
  ```
  
  My form is half way down the page so jumps you to the top when it has errors.
  
  Full code:
  
  ```
   <div class="cta-section" id="contact">
    <div id="thanks" role="alert">
  {% if craft.app.session.hasFlash('notice') %}
      <div class="alert-thanks"><p class="message notice"><strong>{{ craft.app.session.g*emphasized text*etFlash('notice') }}</strong></p></div>
  {% elseif craft.app.session.hasFlash('error') %}
      <div class="alert-error"><p class="message error"><strong>{{ craft.app.session.getFlash('error') }}</strong></p></div>
  {% endif %}
  </div>
  
        {% macro errorList(errors) %}
      {% if errors %}
          <ul class="errors">
              {% for error in errors %}
                  <li>{{ error }}</li>
              {% endfor %}
          </ul>
      {% endif %}
  {% endmacro %}
  
  {% from _self import errorList %}
  
  <div class="text-left">
  <form method="post" action="" accept-charset="UTF-8" id="form">
      {{ csrfInput() }}
      <input type="hidden" name="action" value="contact-form/send">
      {{ redirectInput('#contact') }}
  
  <div class="w-full md:flex ">
      <div class="w-full md:w-1/2 mb-4 md:mr-6">  
  
        <h3 class="float-left w-full uppercase"><label for="from-name">Name</label></h3>
        <input id="from-name" type="text" name="fromName" class="w-full" value="{{ message.fromName ?? '' }}">
        {{ message is defined and message ? errorList(message.getErrors('fromName')) }}
  
      </div>
  
      <div class="w-full mb-4 md:w-1/2">  
  
        <h3 class="uppercase"><label for="from-email">Email</label></h3>
        <input id="from-email" type="email" name="fromEmail" class="w-full" value="{{ message.fromEmail ?? '' }}">
        {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
      </div>
  
    </div>
  
  <div class="w-full clearfix"> 
      <h3 class="uppercase"><label for="message">Message</label></h3>
      <textarea rows="5" cols="40" id="message" name="message" class="clearfix">{{ message.message ?? '' }}</textarea>
      {{ message is defined and message ? errorList(message.getErrors('message')) }}
    </div>
  
      <div class="mt-4 clear text-center"><input type="submit" value="Send"></div>
  </form>
  
  </div>
  </div>
  
  ```
  
  **Tags:** plugin-contactform
  
  > **Comments:**
  > **username_1**: Where is the HTML element whose id is "contact"?  
  > **username_0**: It is wrapped in a <div id="contact"> updated above.  
  
  ---
  
  ## 0 answers
  
  