The “opening” HTML for your form tag generator

Previously using version 1

Everything was inside a single div and fieldset element and the form controls were laid out with a table element. You could customize the description in a legend element.

<div class="control-box">
    <fieldset>
        <legend>Form tag generator description text!</legend>
        <table class="form-table">
            <tbody>

Using version 2

Now there is a header element so you can customize the title and description and we’re no longer using the table element.

<header class="description-box">
    <h3>{Custom form tag} form tag generator</h3>
    <p>Form tag generator description text!</p>
</header>
<div class="control-box">

HTML wrappers for form tag controls

Previously using version 1

Since all controls were inside a table, it meant every option was inside it’s own table row with the label in the first column and the control in the second.

<tr>
    <th scope="row">
        Form Tag Label
    </th>
    <td>
        <!-- HTML for form control element -->
    </td>
</tr>

Using version 2

There isn’t a table anymore and now each one is wrapped in its own fieldset element! I also personally added a label element with a for attribute inside the legend element and surrounded the HTML for the form control element in its own div element for accessibility and styling purposes in DTX.

<fieldset>
    <legend>
        Form Tag Label
    </legend>
    <!-- HTML for form control element -->
</fieldset>

HTML for form tag controls

Even though Contact Form 7 supports the readonly option, it wasn’t in their form tag generators. This was something that DTX added for the dynamic form tags and it didn’t need any additional customization because the option was already built-in and supported by CF7. The readonly attribute itself is simply on or off, so it is best represented as a checkbox for the user to toggle.

Keep in mind that this HTML snippet is inserted in the wrapper snippet where it says <!-- HTML for form control element -->

Previously using version 1

It was pretty easy actually. Add option as a class to identify this control as an option and then set the name attribute to the option’s name.

<label>
    <input type="checkbox" name="readonly" class="option"
    Do not let users edit this field
</label>

Using version 2

Get rid of the name and class attributes in favor of data-tag-part and data-tag-option!

<label>
    <input type="checkbox" data-tag-part="option" data-tag-option="readonly"
    Do not let users edit this field
</label>

Understanding data-tag-part and data-tag-option

Every form tag component will have a data-tag-part attribute. Only form tag options will have the data-tag-option attribute.

The data-tag-part attribute

Below is a list of possible values for data-tag-part:

• basetype – this is used to define the form tag element to insert. In CF7, they appear on the dropdown at the top of the form tag generators and their values are the form tag itself, such as text and email. In DTX, they are on hidden fields at the top of our form tag generators with their value set to their own form tags like dynamic_text and dynamic_email.
• content – this is only seen on the controls for the textarea‘s “Default value” and acceptance‘s “Condition” since both of those form tags are not self-closing like the rest. This isn’t used in DTX.
• mail-tag – this is used in the footer that identifies the placeholder space for where the mail tag should be placed when generated on the frontend.
• name – this is used on the text field that identifies the form tag’s name.
• option – this is used on all of the form controls that identify an option. It also has the data-tag-option attribute to identify which option and whether or not it should have a value or if it’s a boolean (more info).
• tag – this is used in the footer to identify the tag content to be inserted.
• type-suffix – this is used on the checkbox field that identifies if the form tag should be required or optional. The value of the checkbox is set to a single asterisk (*) because that is the syntax used for required form tags in Contact Form 7.
• value – this is used on the form control for “Default value”. In DTX, we use it for dynamic values and options.

The data-tag-option attribute

When the data-tag-part has a value of option, then it must also have the attribute data-tag-option.

If the option is a boolean option, such as readonly or dtx_pageload, then the value of data-tag-option is simply that option’s name, e.g.

Boolean options must also be either a checkbox or radio type input element (please excuse the weird formatting of this HTML, it is to emphasize the attributes).

<input 
    data-tag-part="option" 
    data-tag-option="dtx_pageload"
    type="checkbox"
>

If the option should have a value, such as the minlength option, then the option’s name should end with a colon (:) like so:

<input 
    data-tag-part="option" 
    data-tag-option="minlength:"
    type="number"
    min="0"
    step="1"
>

The data-taggen attribute

The attribute data-taggen only appears on buttons and so far, the only possible values include

• insert-tag – used in the footer on the button that inserts the tag into the form template.
• open-dialog – not used within the form tag generator HTML, but it is used on the form tag generator buttons above the form template to open the generator’s dialog box.
• close-dialog – not used within the form tag generator HTML, but it is used on the close button on the top right of the form tag generator’s dialog box.

The “closing” HTML for your form tag generator

Previously using version 1

At the end, we closed up all four elements that were opened at the start and then added the form elements that acted as a preview for the form tag with the button to insert it. Hopefully you properly translated the text instead of my hardcoded example.

            </tbody> <!-- /tbody -->
        </table> <!-- /table -->
    </fieldset> <!-- /fieldset -->
</div> <!-- /.control-box -->
<div class="insert-box">
    <input name="<?php echo esc_attr($form_tag); ?>" class="tag code" readonly="readonly" onfocus="this.select()" type="text">
    <div class="submitbox">
        <input type="button" class="button button-primary" value="Insert Tag"
    </div>
    <br class="clear">
    <p class="description mail-tag">
        <label>
            To use the value input through this field in a mail field, you need to insert the corresponding mail-tag (<strong><span class="mail-tag"><span></strong></span>) into the field on the Mail tab.
        </label>
        <input type="text" class="mail-tag code hidden" readonly="readonly">
    </p>
</div> <!-- /.insert-box -->

Using version 2

The HTML has been simplified overall, with only needing to close one (1) opened element and uses a footer element for the form tag preview elements. Much like the options, we see the usage of data-tag-part but it has the unique value tag for the input element. The button element has the data-taggen property set to insert-tag. The last important piece is the strong element with the data-tag-part attribute set to mail-tag. It doesn’t have to be a strong element either. You can customize it to whatever you want so long as the dynamic piece for where the mail tag is to be displayed has that attribute. This is the same case for the input element as well. In DTX, we use a textarea element to display larger form tags since they can get pretty lengthy.

</div> <!-- /.control-box -->
<footer class="insert-box">
    <div class="flex-container">
        <input type="text" class="code" readonly="readonly" onfocus="this.select()" data-tag-part="tag" aria-label="The form-tag to be inserted into the form template">
        <button type="button" class="button-primary" data-taggen="insert-tag">
            Insert Tag
        </button>
    </div>
    <p class="mail-tag-tip">
        To use the user input in the email, insert the corresponding mail-tag <strong data-tag-part="mail-tag"></strong> into the email template.
    </p>
</footer>