Welcome | Get started | Dive | Contribute | Topics | Reference | Changes | More

webforms : Support web forms

This page gives developer information about the lino_xl.lib.webforms plugin, which adds a contact form and other bot-proof web forms to your Lino site.

This page contains code snippets (lines starting with >>>), which are being tested during our development workflow. The following snippet initializes the demo project used throughout this page.

>>> from lino_book.projects.noi2.startup import *

>>> body = """[show webforms.ContactRequestsWeb.insert]"""
>>> print(dd.plugins.memo.parser.parse(body))  #docutils: +NORMALIZE_WHITESPACE

<form action="#" id="submit_insert_form" onsubmit="return on_submit_insert()">
<fieldset id="submit_insert_fields">
  <div class="mb-3">
    <fieldset>
<table><tr><td style="vertical-align: top;"><label for="first_name" class="form-label">First name</label><input name="first_name" type="text" value=" " class="form-control" aria-describedby="help_first_name"/></td>
<td style="vertical-align: top;"><label for="last_name" class="form-label">Last name</label><input name="last_name" type="text" value=" " class="form-control" aria-describedby="help_last_name"/></td>
</tr></table><label for="email" class="form-label">e-mail address</label>
<input name="email" type="email" value=" " class="form-control" aria-describedby="help_email"/><label for="phone" class="form-label">Phone</label>
<input name="phone" type="text" value=" " class="form-control" aria-describedby="help_phone"/><div class="form-group"><label>Message</label><textarea rows="5" class="form-control"> </textarea></div>
</fieldset>
    <button type="submit" class="btn btn-primary mb-3">Submit</button>
    <field type="hidden" name="an" value="submit_insert">
  <div class="mb-3" id="submit_insert_msg">
  </div>
</div>
<fieldset/>
</form>
<script>
function on_submit_insert () {
  let form = document.getElementById("submit_insert_form");
  let data = new URLSearchParams();
  // console.log(20260207, "elements", form.elements);
  data.append('an', 'submit_insert');
  for (let i = 0; i < form.elements.length; i++) {
      let element = form.elements[i];
      if (element.name) {
          data.append(element.name, element.value);
      }
  }
  // console.log(20260207, data);
  function process_response(rv) {
    console.log("20260208 process_response", rv);
    document.getElementById("submit_insert_msg").textContent = rv.message;
    if(rv.success) {
      document.getElementById("submit_insert_fields").disabled = true;

    }
  }
  fetch('/admin/api/webforms/ContactRequestsWeb/-99999', {
      method: 'POST',
      body: data.toString(),
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(response => response.json()).then(process_response);;
  // console.log(20260207, rv);
  return false;
}
</script>

>>> body = """[show webforms.CreateUserRequestsWeb.insert]"""
>>> print(dd.plugins.memo.parser.parse(body))  #docutils: +NORMALIZE_WHITESPACE

<form action="#" id="submit_insert_form" onsubmit="return on_submit_insert()">
<fieldset id="submit_insert_fields">
  <div class="mb-3">
    <fieldset>
<table><tr><td style="vertical-align: top;"><label for="first_name" class="form-label">First name</label><input name="first_name" type="text" value=" " class="form-control" aria-describedby="help_first_name"/></td>
<td style="vertical-align: top;"><label for="last_name" class="form-label">Last name</label><input name="last_name" type="text" value=" " class="form-control" aria-describedby="help_last_name"/></td>
</tr></table><label for="email" class="form-label">e-mail address</label>
<input name="email" type="email" value=" " class="form-control" aria-describedby="help_email"/><label for="username" class="form-label">Username</label>
<input name="username" type="text" value=" " class="form-control" aria-describedby="help_username"/><label for="password" class="form-label">Password</label>
<input name="password" type="password" value=" " class="form-control" aria-describedby="help_password"/>
</fieldset>
    <button type="submit" class="btn btn-primary mb-3">Submit</button>
    <field type="hidden" name="an" value="submit_insert">
  <div class="mb-3" id="submit_insert_msg">
  </div>
</div>
<fieldset/>
</form>
<script>
function on_submit_insert () {
  let form = document.getElementById("submit_insert_form");
  let data = new URLSearchParams();
  // console.log(20260207, "elements", form.elements);
  data.append('an', 'submit_insert');
  for (let i = 0; i < form.elements.length; i++) {
      let element = form.elements[i];
      if (element.name) {
          data.append(element.name, element.value);
      }
  }
  // console.log(20260207, data);
  function process_response(rv) {
    console.log("20260208 process_response", rv);
    document.getElementById("submit_insert_msg").textContent = rv.message;
    if(rv.success) {
      document.getElementById("submit_insert_fields").disabled = true;

    }
  }
  fetch('/admin/api/webforms/CreateUserRequestsWeb/-99999', {
      method: 'POST',
      body: data.toString(),
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(response => response.json()).then(process_response);;
  // console.log(20260207, rv);
  return false;
}
</script>