Cant use external link in HTML form

I have an HTML form connected to Netlify. Everything with the form works fine until I set the action field of the form to an external link. When I set the action in the form to an external link I no longer receive the submissions in Netlify. By “external link” I mean any link that is outside of my site like https://google.com for example. But if I set it to an internal link like /home/ it will work fine. I have tried a ton of workarounds like handling the redirect in a JS script, or redirecting to an internal page like /redirect/ and than having that page automatically redirect to the external link, but that also doesn’t work. And yes, I get the same result for all external links, it is not just the link I am trying to redirect to. Any help would be greatly appreciated!

Here is my HTML form:

<section id="contact-1333">
  <div class="cs-container">
    <form class="cs-form" id="cs-form-1333" name="Donate Form" data-netlify="true" onSubmit="submit" data-netlify-honeypot="bot-field" action="https://google.com">
      <div class="cs-content">
        <span class="cs-topper">Help us make a difference</span>
        <h2 class="cs-title">Donate Now</h2>
      </div>
      <label class="cs-label">
        Name
        <input class="cs-input" required type="text" id="name-1333" name="name" placeholder="Name">
      </label>
      <label class="cs-label cs-email">
        Email
        <input class="cs-input" required type="email" id="email-1333" name="email" placeholder="Email">
      </label>
      <label class="cs-label">
        Address
        <input class="cs-input" type="text" id="address" name="address" placeholder="Address">
      </label>
      <label class="cs-label">
        Company
        <input class="cs-input" type="text" id="company" name="company" placeholder="Company">
      </label>
      <label class="cs-label">
        Position
        <input class="cs-input" type="text" id="position" name="position" placeholder="Position">
      </label>

      <label class="cs-label">
        <div class="checkbox-container">
          <input required type="checkbox" id="checkbox" name="checkbox">
          <span class="checkmark"></span>
          I agree to the terms.
        </div>
      </label>
      <button class="cs-button-solid cs-submit" type="submit">Donate</button>
    </form>
    <div class="cs-content">
      <span class="cs-topper">Terms</span>
      <h2 class="cs-title">Contribution rules</h2>
      <ul class="cs-faq-group">

        <li class="cs-faq-item active">
          <button class="cs-button">
            <span class="cs-button-text">
              Who can donate?
            </span>
          </button>
          <p class="cs-item-p">
            Donations can be accepted from individuals, corporations, trusts, joint venture, unions, cooperative, or
            other unincorporated organization or associations.
          </p>
        </li>
        <li class="cs-faq-item active">
          <button class="cs-button">
            <span class="cs-button-text">
              How much can I donate?
            </span>
          </button>
          <p class="cs-item-p">
            You can donate an unlimited amount to our non-partisan effort.
          </p>
        </li>
        <li class="cs-faq-item active">
          <button class="cs-button">
            <span class="cs-button-text">
              By submitting this form you agree to the following:
            </span>
          </button>
          <p class="cs-item-p">
          <ul>
            <li class="cs-item-p">I am a U.S. citizen or lawfully admitted permanent resident (i.e., green card holder).
            </li>
            <li class="cs-item-p">This contribution is made from my own funds, and funds are not being provided to me by
              another person or entity for the purpose of making this contribution.</li>
            <li class="cs-item-p">I am at least eighteen years old.</li>
            <li class="cs-item-p">I am not a federal contractor.</li>
            <li class="cs-item-p">Your contribution will benefit Yes on Prop 413 PAC and is not authorized by any
              candidate or candidate's committee</li>
          </ul>
          </p>
        </li>
      </ul>
    </div>
  </div>
</section> 

Hi @90909090898, yes you are right. Once you use an external link as value for the action attribute, the HTML will navigate to the external link. Hence your forms will not submit.

Kindly share what you actually want to achieve so that I can help with suggestions?

Thanks.

I want to redirect to an external URL after the form is submitted.

Hi @90909090898, thanks for the feedback.

If you want to redirect after form submission, you need to use JavaScript.

Kindly check the Netlify documentation below on how to submit forms using JavaScript.

Thanks.

Got it working. Thanks so much for your help!!

1 Like