Building an Entry Form

You can build your own custom Entry Form by writing a partial containing your Entry Form SML. This partial name is then passed into the contest_form_link block:

{% partial name:'my-entry-form' %}
  // Your Entry Form SML here
{% endpartial %}

{% contest_form_link entry_form_partial:"my-entry-form" success_partial:"my-success" %}Submit My Entry{% endcontest_form_link %}

The code configuration for the contest_form sub-block works almost exactly like the signup_form Feature Block, except that the data it collects is encoded as entries in your contest. The same custom validation and custom error messages that work on signup forms work exactly the same way in contest forms.

Block Attributes

Context Variables

In the Contest Form SML, you have access to the following variables:

When a user enters a contest, there are two components: Registration and Submission. Registration fields are used for collecting the user's personal contact information or other fields that you would want collect at registration time like opting into a mailing list for example. Submission fields are the actual submissions (i.e. text, image, or video). These are generally unique per entry.

Keep in mind that you can use the contest_user context variables within the contest_form to pre-populate fields or populate hidden fields.

Keywords

Contest entries can also be tagged with keywords for later use. Simply add a new hidden input field to the contest form with the name of submission[contest_tags] and a value of a comma separated list of keywords. For example:

<input type="hidden" name="submission[contest_tags]" value="foo, bar">

See the documentation for the paginate helper block for how to filter contest entries by tag.

Building an Entry Form

To construct a form, use the contest_form tag. You may treat this as a regular HTML <form> tag and put any standard HTML input fields between it like so:

{% contest_form %}
    <input type="text" name="registration[name]">
    <input type="text" name="submission[phrase]">
{% endcontest_form %}

Notice how the name attributes for the inputs are namespaced by 'registration' and 'submission'. The following name attribute syntax should be followed to differentiate between registration and submission fields.

You have an option to collect registration data only once from the end user by placing the registration entries inside the following block:

  {% unless contest_user_is_registered %}
    <input type="text" name="registration[name]">
  {% endunless %}

Once the user has registered, registration fields will be hidden and left out from the contest submission form, when the user attempts to submit his/her second entry.

Photo and Video Uploads

The image_upload_field and video_upload_field tags have the following attributes

For image upload fields, use the following tag:

{% image_upload_field name:'your_input_field_name' %}

For example, you can name the field:

{% image_upload_field name:'submission[before_photo]' %}

This will render a browse button that the user can use to find an image file to upload. When the upload has completed, then the tag will generate a preview image for the user and then also automatically set the input field value to save to the contest submission form.

Video uploads have a max size of 200mb.  For video upload fields, use the following tag:

{% video_upload_field name:'your_input_field_name' %}

Note: When a video is uploaded, the Involver system will encode the video from most popular video formats to MP4 format. To display the video, use the SML tag 'video_player'.

{% video_player video_url:contest_entry.'your_video_entry_field_name'_encoded_video_url imgsrc:contest_entry.'your_video_entry_field_name'_thumbnail_url %}

For example:

{% video_player video_url:entry.submission.video_encoded_video_url imgsrc:entry.submission.video_thumbnail_url %}

Formats Supported: .WMV;.3GP;.AVI;.MOV;.MP4;.MPEG;.FLV;.MKV;.M4V',
Maximum File size: 200MB

Validations

Specify a combination of validation rules on input fields for the form.

Validation Example

We can add Validation and custom error messages to the contest_form the same way we add it to a signup_form, by applying the rules_var and messages_var attributes and pointing them to the appropriate variable arrays.

{% partial name:'form' %}
    {% contest_form messages_var:"some_contest.messages" rules_var:"some_contest.rules" %}
      <h3>My Entry Form</h3>
      <p><label>Name:</label> <input type="text" name="registration[name]"></p>
      <p><label>Email:</label> <input type="text" name="registration[email]"></p>
      <p><label>Mood:</label> <input type="text" name="submission[mood]"></p>
      <p><label>Before Photo:</label> {% image_upload_field name:'submission[photo]' %}</p>
      <p><input type="submit" value="Submit"></p>
    {% endcontest_form %}
{% endpartial %}

<script>
var some_contest = {
    "rules" :{
        'registration[name]': {required: true},
        'registration[email]': {required: true, email:true},
        'submission[mood]': {required: true},
        'submission[before_photo]': {required: true}
    }
};
</script>

Completed Example

Here's a basic example of a configured contest_form shown within a configured photo contest. Note that contest_form must be enclosed in a partial so we can call it from within our contest feature block. Every contest feature block requires an entry form (configured as a contest_form), a success form, and a contest_form_link to call the form and either display it inline or in a dialog box. The contest_form can be located outside the contest feature block as long as the partial that contains it is rendered inside the block.

{% partial name:'my-entry-form' %}
    {% contest_form rules_var:"rules" %}
      <h3>My Entry Form</h3>
      <p><label>Name:</label> <input type="text" name="registration[name]"></p>
      <p><label>Email:</label> <input type="text" name="registration[email]"></p>
      <p><label>Mood:</label> <input type="text" name="submission[mood]"></p>
      <p><label>Before Photo:</label> {% image_upload_field name:'submission[photo]' %}</p>
      <p><input type="submit" value="Submit"></p>
    {% endcontest_form %}
  {% endpartial %}

  {% partial name:'my-success' %}
    <h3>Thank you for your submission!</h3>
    <p>Your Phrase: {{ contest_entry.submission.mood }}</p>
    <p>Your Before Photo: {{contest_entry.submission.photo | img_tag}}</p>
  {% endpartial %}
{% contest %}
 <p> {% contest_form_link entry_form_partial:"my-entry-form" success_partial:"my-success" %}Submit Your Entry{% endcontest_form_link %}</p>
{% endcontest %}

<script>
var rules = {
        'registration[name]': {required: true},
        'registration[email]': {required: true, email:true},
        'submission[mood]': {required: true},
        'submission[before_photo]': {required: true}
    }
</script>