Support

Home Forums Event Espresso Premium Identifying registration form fields for targetting via CSS

Identifying registration form fields for targetting via CSS

Posted: January 6, 2018 at 11:11 am

Viewing 6 reply threads


cvg

January 6, 2018 at 11:11 am

I’m wanting to target a specific question that I have created as part of the registration form questions so that I can highlight it using CSS, in this case, to highlight a “click here to read T&C’s” question.

Is there a way to use the “Question Label (admin-only)” value from each question and add this to the class for each field displayed on the form?

For example, the following question has this markup:

<div id=”ee_reg_qstn-6-city-input-dv” class=”ee-reg-qstn ee-reg-qstn-city-input-dv”>
<label id=”ee_reg_qstn-6-city-lbl” class=”ee-reg-qstn” style=”” for=”ee_reg_qstn[6][city]”>Town/City</label>
<input type=”text” name=”ee_reg_qstn[6][city]” id=”ee_reg_qstn-6-city” class=”ee-reg-qstn ee-reg-qstn-city ee-has-value” value=”” style=”” aria-invalid=”false”>
</div>

If the question label could be applied to the container, it would read:

<div id=”ee_reg_qstn-6-city-input-dv” class=”ee-reg-qstn ee-reg-qstn-city-input-dv unique-question-label-value”>

As these are unique, that would be a great way to allow for targeting questions via their containing div class?


Josh

  • Support Staff

January 8, 2018 at 1:39 pm

Hi there,

The markup isn’t easily changed, but you can target questions via their containing div class if you know the question ID. For example if the question ID is 52 your CSS will look like this:

.ee-reg-qstn-52-input-dv {
  /* style rules go here */
}


cvg

January 8, 2018 at 1:54 pm

Thanks Josh, I was kind of hoping that wouldn’t be the only way to do it as I have got about 60 events to add with plenty more to add in the future.

Would it be at all possible to point me in the direction of where I might be able to use the “question label” within the markup so that I might be able to achieve this?

It’s to allow me to add some CSS to style the container for a ‘I agree to the T&Cs’ type question as I need to the draw the eye to it within the primary set of questions? Or could you recommend a way of achieving this?


Josh

  • Support Staff

January 8, 2018 at 2:11 pm

You can apply CSS to style the container for an “I agree to the T&Cs’s” type question by usin

.ee-reg-qstn-xx-input-dv {
  /* style rules go here */
}

In the above, change xx to match the T&C question’s ID. If you need a more concrete example, can you post a link to an example event?


cvg

January 10, 2018 at 2:54 am

Understand that Josh, but given that I have currently got 88 events listed and more to add in time, I think this is an overkill approach.

Would this be a benefit to a future release of the plugin at all? Personally, if I could identify fields like this for styling in a singular manner, I think that would be of benefit to many users.


Tony

  • Support Staff

January 10, 2018 at 3:27 am

I’m not sure I understand why 88 events make a difference here? The above sounds like a simpler solution to the one you are suggesting unless I’m misunderstanding.

Do you have a different T&C question for each of those events?

Josh’s example is using the question ID in the selector, so .ee-reg-qstn-23-input-dv applies to the question that has an ID of 23, that ID doesn’t change on any of your events as it’s the same question.

We can add a feature request ticket an investigate adding additional classess to the questions but I want to make sure I understand the problem before doing so.


cvg

January 10, 2018 at 8:17 am

Tony,
Apologies, you’re absolutely correct, sorry Josh I misread your earlier response regarding the class. I’ve applied that and its worked beautifully.

Thank you Josh for your assistance and Tony to clarifying.

Viewing 6 reply threads

The support post ‘Identifying registration form fields for targetting via CSS’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso