CMS Development

mchomicki
Participant | Diamond Partner
Participant | Diamond Partner

Submit form style editable

SOLVE

Hello everyone, I have a custom module created, using the hubspot Form module, now what I would like to do, is give the option of selecting the background color of the submit button in the form, I've tried adding a color selector to the module, but it seems I am not able to use this variable withing the module CSS part.

Thanks !! 

0 Upvotes
1 Accepted solution
Brownstephen101
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Submit form style editable

SOLVE

@mchomicki Since you can't access module variables in the CSS, you will need to put the CSS in the HTML of the module, wrapped in a {% require_css %} wrapper, for example:

This is the CSS required for a color picker named "button_color" if you want to include Opacity.

 

 

<div id="{{ name }}" class="module-html">
/* All your module html goes here */
</div>

{% require_css%}
<style>
#{{ name }} .form .hs-button {
   border-color: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
   background: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
}
</style>
{% end_require_css %}

 

 

 
Note: You will also want to use {{ name }} as the ID of the module wrapper and then reference that in your css so that if they choose different options for multiple modules on the same page, the options apply correctly to the corresponding module.

View solution in original post

4 Replies 4
Brownstephen101
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Submit form style editable

SOLVE

@mchomicki Since you can't access module variables in the CSS, you will need to put the CSS in the HTML of the module, wrapped in a {% require_css %} wrapper, for example:

This is the CSS required for a color picker named "button_color" if you want to include Opacity.

 

 

<div id="{{ name }}" class="module-html">
/* All your module html goes here */
</div>

{% require_css%}
<style>
#{{ name }} .form .hs-button {
   border-color: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
   background: rgba({{ module.button_color.color|convert_rgb }}, {{ module.button_color.opacity / 100 }});
}
</style>
{% end_require_css %}

 

 

 
Note: You will also want to use {{ name }} as the ID of the module wrapper and then reference that in your css so that if they choose different options for multiple modules on the same page, the options apply correctly to the corresponding module.

mchomicki
Participant | Diamond Partner
Participant | Diamond Partner

Submit form style editable

SOLVE

@Brownstephen101 worked like a charm,

much appreciated!!

 

webdew
Guide | Diamond Partner
Guide | Diamond Partner

Submit form style editable

SOLVE

Hi @mchomicki ,

Create one choice field for color like this

webdew_0-1643026722402.png

 


Copy snippet and paste it to wherever you required like for border, background etc as shown in below snippet.

form input[type=submit], form .hs-button{

  • border-style: solid;
  •    border-width: 2px;
  •    border-color: {{ module.choose_submit_color }};
  • background:{{ module.choose_submit_color }};

 

}

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

0 Upvotes
mchomicki
Participant | Diamond Partner
Participant | Diamond Partner

Submit form style editable

SOLVE

Hello @webdew 

Thanks for your reply!

Yes, tired that already, but apparently it is not possible to get the value from the color picker and use it in the CSS, but only on the hubl + HTML section, and the value would come out as empty, as you cans see in the pic, trying to find a way around it 

Tanks! 

0 Upvotes