Custom Form Button

asiaferguson — Fri, 22 Jul 2022 20:32:35 GMT

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?

Betreff: Custom Form Button

Anton — Fri, 22 Jul 2022 22:46:31 GMT

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

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

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"

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

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

Betreff: Custom Form Button

asiaferguson — Sun, 24 Jul 2022 16:50:52 GMT

This worked... thanks so much!

topic Betreff: Custom Form Button in CMS Development

Custom Form Button

Betreff: Custom Form Button

Betreff: Custom Form Button