How to implement radiobuttons field on frontend registration form?

Question

I want to add a question to a frontend registration form. The radiobuttons are just 'Yes' or 'No'.

I've created a radiobutton field and added that to users > fields.

If I add this option to the form, new registrations are not submitted. The page reloads and doesn't redirect to the confirmation page.

Any idea what's wrong with my form?

<legend>Are you a Beekeeper?</legend>
<input type="hidden" name="fields[areYouBeekeeper]" value="">
{% for option in entry.areYouBeekeeper.options %}
    <input id="isBeekeeper{{ option.label }}" type="radio" name="fields[areYouBeekeeper][]" 
    {%- if account is defined %}value="{{ option.label }}"{% endif -%}>
    <label for="isBeekeeper{{ option.label }}">{{ option.value }}</label>
{% endfor %}

Here's the complete form template.

<form method="post" accept-charset="UTF-8">
    {{ getCsrfInput() }}
    <input type="hidden" name="action" value="users/saveUser">
    <input type="hidden" name="redirect" value="{{ siteUrl }}registration/confirmation">

    {% macro errorList(errors) %}
        {% if errors %}
            <ul class="errors" style="list-style: none;">
                {% for error in errors %}
                    <li style="color:red;">{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}

    <label>Username
        <input id="username" type="text" placeholder="gebruikersnaam" name="username"
        {%- if account is defined %} value="{{ account.username }}"{% endif -%}>
    </label>
    {% if account is defined %}{{ errorList(account.getErrors('username')) }}{% endif %}

    <label>Email
        <input id="email" type="text" placeholder="somebody@example.com" name="email"
        {%- if account is defined %} value="{{ account.email }}"{% endif %}>
    </label>
    {% if account is defined %}{{ errorList(account.getErrors('email')) }}{% endif %}

    <label>Password
        <input id="password" type="password" placeholder="password" name="password">
    </label>
    {% if account is defined %}{{ errorList(account.getErrors('password')) }}{% endif %}

    <label>First name
        <input id="firstName" type="text" placeholder="First name" name="firstName"
        {%- if account is defined %} value="{{ account.firstName }}"{% endif -%}>
    </label>
    {% if account is defined %}{{ errorList(account.getErrors('firstName')) }}{% endif %}

    <label>Last name
        <input id="lastName" type="text" placeholder="Last name" name="lastName"
        {%- if account is defined %} value="{{ account.lastName }}"{% endif -%}>
    </label>
    {% if account is defined %}{{ errorList(account.getErrors('lastName')) }}{% endif %}

    <legend>Are you a Beekeeper?</legend>
    <input type="hidden" name="fields[areYouBeekeeper]" value="">
    {% for option in entry.areYouBeekeeper.options %}
        <input id="isBeekeeper{{ option.label }}" type="radio" name="fields[areYouBeekeeper][]" 
        {%- if account is defined %}value="{{ option.label }}"{% endif -%}>
        <label for="isBeekeeper{{ option.label }}">{{ option.value }}</label>
    {% endfor %}

    <input type="submit" class="button expanded" value="Registreer">

</form>

I think the problem is with the for loop. I'm trying to output the radio options with a for loop on an entry, but it's actually not an entry. No idea why I do get the options anyway. I've managed to get this working with the following code:

<input type="hidden" name="fields[areYouBeekeeper]" value="">

<label><input type="radio" value="yes" name="fields[areYouBeekeeper]" {%- if account is defined %}value="{{ account.areYouBeekeeper }}"{% endif -%}>Yes</label>
<label><input type="radio" value="no" name="fields[areYouBeekeeper]" {%- if account is defined %}value="{{ account.areYouBeekeeper }}"{% endif -%}>No</label>

Answer 1

Because radio inputs are a "single value field", meaning that when the form submits, only one value actually goes through, you don't need the extra [] array brackets at the end of each fields[] array. In fact, you don't even need the hidden field above it. That setup would work for checkboxes, where any number of values could be submitted. A great reference for how to format HTML form fields correctly to submit to Craft can be found on this StraightUpCraft article.

Your code should look like this:

<label>
    <input type="radio" value="yes" name="fields[areYouBeekeeper]" {%- if account is defined %}value="{{ account.areYouBeekeeper }}"{% endif -%}>Yes
</label>
<label>
    <input type="radio" value="no" name="fields[areYouBeekeeper]" {%- if account is defined %}value="{{ account.areYouBeekeeper }}"{% endif -%}>No
</label>

And the input values yes and no need to be exactly the same (lowercase in this case) as they are in the Values column of the respective custom radio field created in the CMS.