Skip to main content

Create contact and request forms (MT4)


This article will explain how to create a "Contact Support" or "Request Article" GeniusLink form. You will need knowledge of basic HTML and Dekiscript.
 

First Step: Form containers

Create a Dekiscript block and add the following HTML inside it.  This HTML creates the form containers and ensures that the proper styles get applied. If you have more than one form on your site and need to differentiate between the two, you can add an additional unique class or id to the <form> tag.

<div class="mt-support-email">
    <form class="ui-dform-form">
        <fieldset class="ui-dform-fieldset">
        
        </>
    </>
</>

Second Step: Form field containers

Once you have the form containers created, you can start adding in form field containers inside the <fieldset> tags for each label/form field pair. Start with a <div> that has the class name "mt-field". Classes in this <div> will allow you to control the display of your form elements.

One element in a row

By default, all form field containers will appear this way.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/one-element-on-row.png

<fieldset class="ui-dform-fieldset">
    <div class="mt-field"> 
       
    </div>
</>
Two elements in a row

If you want two label/form field pairs to appear on the same row, then you would add the class "mt-half" to both containers and "mt-last" to the last container in that row.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/two-elements-on-row.png

<fieldset class="ui-dform-fieldset">
    <div class="mt-field mt-half">
       
    </div>
    <div class="mt-field mt-half mt-last">  
    
    </div>
</>
Three elements in a row

If you want three label/form field pairs to appear on the same row, then you would add the class "mt-third" to all three containers and "mt-last" to the last container in that row.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/three-elements-on-row.png

<fieldset class="ui-dform-fieldset">
    <div class="mt-field mt-third"> 
      
    </div>
    <div class="mt-field mt-third"> 
     
    </div>
    <div class="mt-field mt-third mt-last"> 
    
    </div>
</>

Third Step: Form fields with labels

Each form field needs to be paired with a label.  <label> tags should have the "ui-dform-label" class and a for="" attribute with the name from the form field. In the code sample below, the first field name is "subject" and it's label has the for="subject" attribute value.

The form field tags must have the class "mt-email-field" to allow for form processing.  You may use <input><select>, or <textarea> tags in this form.  To style your fields use "ui-dform-text""ui-dform-select", or "ui-dform-textarea" classes.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/description.pngFile:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/select.pngFile:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/one-element-on-row.png

<fieldset class="ui-dform-fieldset">
    <div class="mt-field">
        <label class="ui-dform-label" for="subject"> 'Subject:' </>
        <input class="mt-email-field ui-dform-text" type="text" name="subject" />
    </div>
    <div class="mt-field">
        <label class="ui-dform-label" for="issue"> 'Issue:' </>
        <select class="mt-email-field ui-dform-select" name="issue">
            <option selected="selected"> '-- Choose an issue -- ' </option>
        </select>
    </div>
    <div class="mt-field">
        <label class="ui-dform-label" for="description"> 'Description:' </>
        <textarea class="mt-email-field ui-dform-textarea" name="description"> 'Please provide context for the requested article.' </textarea>
    </div>    
</>
Required Fields

If you wish to make a form field required, you will need to add the "mt-required-field" class to the form field tag and then add a <span> tag with the class "mt-required". Add the span after the <label> but before the form field.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/required-field.png

<fieldset class="ui-dform-fieldset">
    <div class="mt-field">
        <label class="ui-dform-label" for="subject"> 'Subject:' </>
        <span class="mt-required"> '(required)' </span>
        <input class="mt-email-field ui-dform-text mt-required-field" type="text" name="subject" />
    </div>
</>

Fourth Step: Submit button and processing

To properly process your GeniusLink form, you will need to add a link to one of two templates.  These templates will generate a submit button and process your form when a user clicks submit. You may change the text that appears in the submit button by changing the value for "button:" in the template call.

File:008_Engineering/MindTouch_Standards_and_Best_Practices/Feature_Designs/GeniusLink/GeniusLink_Forms/Advanced_Form_Creation/submit-button.png

// Contact support submit button
template('MindTouch/Controls/WorkflowSubmitIssueButton', {button: 'Submit email'});

// Request article submit button
​template('MindTouch/Controls/WorkflowSubmitArticleRequestButton', {button: 'Submit article creation request'});
  • Was this article helpful?