topic Re: Adding Custom Class and Custom ID to form module in CMS Development

Adding Custom Class and Custom ID to form module

JCrowNM — Thu, 19 Oct 2023 22:15:21 GMT

There is a module that was developed for my site that includes a form called form-with-text. I added CSS to the module to allign radio buttons horizontally:

#radioGroup .wrap { display: inline-block; } #radioGroup label { display: block; text-align: center; margin: 0 0.2em; } #radioGroup input[type="radio"] { display: block; margin: 0.5em auto; }

In the page editor I added the Custom Class and Custom ID as so:

It still isn't working. Can anyone tell me what I am doing wrong?

Thanks,

Jonathan

Re: Adding Custom Class and Custom ID to form module

kvlschaefer — Fri, 20 Oct 2023 12:32:14 GMT

Hi @JCrowNM,

Thanks for reaching out!

I understand that you would add CSS to align radio buttons horizontally on a custom module, however, it's not working, correct?

Are you seeing an error message or are the radio buttons not aligning as expected? Do you have any screenshots and/or links to the webpage with the module so we can take a look?

Thank you!

Best,

Kristen

Re: Adding Custom Class and Custom ID to form module

JCrowNM — Fri, 20 Oct 2023 18:23:25 GMT

Hi Kristen,

Thanks for the response. No, there is no error message, it is just that the radio buttons appear vertically rather than horizontally.

The page is at https://info.newmeridiancorp.org/njsba-contact-us

I have tried adding the CSS to the module HTML and forcing it via !important.

I have tried calling the class and id from the page fields (shown in screenshot above).

I can manipulate the code in the Chrome DevTools to get it to look like this:

Which is the direction I want to go in instead of this:

But I just need to get the CSS to override whatever the defaults are for this specific page or module.

Thanks,

Jonathan

Re: Adding Custom Class and Custom ID to form module

dennisedson — Fri, 20 Oct 2023 18:47:55 GMT

@JCrowNM , it appears you got it working! If you are still seeing the vertical version, make sure to bust the cache

Re: Adding Custom Class and Custom ID to form module

JCrowNM — Fri, 20 Oct 2023 18:48:58 GMT

Thanks. I did. I would still like to know how to use the Custom Class and Custom ID fields in the page editor, but for now at least I have it working in the straight up CSS.

Re: Adding Custom Class and Custom ID to form module

dennisedson — Fri, 20 Oct 2023 19:06:01 GMT

Can you post the module code? When you apply that custom class, do you see it in the dev inspector?

Re: Adding Custom Class and Custom ID to form module

JCrowNM — Fri, 20 Oct 2023 19:19:30 GMT

Here is the module code:

<div{% if module.custom_id %} id="{{ module.custom_id }}"{% else %} id="{{ module.hero_content.heading|striptags|lower|replace(' ','-') }}"{% endif %} class="form-with-text-wrapper {{'form-with-text-wrapper-'~name}} {{ module.custom_class }}"> <div class="container"> {# BACKGROUND OPTIONS #} <div class="bg-type"> {% if module.style.hero_background_type.background_type =='img' %} <div class="img"> <img src="{{ module.style.hero_background_type.image_field.src }}" alt="{{ module.hero_background_type.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}> </div> {% elif module.style.hero_background_type.background_type =='color' %} <div class="clr"></div> {% endif %} </div> {# CONTENT #} <div class="column-group"> {# CONTENT column#} <div class="content-column"> <div class="column-inner"> {% if module.hero_content.heading_type =='h1' %} <h1 class="title">{{ module.hero_content.heading }}</h1> {% elif module.hero_content.heading_type =='h2' %} <h2 class="title">{{ module.hero_content.heading }}</h2> {% elif module.hero_content.heading_type =='h3' %} <h3 class="title">{{ module.hero_content.heading }}</h3> {% elif module.hero_content.heading_type =='h4' %} <h4 class="title">{{ module.hero_content.heading }}</h4> {% endif %} <div class="description">{{ module.hero_content.content }}</div> </div> </div> {# form column#} <div class="form-column"> <div class="form-inner"> {% if module.hero_image.check_for_form_title %} <h3 class="form_title">{{ module.hero_image.form_title }}</h3> {% endif %} {% form form_to_use="{{ module.hero_image.form_field.form_id }}" response_response_type="{{ module.hero_image.form_field.response_type }}" response_message="{{ module.hero_image.form_field.message }}" response_redirect_id="{{ module.hero_image.form_field.redirect_id }}" response_redirect_url="{{module.hero_image.form_field.redirect_url}}" gotowebinar_webinar_key="{{ module.hero_image.form_field.gotowebinar_webinar_key }}" %} </div> </div> </div> </div> </div> {#CUSTOM CSS#} {% require_css %} <style> /* Align radio buttons horizontally */ form .inputs-list { display: flex!important; list-style: none!important; margin: 5px!important; padding: 5px!important; } form .inputs-list>li { padding: 15px!important; display: flex!important; margin: .7rem 0!important; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper { position:relative;overflow:hidden; {{ module.style.section_spacing.spacing.css }} } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type .clr { width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1; background:rgba({{ module.style.hero_background_type.color_field.color|convert_rgb }},{{ module.style.hero_background_type.color_field.opacity~'%' }}); } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type{background-size:cover;background-repeat:no-repeat;background-position:center center} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type img, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .bg-type .video{position:absolute;top:0;left:0;z-index:-1;width:100%;min-width:100%;min-height:100%;height:100%;-o-object-fit:cover;object-fit:cover} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin:0 -20px} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner{padding:40px} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner .form-title{display:none} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-form-field label{font-size:16px} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input{font-size:16px;padding:10px;background:#fff;border-radius:0;border:2px solid #d1dacc;margin-right:15px;width:100%;display:block;-webkit-box-sizing:border-box;box-sizing:border-box} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input:focus, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input:hover{outline:0} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form input.hs-button{min-width:160px;font-size:16px;line-height:22px;color:#344263;background:#81d8fd;padding:10px 50px;border:none;cursor:pointer;border:2px solid #81d8fd} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form ul.hs-error-msgs{padding:0;list-style:none;margin-top:0} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .submitted-message{ color: {{ module.style.form_settings.form_success_message_settings.title_primary_color.color }}; {{ module.style.form_settings.form_success_message_settings.title_alignment_field_1.css }}; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs_error_rollup { display:none; } {% if module.style.check_to_set_container_width %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .container { max-width:{{ module.style.container_width }}px;margin:0 auto; } {% endif %} {% if module.image_position =='left' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding-bottom:30px} {% elif module.image_position =='right' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding-bottom:30px} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2} {% elif module.image_position =='text_top' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:850px;margin-right:auto;margin-left:auto} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column{padding-bottom:30px} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form fieldset{max-width:100%} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .actions{text-align:center} {% endif %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .title { margin-top:0;margin-bottom:15px; {{ module.style.heading_settings.textalignment_field.css }}; color:{{ module.style.heading_settings.color_field_2.color }}; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h2, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h3, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h4, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h5, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description h6{ margin:0 0 15px; {{ module.style.content_settings.textalignment_field.css }}; color:{{ module.style.content_settings.color_field_2.color }}; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description p, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ul li, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ol li{ {{ module.style.content_settings.textalignment_field.css }}; color:{{ module.style.content_settings.color_field_2.color }}; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ul li, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ol li{ margin-bottom:10px; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description p:last-child, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ul li:last-child, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .description ol li:last-child{ margin-bottom:0; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .btn-grp{ {{ module.style.button_settings.button_alignment.css }} } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column .form_title{ margin:0 0 30px; color:{{ module.style.form_settings.form_title_settings.title_primary_color.color }}; {{ module.style.form_settings.form_title_settings.title_alignment_field_1.css }} } {% if module.style.form_settings.form_styling.form_background_type =='bg_clr' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner { background:rgba({{ module.style.form_settings.form_styling.color_field_1.color|convert_rgb }},{{ module.style.form_settings.form_styling.color_field_1.opacity~'%' }}); } {% elif module.style.form_settings.form_styling.form_background_type =='transparent' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner { background:transparent;padding:0; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input { border-color:#fff; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .submitted-message { color:#fff; } {% endif %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-form-field label, .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .hs-input::placeholder { color:{{ module.style.form_settings.form_text_settings.content_color.color }}; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form .actions{ margin-right:8px;{{ module.style.form_settings.button_settings.button_alignment.css }}; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form label.hs-error-msg{ color:#f00;font-size:14px; } /*BUTTON HOVER*/ .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form input.hs-button { background:rgba({{ module.style.form_settings.button_settings.background_color_.color|convert_rgb }},{{ module.style.form_settings.button_settings.background_color_.opacity~'%' }}); color:{{ module.style.form_settings.button_settings.text_color.color }}; border:2px solid {{ module.style.form_settings.button_settings.border_color_.color }}; border-radius:{{ module.style.form_settings.button_settings.border_radius }}px; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .form-column .form-inner form input.hs-button:hover{ background:rgba({{ module.style.form_settings.button_settings.background_color.color|convert_rgb }},{{ module.style.form_settings.button_settings.background_color.opacity~'%' }}); color:{{ module.style.form_settings.button_settings.hover_text_color.color }}; border:2px solid {{ module.style.form_settings.button_settings.border_color.color }}; } /*MOBILES STYLE*/ @media(max-width:1024px){ .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper{ {{ module.style.section_spacing.ipad_spacing.css }}; } } @media(max-width:767px){ .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper{ {{ module.style.section_spacing.mobile.css }} } {% if module.image_position =='left' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column { order:1;padding-bottom:30px; } {% elif module.image_position =='right' %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column { order:1;padding-bottom:30px; } {% endif %} .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column { flex:0 0 100%;width:100%; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .content-column br { display:none; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .column-group .form-column { flex:0 0 100%;width:100%; } .{{'form-with-text-wrapper-'~name}}.form-with-text-wrapper .content-column .contact-button { min-width:120px; } } </style> {% end_require_css %}

When I apply the custom class I don't see it in the inspector. I was able to just make everything !important and it worked, but it would be nice to have another class that can be referenced from the page editor.

Thanks,

Jonathan

Re: Adding Custom Class and Custom ID to form module

dennisedson — Fri, 20 Oct 2023 19:47:20 GMT

Ok. So that if statement in the beginning must not be working properly.

In the module again, look for the text field with the label Custom ID. We need to make sure that the name is the same as in the if statement.

It should be custom_id

If it is not, change the name of it to be that.

If you are looking in the design manager, you can click on the field name in the right sidebar and have an option to copy the HubL variable value. Clicking on that and pasting it somewhere should return this: {{ module.custom_id }}

Re: Adding Custom Class and Custom ID to form module

JCrowNM — Fri, 20 Oct 2023 19:50:58 GMT

I copied the variable and got {{ module.custom_id }}

I did the same for Custom Class and got : {{ module.custom_class }}

Re: Adding Custom Class and Custom ID to form module

dennisedson — Tue, 24 Oct 2023 14:48:54 GMT

@Anton , do you see anything i am missing here?

my next step would be to clone the module put those two variables outside to print to screen. the class one is not enclosed in the if statement so it should be printing.

Re: Adding Custom Class and Custom ID to form module

JCrowNM — Mon, 27 Nov 2023 19:23:32 GMT

I tried creating a class in both the module.html and then the module.css:

.fmtest { color: red!important; font-size: 100px!important; padding: 100px!important; }

I then tried adding the custom class ".fmtest" and "fmtest" to the Custom Class field on the Form With Text page editor.

Nothing changed.