How to add custom field to the Contact form

By default, the Contact form element comes with some common fields.

If you want to add a custom field to the form, you can edit the element code to do that.

Notice: This article requires basic web development knowledge, and is written for developers.

First, right-click on the Contact form element and select Edit code.

The Code editor would show up, which contains the code of the Contact form element.

Each form field is a block of code

So to add a custom field, you need to add a block of code for it. There are many field types, the code examples for each of them are below, you can copy and paste them into the form code.

Text

<div class="zn-input-group {% if form.errors contains 'company' %}error{% endif %}">
    <label class="zn-label" for="{{ formId }}-company">Company</label>
    <input type="text" id="{{ formId }}-company" name="contact[company]" class="zn-input" placeholder="Your company">
</div>

Select

<div class="zn-input-group {% if form.errors contains 'size' %}error{% endif %}">
    <label class="zn-label" for="{{ formId }}-size">Size</label>
    <select id="{{ formId }}-size" name="contact[size]" class="zn-input">
        <option value="S">Size S</option>
        <option value="M">Size M</option>
        <option value="L">Size L</option>
    </select>
</div>

Checkbox

<div class="zn-input-group {% if form.errors contains 'with_sugar' %}error{% endif %}">
    <input type="checkbox" id="{{ formId }}-with_sugar" name="contact[with_sugar]" value="Yes">
    <label class="zn-label" for="{{ formId }}-with_sugar">With sugar?</label>
</div>

Radio buttons

<div class="zn-input-group {% if form.errors contains 'color' %}error{% endif %}">
    <input type="radio" id="{{ formId }}-red" name="contact[color]" value="Red">
    <label class="zn-label" for="{{ formId }}-red">Red</label>
    <br />
    <input type="radio" id="{{ formId }}-green" name="contact[color]" value="Green">
    <label class="zn-label" for="{{ formId }}-green">Green</label>
    <br />
    <input type="radio" id="{{ formId }}-blue" name="contact[color]" value="Blue">
    <label class="zn-label" for="{{ formId }}-blue">Blue</label>
</div>

Date

<div class="zn-input-group {% if form.errors contains 'book_date' %}error{% endif %}">
    <label class="zn-label" for="{{ formId }}-book_date">Book date</label>
    <input type="date" id="{{ formId }}-book_date" name="contact[book_date]" class="zn-input">
</div>

Time

<div class="zn-input-group {% if form.errors contains 'book_time' %}error{% endif %}">
    <label class="zn-label" for="{{ formId }}-book_time">Book time</label>
    <input type="time" id="{{ formId }}-book_time" name="contact[book_time]" class="zn-input">
</div>