Display error messages in A+ form

Hello there,

I would like to implement error messages in my Appointments form.

As the user is supposed to strictly follow the steps of booking, if he fills Step 2 first, an error message should be displayed to remind him of filling Step 1 first, etc.

Thanks again,

Pierre

  • Predrag Dubajic

    Hey Pierre,

    Hope you're doing well today :slight_smile:

    Could you tell me how does your setup currently looks, which shortcodes are you using on appointments page?

    What you can do is make the fields required, let's say your shortcode setup looks like this:

    [app_services]
    [app_service_providers]
    [app_monthly_schedule]
    [app_pagination step="2" month="1"]
    [app_login]
    [app_confirmation]

    You can now force selection of service first by adding require_service="1" attribute to provider shortcode and then add require_provider="1" to schedule shortcode so it requires provider to be selected.
    Complete shortcode will in that case look like this:

    [app_services]
    [app_service_providers require_service="1"]
    [app_monthly_schedule require_provider="1"]
    [app_pagination step="2" month="1"]
    [app_login]
    [app_confirmation]

    Let us know if this would work for you :slight_smile:

    Best regards,
    Predrag

  • Thibault

    Hi Pedrag,

    Thanks a lot for your pormpt answer. I opened access to your team in order you to check what the shortcodes are.

    Find below my booking system :

    <table>
    <tbody>

    <tr>
    <td class="provider_locations_block">[app_provider_locations select="#1 Choisissez un lieu" show="VALIDER VOTRE LIEU"]</td>
    </tr>

    <tr>
    <td class="service_providers_block">[app_service_providers select="#2 Choisissez votre barbier" show="VALIDER VOTRE BARBIER" empty_option="Choisissez votre barbier"]
    </td>
    </tr>

    <tr>
    <td class="services_block">[app_services select="#3 Choisissez votre service" show="VALIDER VOTRE SERVICE"]
    </td>
    </tr>

    <tr>
    <td class="monthly_schedule_block" colspan="2">
    <div class="monthly_schedule_title">#4 Choisissez votre date</div>
    [app_monthly_schedule]
    </td>
    </tr>

    <tr>
    <td class="schedule_pagination" colspan="2">[app_pagination week="1"]
    </td>
    </tr>

    <tr>
    <td class="schedule_login" colspan="2">[app_login]
    </td>
    </tr>

    <tr>
    <td class="calendar_confirmation" colspan="2">
    [app_confirmation button_text="CONFIRMEZ VOTRE RENDEZ-VOUS" confirm_text="RENDEZ-VOUS ENREGISTRÉ. MERCI!" warning_text="Remplissez les champs requis." phone="Numéro de téléphone :" email="Adress email :" name="Nom et prénom :" title="COMPLÉTEZ LES INFORMATIONS SUIVANTES ET CONFIRMEZ VOTRE RENDEZ-VOUS"]
    </td>
    </tr>

    </tbody>
    </table>

  • Predrag Dubajic

    Hi Pierre,

    Ok, so basically what you would need to do to create a setup as explained in my previous comment is simply change your app_service_provider shortcode to this:
    [app_service_providers select="#2 Choisissez votre barbier" show="VALIDER VOTRE BARBIER" empty_option="Choisissez votre barbier" require_service="1"]

    And your app_monthly_scedule to this:
    [app_monthly_schedule require_provider="1"]

    That should be it, now provider will require service to be selected and date picker will require provider.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Pierre!

    I accessed your site and went through /booking process and it seems to be working fine. With "require_..." parameters plugin forces user to select values from drop-down list before letting him/her to proceed and I think it's working fine on your site now.

    However, I may be missing something here so could you please try going through booking process once again yourself and then get back to me with description of each step on what should and what shouldn't be visible/happening during that step?

    Please advise!
    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.