Form Element

Get connected to your users

Overview

Forms allow you to receive user input from your visitors. In Mame there are three flexible options on how the data should be processed. The most simple one is sending you an email with the form data.

Mame's included form builder supports almost all HTML5 field types, from text and number inputs, over selects to even range sliders. You can stack, design and name them as needed. 

Usage Examples

  • Contact and Feedback Forms.
  • Connecting your website to a 3rd party service like Mailchimp, Clevermail etc..
  • Bookings, Pools, Reservations, Cancellations, Event signups..
  • Other user interactions

Form Properties

  1. Form Title: The title is visible on the top of the form, except you hide it.
  2. Show Title: Choose between different heading sizes or hide the form title completely.
  3. Submit Button Text: Set the text of the form submit button (Default is Send)
  4. Submit Button Color Style: Set the color for the submit button, choose between your sites colors or use a custom color and text.
  5. Form Action: Choose what should happen with the form data. You can choose between Mailing it to an email address, sending it to an 3rd party API or posting it to a 3rd party server.
Form fields are added directly on the form.
Form Element Description

Send to Email Form Action Properties

These values are not shared on the form itself and not publicly visible for the user.
  1. To email: Which email address should receive the form data.
  2. BCC Email: Optional address to receive the form data too.
  3. Subject: Set the subject of the email
  4. Reply to: Set an optional reply to address from your form fields. E.g. if you have an email input field with the custom name "email", you can use {{email}} here to easier answer from your email client.
  5. Email Content: Choose what should happen with the form data. You can choose between Mailing it to an email address, sending it to an 3rd party API or posting it to a 3rd party server.
  6. Success Text: Thank you message after the form was submitted.
Placeholders for Emails:

With Placeholders you can set up dynamic emails. A placeholder is surrounded by two curly braces. For example "Hello {{name}}" would be replaced through Hello and the field with the custom identifier "name". There are also some common placeholders to use:

{{form_name}} is replaced by the form title.
{{sender_ip}} is replaced by the IP address of the user. Please make sure you include this in your privacy policy. The IP is not saved on the server side, except for potential security or legal reasons. See our privacy policy for details.
{{user_agent}}: The user agent (Browser etc.)
{{form_data}} is replaced with all input fields and user data.

Accordion Element Wireframe

Send to a custom address Properties

Instead of handled by our server the form submit event is send to a custom URL (Method POST) with the default encoding type (enctype="application/x-www-form-urlencoded").
  1. Custom Address: Address of the endpoint (including protocol), where the form is send.
The form is send with POST, fields use the name attribute you set in the custom attribute properties.

Accordion Element Wireframe

Send to a third party API (JSON)

This option is used when you want to send the form data to a third party API. As this happens on the server side, you can include private and secret properties (like a header token) and add additional JSON data. These are not exposed to visitors. Make sure the API endpoint answers with a 20x code for success and 4xx / 5xx for errors. 
  1. API URL: Address of the endpoint (including protocol), where the POST request is send (content type is application/json).
  2. Additional Headers: Optional Header Data included in the POST from the API side. (JSON formatted). E.g. {token: 'secure'}
  3. Additional Data: Appended (merged) to the JSON serialized form data.
The form is send with POST, fields use the key you set in custom attribute properties. Make sure the keys are JSON encodable.

Accordion Element Wireframe

See it in action

Test Form Heading

Some custom HTML Text, you can add any element to a form.

Interactions and Accessibility

Users can navigate through the form by using Tab and submitting the form (or triggering the form validation) by pressing Enter. 

All form elements are 100% accessible and contain the necessary tags out of the box. Even if you hide the label, aria compliant invisible labels for screen readers are generated. 

Generated HTML (outlined)


<div class="mame-element mame-form">
   <form action="https://api.mame.app/v1/userform" method="post" ...>
     <h3 class="form-caption">Test Form Heading</h3>
      <div class="form-success" style="--d:none; --bgc:var(--green); --p: 10px 20px;"></div>
      <div class="form-error" style="--d:none; --bgc:var(--red); --p: 10px 20px;"></div>
      <div>
        <div class="mame-element mame-input" ...>
           <label for="input...">
             Text Input
             <input type="text" name="textinput" id="input..." required>
           </label>
        </div>
      </div>
       <input type="hidden" name="formId" value="autogenerated">
      <div>
        <input type="submit" class="primary" value="Send">
      </div>
   </form>
</div>

Style / CSS Selectors


.mame-form {
  /* The surrounding form div / All forms */
}

.mame-form form {
  /* The form element */
} 

.mame-form .form-caption {
  /* Styles the form heading caption */
}

.mame-form .form-success {
  /* The success message styling */
}

.mame-form .form-error {
  /* The error message styling */
}

/* Mame form fields */

.mame-form .mame-input {
  /* All input (<input ..) elements */
}

.mame-form .mame-input[type=number] {
  /* All number input (<input type="number" ..) elements */
}

.mame-form .mame-textarea {
  /* All text area (<textarea ..) elements */
}

.mame-form .mame-select {
  /* All select (<select ..) elements */
}

.mame-form .mame-range {
  /* All range (<range ..) elements */
}

.mame-form .mame-checkbox {
  /* All checkbox (<input type="checkbox" ..) elements */
}

.mame-form input[type=submit] {
  /* The submit button (<input type="submit" ..) */
}

JavaScript

Forms use Mame's base JavaScript for it's validation functionality and for submitting the form to the APIs. To enhance the user experience forms are not posted, but transmitted by an Ajax / Xhr request (except you are using a custom POST URL).

References / Useful information

Was this article helpful?