Server error! Check the console for details :(

How to Create an eForm

  1. Add or update the form on Webform Manager
  2. Create a form on your page using standard HTML5 <input> tags. Type = text, email, tel, url, checkbox, radio, etc. Note that Textarea is not an input, it's a textarea.

    The value in the ID field is what's sent through the web form (not the label) along with the content provided by the user in the input box.

    <form id="contact">
        <label>
            DISPLAY_NAME
            <input type="text" name="Name" placeholder="Hint" form="contact" required />
        </label>
        <label>
            DISPLAY_NAME
            <input type="email" name="Email" placeholder="Hint" form="contact" required />
        </label>
        <label>
            DISPLAY_NAME
            <input type="text" name="Phone" placeholder="Hint" form="contact" required />
        </label>
        <label>
            DISPLAY_NAME
            <textarea name="Message" placeholder="Hint" form="contact" required />
        </label>

    How to make a drop-down list:

    <label>
      DISPLAY_NAME
        <select name="What displays on form" required>
            <option value="" disabled selected>Select One</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </label>

    Adding "required" to the <select> tag causes validation to occur. Adding "disabled" and "selected" to the "Select One" <option> causes that field to be initially displayed, not pass validation, and not be selectable again once clicked on.

    How to make a radio button:

    For Radio buttons and Checkboxes, the there is no input field for the user to tyep in, so the pre-filled Value in the value="" field is what's delivered to our client. The Name (not the ID) field on the radio button is the descriptor that prefaces the value.

    <label><input type="radio" name="What displays on the email" id="unique ID" value="Value" />What displays on web page</label>
    <label><input type="radio" name="What displays on the email" id="unique ID 2" value="Value" />What displays on web page</label>

    Name is the same for all elements of the related radio button. Value is what displays to the client on the form.

    How to make a checkbox:

    <label><input type="checkbox" name="What displays on the email" value="Yes" />Display label</label>

    Checkboxes are slightly jury rigged, so please use this nomeclature rather than what you might see Googling for it. Only checkboxes that are checked will get sent to the client.

    For a refresher on HTML & HTML5 inputs see http://www.w3schools.com/html/html_forms.asp & http://www.w3schools.com/html/html5_form_input_types.asp

  3. Your website needs to have the following scripts, however these should already be loaded for you on the masterpage file. Please look to confirm whether they are already present and do NOT add them a second time:
    • Change #contact to match the id on your form
    • Change [domain/formname] to the entry you created in step 1
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://code.a8b.co/forms/js/a8b.webform.js" type="text/javascript"></script>
    <script type="text/javascript">
       A8B.webForm('#contact', '[domain/formname]');
    </script>
  4. In order to make the boxes all match up to the same size, declare a border (to override the default styling by the browser) and then declare the width as calc(100% - YYpx), where YY is the the horizontal padding plus the horizontal border.
    e.g. if the padding is 10px and the border is 1px, then YY would be 22. The submit button ignores those rules, and will just be width 100%.