1

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>
  • 1
    It might even be the solution but the if statement inside of your radio button should be in the <input> tag outside of your for loop and should be be: {%- if account is defined %}value="{{ account.areYouBeeKeeper }}"{% endif -%} Another tip is checking the craft logs. When making front end forms the errors in there are really helpfull and show you what is going wrong. – Justin Dekkers Mar 15 '17 at 9:29
  • Hi Justin, the if statement is on another line, but is already in the input tag. – dajo Mar 16 '17 at 9:20
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.