AnsweredAssumed Answered

Checkbox field not appearing correctly on Marketo form/landing page

Question asked by Nina Valtcheva on Apr 21, 2017
Latest reply on Apr 23, 2017 by Grégoire Michel

Like • Show 0 Likes0
Comment • 5

I am experiencing an issue with displaying a new field I created to show correctly on a Marketo form embedded on a Marketo landing page.

The goal is to provide people an option to register for one or multiple webinar sessions.

This is the landing page: https://pages.datastax.com/Customer-First-Webinar-Series.html

As you can see, the Session Time field is not displaying correctly with no text showing and only checkboxes.

Here is how I set up the field on the form in Marketo:

When I preview the form, it looks ok:

Any ideas why it's not showing up correctly on the landing page?

Grégoire Michel Apr 21, 2017 10:10 AM

Correct Answer

Hi Nina,

This is a pure CSS issue. you have a style that hides all labels.

label {
display: none !important;
}

The way your form is build makes it difficult to remove (all form labels will reappear).

You could have some create some additional styles for you for .mktoCheckboxList label, starting with a display: bloc

-Greg

See the reply in context

No one else had this question

Outcomes

Devraj Grewal

Apr 21, 2017 9:49 AM

Nina,

Your form on the landing page does not display the field labels on any of the fields, that is why "First Name" is available as hint text in the field itself and not as a label to the left as in your previewed form. Those checkbox fields do not have their field labels either. I would play around with the field label positioning for each of those fields.

1 person found this helpful

Actions

Nina Valtcheva @ Devraj Grewal on Apr 21, 2017 11:51 AM

Thanks Devraj. I compared how all the other fields' labels were set up to make sure this Session Time field is set up the same way and also and tried expanding the field width to 350 so they are all the same but nothing that I do seems to work.

Actions

Grégoire Michel Apr 21, 2017 10:10 AM

Hi Nina,

This is a pure CSS issue. you have a style that hides all labels.

label {
display: none !important;
}

The way your form is build makes it difficult to remove (all form labels will reappear).

You could have some create some additional styles for you for .mktoCheckboxList label, starting with a display: bloc

-Greg

1 person found this helpful

Actions

Nina Valtcheva @ Grégoire Michel on Apr 21, 2017 11:47 AM

Thanks Greg. I am not familiar with CSS and we no longer have a technical resource who would be able to help create additional styles. Is this something that needs to be edited on the landing page template that is we are using with this form? Any help is greatly appreciated! I'm trying to get this fixed and live today.

Actions

Grégoire Michel @ Nina Valtcheva on Apr 23, 2017 9:08 AM

Hi Nina,

It can be edited at the form level or at the template level. Better do it at template level so that it applies to all landing pages using the same template immediately (provided you re-approve them). Editing at the form level can be a quick fix.

But you will need someone who knows CSS, though, as enabling labels only for checkboxes fields and not for all other will require some regular level of skills.

-Greg

Actions

5 Replies

Devraj Grewal Apr 21, 2017 9:49 AM
Mark Correct
Correct Answer
Nina,

Your form on the landing page does not display the field labels on any of the fields, that is why "First Name" is available as hint text in the field itself and not as a label to the left as in your previewed form. Those checkbox fields do not have their field labels either. I would play around with the field label positioning for each of those fields.
1 person found this helpful
Like • Show 1 Like1
Actions
- Nina Valtcheva @ Devraj Grewal on Apr 21, 2017 11:51 AM
  Mark Correct
  Correct Answer
  Thanks Devraj. I compared how all the other fields' labels were set up to make sure this Session Time field is set up the same way and also and tried expanding the field width to 350 so they are all the same but nothing that I do seems to work.
  Like • Show 0 Likes0
  Actions
Grégoire Michel Apr 21, 2017 10:10 AM
Unmark Correct
Correct Answer
Hi Nina,

This is a pure CSS issue. you have a style that hides all labels.
label {
display: none !important;
}
The way your form is build makes it difficult to remove (all form labels will reappear).

You could have some create some additional styles for you for .mktoCheckboxList label, starting with a display: bloc

-Greg
1 person found this helpful
Like • Show 1 Like1
Actions
- Nina Valtcheva @ Grégoire Michel on Apr 21, 2017 11:47 AM
  Mark Correct
  Correct Answer
  Thanks Greg. I am not familiar with CSS and we no longer have a technical resource who would be able to help create additional styles. Is this something that needs to be edited on the landing page template that is we are using with this form? Any help is greatly appreciated! I'm trying to get this fixed and live today.
  Like • Show 0 Likes0
  Actions
  - Grégoire Michel @ Nina Valtcheva on Apr 23, 2017 9:08 AM
    Mark Correct
    Correct Answer
    Hi Nina,
    
    It can be edited at the form level or at the template level. Better do it at template level so that it applies to all landing pages using the same template immediately (provided you re-approve them). Editing at the form level can be a quick fix.
    
    But you will need someone who knows CSS, though, as enabling labels only for checkboxes fields and not for all other will require some regular level of skills.
    
    -Greg
    Like • Show 0 Likes0
    Actions

Checkbox field not appearing correctly on Marketo form/landing page

Outcomes

Related Content

Recommended Content