Question 167398 in Html Question posted in
Some basic documentation can be found here.

Html – Getting the value of a subject field on contact form submission

using web3forms for a simple contact form on an HTML page. I was wondering if there was a way to when the user submits the form, instead of having it say "New Submission from Web3Forms" instead have it be the subject of the input in the form. Submission is just coming back with the function name and not the actual value. Is that possible to do? THnaks

Here’s the form block code

<div class="col-lg-8">
  <div class="custom-form">
    <div id="message"></div>
    <form action="https://api.web3forms.com/submit" method="POST" id="form">
      <input type="hidden" name="access_key" value="yourkeyhere" />
      <input type="hidden" name="subject" value="getSubjectValue()" />
      <input type="hidden" name="redirect" value="https://web3forms.com/success" />
      <input type="checkbox" name="botcheck" id="" style="display: none;" />
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <input name="name" id="name" type="text" class="form-control" placeholder="Your name..." required>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <input name="email" id="email" type="email" class="form-control" placeholder="Your email..." required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <input name="text" id="subject" type="text" class="form-control" placeholder="Your subject..." required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <textarea name="comments" id="message" rows="4" class="form-control" placeholder="Your message..." required></textarea>
          </div>
        </div>
      </div>

      <input type="submit" id="submit" name="send" class="submitBnt btn btn-custom" value="Send Message">
      <div id="simple-msg"></div>
  </div>
</div>
</form>

I tried doing something like (in a script tag block)

function getSubjectValue () {
    const subject = document.getElementById('subject')
    const subjVal = subject.value
}

Thanks for the help

Tags:

2

Answers


  1. 0

    I would delete <input type="hidden" name="subject" value="getSubjectValue()" />
    and script block and modify the following code:

    <!--from-->
<input name="text" id="subject" type="text" class="form-control" placeholder="Your subject..." required> 
<!--to -->
<input name="subject" id="subject" type="text" class="form-control" placeholder="Your subject..." required>

    This would automatically send the subject as a value without a need for an extra input field.
    If you really need an extra field, then another way would be to use onChange on the field to change the hidden fields value but this is simpler imho.

    Login or Signup to reply.
  2. 0

    You need to call getSubjectValue() when the form is submitted. It can copy the value to the hidden input.

    document.getElementById("form").addEventListener("submit", getSubjectValue);

function getSubjectValue() {
  const subject = document.getElementById('subject');
  document.getElementById("hiddenSubject").value = subject.value;
}
    <div class="col-lg-8">
  <div class="custom-form">
    <div id="message"></div>
    <form action="https://api.web3forms.com/submit" method="POST" id="form">
      <input type="hidden" name="access_key" value="yourkeyhere" />
      <input type="hidden" name="subject" id="hiddenSubject" value="" />
      <input type="hidden" name="redirect" value="https://web3forms.com/success" />
      <input type="checkbox" name="botcheck" id="" style="display: none;" />
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <input name="name" id="name" type="text" class="form-control" placeholder="Your name..." required>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <input name="email" id="email" type="email" class="form-control" placeholder="Your email..." required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <input name="text" id="subject" type="text" class="form-control" placeholder="Your subject..." required>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="form-group">
            <textarea name="comments" id="message" rows="4" class="form-control" placeholder="Your message..." required></textarea>
          </div>
        </div>
      </div>

      <input type="submit" id="submit" name="send" class="submitBnt btn btn-custom" value="Send Message">
      <div id="simple-msg"></div>
    </form>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search