app/liquid/views/partials/_form.liquid
<form action='/api/pages/{{id}}/actions{{form_url_postscript}}' data-remote='true' method='post' class='form--big action-form'>
<div class="form-wrapper">
<div class="action-form__welcome-text-container" >
<div class="action-form__welcome-text hidden-irrelevant">
<div class="action-form__welcome-user">
<i class="fa fa-check-circle fundraiser-bar__user-icon"></i>
<span class="action-form__welcome-name"></span>
</div>
<a href="javascript:;" class=" action-form__clear-form">{{ 'form.switch_user' | t }}</a>
</div>
</div>
<input type='hidden' name='form_id' value='{{ form_id }}' />
{% comment %} <div style="overflow-y: scroll; max-height: 300px; float: left;"> {% endcomment %}
{% for field in fields %}
<div class="form__group action-form__field-container">
{% case field.data_type %}
{% when 'text' or 'postal' %}
<div class="sweet-placeholder" data-display-mode="{{field.display_mode}}">
<label class="sweet-placeholder__label">{{ field.label }}</label>
<input type="text" name="{{field.name}}" class="form__content sweet-placeholder__field" maxlength="249" value="{{ field.default_value }}" />
</div>
{% when 'hidden' %}
<input type="hidden" name="{{field.name}}" class="form__content" id="" placeholder="{{ field.label }}" value="{{ field.default_value }}" />
{% when 'paragraph' %}
<textarea name="{{ field.name }}" placeholder="{{ field.label }}" data-display-mode="{{field.display_mode}}"
class="form__content sweet-placeholder__field" id="" maxlength="9999">{{ field.default_value }}</textarea>
{% when 'email' %}
<div class="sweet-placeholder" data-display-mode="{{field.display_mode}}">
<label class="sweet-placeholder__label">{{ field.label }}</label>
<input type="email" name="{{field.name}}" class="form__content sweet-placeholder__field" value="{{ field.default_value }}" />
</div>
{% when 'phone' %}
<div class="sweet-placeholder" data-display-mode="{{field.display_mode}}">
<label class="sweet-placeholder__label">{{ field.label }}</label>
<input type="tel" name="{{field.name}}" class="form__content sweet-placeholder__field" value="{{ field.default_value }}" />
</div>
{% when 'checkbox' %}
{% if field.default_value == blank %}
{% assign checked = '' %}
{% else %}
{% assign checked = 'checked' %}
{% endif %}
<label class="checkbox-label" data-display-mode="{{field.display_mode}}">
<input name="{{field.name}}" type="hidden" value="0" />
<input type="checkbox" name="{{field.name}}" class="form__content" value="1" {{ checked }}/> {{ field.label }}
</label>
{% when 'country' %}
<div class="sweet-placeholder" data-display-mode="{{field.display_mode}}">
<label class="sweet-placeholder__label">{{ field.label }}</label>
<select name="{{field.name}}" class="action-form__dropdown form__content sweet-placeholder__field selectize">
<option></option>
{% if field.default_value == blank %}
{{ country_option_tags }}
{% else %}
{{ country_option_tags | select_option: field.default_value }}
{% endif %}
</select>
</div>
{% when 'dropdown' %}
<div class="sweet-placeholder" data-display-mode="{{field.display_mode}}">
<label class="sweet-placeholder__label">{{ field.label }}</label>
<select name="{{ field.name }}" class="action-form__dropdown form__content sweet-placeholder__field selectize">
<option></option>
{% for choice in field.choices %}
{% if choice.value == field.default_value %}
<option value="{{ choice.value }}" selected="selected">{{ choice.label }}</option>
{% else %}
<option value="{{ choice.value }}">{{ choice.label }}</option>
{% endif %}
{% endfor %}
</select>
</div>
{% when 'choice' %}
<div class="radio-container" data-display-mode="{{field.display_mode}}">
<div class="radio-title">{{ field.label }}</div>
{% for choice in field.choices %}
<label for="{{ choice.id }}">
<input id="{{ choice.id }}" name="{{ field.name }}" type="radio" value="{{ choice.value }}">
{{ choice.label }}
</label>
{% endfor %}
</div>
{% when 'instruction' %}
<div class="form__instruction" data-display-mode="{{field.display_mode}}">
{{ field.label }}
</div>
{% endcase %}
</div>
{% endfor %}
</div>
<div class="button-wrapper">
<button type="submit" class="button action-form__submit-button">{{ cta }}</button>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
new window.champaign.SweetPlaceholder();
});
</script>