Submit form style editable

[mchomicki]

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 !! 

[Brownstephen101 · Accepted solution]

@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]

@Brownstephen101 worked like a charm,

much appreciated!!

[webdew]

Hi @mchomicki ,

Create one choice field for color like this

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.

[mchomicki]

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!