CMS Development

asiaferguson
Contributor

Custom Form Button

SOLVE

Hi -

I'm using an embedded form on this page: https://tactics.30mpc.com/charly-johnsons-cold-email-drip-templates and I want to add custom styles the submit button only. 

The look they want for the button is similar to the 2 buttons down the page: pill shaped, black border, and black text. The rest of the form is fine how it is. 

Is this even possible?


 

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Custom Form Button

SOLVE

Hi @asiaferguson

of course it's possible. 

You've got several options. 

 

1. modify the embed code

Let's pretend that this is your default embed code

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "xxxxxx-xxxxxx-xxxxxx-xxxxxxx-xxxxxxx"
  });
</script>

You can modify it by adding some configurations options and a bit of CSS. 

To add a custom class to the button you can do it like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "xxxxxx-xxxxxx-xxxxxx-xxxxxxx-xxxxxxx", 
css:"", {#disables initial form styling #}
submitButtonClass: "myCustomButton"
  });
</script>

CSS

.myCustomButton{
border: 3px solid #000000;
background: #ffffff;
color: #0000000;
border-radius: 50px;
padding: 8px 16px;
font-size: 1.2rem;
line-height: 1.5rem;
}

.myCustomButton:hover{ {# styling for hover state #}
background-color:#000000;
color:#ffffff;
}

.myCustomButton:focus{ {# style for focus state #}
background-color:#c6fcd0;

}

Tipp:

If you want to add a custom styling only to one particular page you can paste your CSS into the "additional <head> information" area in the page settings with a wrapping <style>-tag.

If you plan to use this styling more than once I'd recommend to put the styling into your main CSS file and just add the class each time into the embed code. 

 

 

2. custom Module

Almost the same as the previous version but much easier to handle. 

To set up a custom module for this case

  • create a new custom module
  • paste your default embed code(see default layout above) into the HTML+Hubl area
  • add a form function to the module via the right sidebar
  • copy/paste the form snippet into the HTML+Hubl area (temporary)
  • modify the code like this
{# this is the default form snippet - delete it before using the module. Otherwise you'll see two forms #}
{% form
	form_to_use="{{ module.form_field.form_id }}"
	response_response_type="{{ module.form_field.response_type }}"
	response_message="{{ module.form_field.message }}"
	response_redirect_id="{{ module.form_field.redirect_id }}"
	response_redirect_url="{{module.form_field.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX", {# replace with your HubID #}
    formId: "{{module.form_field.form_id}}", 
css:"",
onFormSubmit: "{{module.form_field.redirect_url}}"
  });
</script>

After you've entered your informations you no longer need the default {% form %} code in the module - delete it. 

 

The next step is to add the button styling option. You've got several options here.

If you like to enter different classes add a simple text field(not rich-text) as a function via the right sidebar to the module and modify the code like this. I've called mine "Button class"

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX", {# replace with your HubID #}
    formId: "{{module.form_field.form_id}}",
css:"",
onFormSubmit: "{{module.form_field.redirect_url}}",
submitButtonClass: "{{module.button_class}}"
  });
</script>

 

If you want to have it a bit more easier/bulletproof add a boolean(I call mine "Custom styling") instead of a textfield to the module(you can combine it - but it's not the approach here)

The  code should look like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX", {# replace with your HubID #}
    formId: "{{module.form_field.form_id}}", 
css:"",
onFormSubmit: "{{module.form_field.redirect_url}}",
{% if module.custom_styling %}submitButtonClass: "myCustomButton" {% endif %}
  });
</script>

 

There are many more options/ideas how you can overengineer those kind of modules. 

 

p.s: If something doesn't work - try the sledgehammer method by adding !important to each of the CSS lines. But this could lead you down the rabbit hole. 

 

 

 

best, 

Anton

 

 

Anton Bujanowski Signature

View solution in original post

2 Replies 2
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Custom Form Button

SOLVE

Hi @asiaferguson

of course it's possible. 

You've got several options. 

 

1. modify the embed code

Let's pretend that this is your default embed code

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "xxxxxx-xxxxxx-xxxxxx-xxxxxxx-xxxxxxx"
  });
</script>

You can modify it by adding some configurations options and a bit of CSS. 

To add a custom class to the button you can do it like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "xxxxxx-xxxxxx-xxxxxx-xxxxxxx-xxxxxxx", 
css:"", {#disables initial form styling #}
submitButtonClass: "myCustomButton"
  });
</script>

CSS

.myCustomButton{
border: 3px solid #000000;
background: #ffffff;
color: #0000000;
border-radius: 50px;
padding: 8px 16px;
font-size: 1.2rem;
line-height: 1.5rem;
}

.myCustomButton:hover{ {# styling for hover state #}
background-color:#000000;
color:#ffffff;
}

.myCustomButton:focus{ {# style for focus state #}
background-color:#c6fcd0;

}

Tipp:

If you want to add a custom styling only to one particular page you can paste your CSS into the "additional <head> information" area in the page settings with a wrapping <style>-tag.

If you plan to use this styling more than once I'd recommend to put the styling into your main CSS file and just add the class each time into the embed code. 

 

 

2. custom Module

Almost the same as the previous version but much easier to handle. 

To set up a custom module for this case

  • create a new custom module
  • paste your default embed code(see default layout above) into the HTML+Hubl area
  • add a form function to the module via the right sidebar
  • copy/paste the form snippet into the HTML+Hubl area (temporary)
  • modify the code like this
{# this is the default form snippet - delete it before using the module. Otherwise you'll see two forms #}
{% form
	form_to_use="{{ module.form_field.form_id }}"
	response_response_type="{{ module.form_field.response_type }}"
	response_message="{{ module.form_field.message }}"
	response_redirect_id="{{ module.form_field.redirect_id }}"
	response_redirect_url="{{module.form_field.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
%}

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX", {# replace with your HubID #}
    formId: "{{module.form_field.form_id}}", 
css:"",
onFormSubmit: "{{module.form_field.redirect_url}}"
  });
</script>

After you've entered your informations you no longer need the default {% form %} code in the module - delete it. 

 

The next step is to add the button styling option. You've got several options here.

If you like to enter different classes add a simple text field(not rich-text) as a function via the right sidebar to the module and modify the code like this. I've called mine "Button class"

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX", {# replace with your HubID #}
    formId: "{{module.form_field.form_id}}",
css:"",
onFormSubmit: "{{module.form_field.redirect_url}}",
submitButtonClass: "{{module.button_class}}"
  });
</script>

 

If you want to have it a bit more easier/bulletproof add a boolean(I call mine "Custom styling") instead of a textfield to the module(you can combine it - but it's not the approach here)

The  code should look like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX", {# replace with your HubID #}
    formId: "{{module.form_field.form_id}}", 
css:"",
onFormSubmit: "{{module.form_field.redirect_url}}",
{% if module.custom_styling %}submitButtonClass: "myCustomButton" {% endif %}
  });
</script>

 

There are many more options/ideas how you can overengineer those kind of modules. 

 

p.s: If something doesn't work - try the sledgehammer method by adding !important to each of the CSS lines. But this could lead you down the rabbit hole. 

 

 

 

best, 

Anton

 

 

Anton Bujanowski Signature
asiaferguson
Contributor

Custom Form Button

SOLVE

This worked... thanks so much!