How can I use the CSS element in Javascript-generated forms to format the confirmation message output after submission?


#1

Hi,

I'm using the nice clean, lean and mean javascript to generate HS forms on the fly (have to remove the angle brackets for the code to appear here):

script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"
/script
script
hbspt.forms.create({
portalId: "NNNNNN",
formId: "######-####-####-####-#########",
css: ""
});
/script

This is a first for me, and I was able to find out how to do the css element there to make the form with its labels and button look nice. The problem is, however, I have no idea how or if I can refer to the output thank you message after submission at the end. The form has a dark background behind it, so the message can't be seen. So for instance, making the label text appear was as simple as adding this: label{color: #ffffff;}. How do I refer to and format the message output, or can that be done? Would it be something like this: output{color: #ffffff;}? Or would the proper term be "message" or "confirmation"?

Also, as a bonus question, when I am filling in that css element, is there any way to make it accept line breaks? For instance, right now I was only able to do it by having all the css info on one really long line. Each part separated by a single space worked. But when I tried to put each part on a different line, which would be much more desirable and easy to work with, it would not work. That only resulted in the form disappearing.

Thanks.


#3

Hi again @John5, the submission message comes with a built in CSS class that we can easily target. output or message / confirmation aren't valid HTML elements, so we need to target the div that has our built in class on it. I just implemented the code on on of my forms on my site with the following code:

<script>
hbspt.forms.create({
   portalId: "3430672",
   formId: "######-####-####-####-#########",
   css: ".submitted-message {color: green;}",
   inlineMessage: "hello world"
});
</script>

The class is .submitted-message. This should work for your purposes! As for the line breaks, you won't be able to add line breaks via css, but you could either set a hard width on the message so that it breaks to a new line after X pixels, or you can actually use the inlineMessage field which allows for HTML elements to be injected. So for the example above, If I wanted to say "hello world", but on two separate lines I would change the inline message section from:

inlineMessage: "hello world" to inlineMessage: "hello <br> world".

Hope this helps


#4

Hi @Connor_Barley,

Thanks a lot for this intriguing reply. I can't wait to test it later today and I certainly will.

Right now there is just this very simple statement that appears along the lines of "Thanks for submitting the form." If I use this method you posted, will whatever message I code in replace that (far more desirable), or will it only append my coded message to whatever appears already now (far less desirable)?

Also, I'm really glad you included info about line breaks in the message, and might have asked about that later, but in my original post I was intending only the ability to add the css itself first to begin with in the editor and not about controlling the output for that part. I.e., just the physical act of adding the css. For instance, the css instructions will not work if I add them in the html window like this (preferable):

css: "input[type=text]{width: 100%; margin-bottom: 16px;}
input[type=email]{width: 100%; margin-bottom: 16px;}
input[type=tel]{width: 100%; margin-bottom: 16px;}
Etc."

(The "Etc." is meant to represent many more lines of css.)

I really want to be able to put the instructions in one line at a time because it's much easier to work that way. But if I do that it simply causes the form to not even appear anymore. Instead, barring the discovery of a method that will enable this, I can only put all the instructions in a single looooooooooooooooooooooooooooooooooooooooong line like this:

css: "input[type=text]{width: 100%; margin-bottom: 16px;} input[type=email]{width: 100%; margin-bottom: 16px;} input[type=tel]{width: 100%; margin-bottom: 16px;} etc..."

Now these examples are abbreviated, so the reality is that the single line contains a lot more and is really huge.


#5

Hi @John5, yeah it's a bit inconvenient, but you can edit your code in a CSS file externally using tabs and indents, and then manually minify it. The reality is is that it has to be on one line unfortunately. This minfier works well: https://cssminifier.com/. One other issue I saw here is that your CSS is invalid. input[type=text] wont' work. It has to be input[type='text']. Make sure you use single quotes for the type='text' etc., as doublequotes will stop the string short since the entire section is wrapped in double quotes. If this is is confusing you can always write your CSS for forms within your external stylesheet rather than within the embed code.

As for the the inlineMessage field, this will not concatenate your current inline message, it would replace it entirely.


onFormSubmit - How do you send the form data via email and/or into MySQL or add to a text file?
#6

Thanks again, Connor. I'm finding that I can get away with not adding the quotes, but for good measure I will. I haven't implemented the inlinemessage yet to test it, but all your info has gotten me plenty fired up about HS and the utility of this embed feature with code. Before I test drive the inlinemessage I also want to find out how to add an onformsubmit script to send the captured data via email and into a database as well. I think I will create a separate thread for that so that the title will be explicit re onformsubmit.


#7

No worries @john5! Glad you're fired up about this stuff -- we love when developers and customers can collaborate with us and each other and learn new things. It's the entire purpose of this forum. I'm sure I'll see you around the forums then!