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>