Order of input fields

I am using Subscribe by email, and I want the input fields to be in different order. Instead of email address and name, the other way around.

I managed to do the same for e-Newsletter...It may be more complicated than with e-Newsletter, because Naam is a "custom field" that I added.

  • Nahid
    • Tech Support

    Hey mpress !
    Hope you are having a great day!

    Please try adding the following Custom CSS to re-order the mentioned input fields:

    form#sbe-follow-subscribe-form {
        display: flex;
        flex-direction: column;
    }
    
    form#sbe-follow-subscribe-form > br {
        display: none;
    }
    
    #sbe-follow-wrap p {
        order: 1;
    }
    
    .sbe-follow-form-field-title:nth-of-type(1) {
        order: 4;
    }
    
    input.sbe-follow-form-field.sbe-follow-email-field {
        order: 5;
    }
    
    .sbe-follow-form-field-title:nth-of-type(2) {
        order: 2;
    }
    
    input.sbe-follow-form-field.sbe-follow-naam-field.sbe-form-field {
        order: 3;
    }
    
    .sbe-follow-form-submit-container {
        order: 6;
    }

    You can add the Custom CSS in your WordPress Dashboard->Appearance->Customize->Additional CSS. Alternatively, you can also add it in your theme's (most preferably, child theme's) stylesheet or through a Custom CSS plugin.

    Hope this helps. Please let us know if this works for you. Thanks!

    Kind regards,
    Nahid

  • mpress
    • Code Wrangler

    Yes, this works great. Thanks.

    But... another question...
    I am looking into the GDPR requirements.
    When will this be incorporated in the Subscribe by email plugin?

    For now I have added a checkbox as custom field: "Privacy statement gelezen en akkoord" (i.e. privacy statement read and accepted).
    This is now shown at the top.

    Couple of questions now:
    1. how to include a link in this Follow window? (i.e. a link to the privacy statement)
    2. how to place this checkbox at the bottom?
    3. how to use placeholders for the email and naam fields, and remove the labels?

    Hope to hear from you soon.

  • Dimitris
    • Support Star

    Hello there mpress,

    hope you're doing good today! :slight_smile:

    Yes, this works great. Thanks.

    I'm glad that above workaround worked well for you!

    1. how to include a link in this Follow window? (i.e. a link to the privacy statement)

    This would need some custom work. The easiest way would be using some jQuery. You can add your custom snippets using this handy plugin: https://wordpress.org/plugins/custom-css-js/

    For this case, you could use the append method like this:

    (function($) {
      $('#sbe-follow-subscribe-form > label').append('<a href="#">LINK</a>');
    })( jQuery );

    2. how to place this checkbox at the bottom?

    Please try adding the following CSS snippet, this should do the trick.

    #sbe-follow-subscribe-form > label + span.sbe-follow-required {
      order: 5;
    }
    #sbe-follow-subscribe-form > label {
      order: 6;
    }

    3. how to use placeholders for the email and naam fields, and remove the labels?

    Again jQuery can be helpful here, using the attr method.

    (function($) {
      $('input.sbe-follow-naam-field').attr('placeholder', 'your text');
      $('input.sbe-follow-email-field').attr('placeholder', 'your text');
    })( jQuery );

    and a little CSS to hide default labels:

    .sbe-follow-form-field-title {
      display: none;
    }

    Please keep in mind that we're keen on having separate threads per each issue, so if you have more queries, please do reach us in our live chat support or create separate threads for these. :slight_smile:

    Warm regards,
    Dimitris

    • mpress
      • Code Wrangler

      2nd message. Dimitris
      Just saw your code needed to be added to another code from plugin :slight_smile:

      So, the placeholder is working.

      Privacy statement link is now available, but it is not linked to the text from the checkbox.

      How to get checkbox text linked to the Privacy Statement page?

      Cheers!

  • mpress
    • Code Wrangler

    Hi Dimitris ,

    Just tried to add jquery codes to the Custom Css-js/ plugin with no success.
    Added as this:

    (function($) {
      $('#sbe-follow-subscribe-form > label').append('<a href="https://parochie.rkparochies.nl/privacy-statement">Privacy statement</a>');
    })( jQuery );
    
    (function($) {
      $('input.sbe-follow-naam-field').attr('placeholder', 'Naam');
      $('input.sbe-follow-email-field').attr('placeholder', 'E-mailadres');
    })( jQuery );

    Could you help further on this? Also, just tried to get help by the LChat, but no one iwth knowledge for jquery's :slight_smile:

    Thanks

  • Dimitris
    • Support Star

    Hey there, appreciate the granted access! :slight_smile:

    How to get checkbox text linked to the Privacy Statement page?

    I just went in and replaced

    (function($) {
      $('#sbe-follow-subscribe-form > label').append('<a href="https://parochie.rkparochies.nl/privacy-statement">Privacy statement</a>');
    })( jQuery );

    with

    (function($) {
      $('#sbe-follow-subscribe-form > label').html('<input type="checkbox" class="sbe-form-field" name="sbe_extra_field_privacy-statement-gelezen-en-akkoord"> <a href="https://parochie.rkparochies.nl/privacy-statement" target="_blank">Privacy statement</a> gelezen en akkoord');
    })( jQuery );

    :wink:

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.