Remove <h3> from Blog Email Subscription title

[JReekes]

I'm new to HubSpot, but I'm a WordPress pro, and I write code (in several languages).

I want to remove all the incorrect use of header tags for SEO reasons. We shouldn't be using h-tags for style, when they are structural elements that search engines are looking for.

I've replaced most of the built-in modules, like Recent Posts, Related Posts, etc. But the built-in Blog Email Subscription module is odd.

{% blog_subscribe "blog_subscribe"
select_blog='{{ module.select_blog }}',
title='{{ module.title }}',
response_message='{{ module.response_message }}'
%}

I want to replace the title tagged with <h3> to something like <p class="..."> 

This is such a simple change, but I'm stumped. Where is the code generating the HTML for this module? How do I go about changing that?

Or, is there a better way I should be doing this?

[miljkovicmisa]

Hey @JReekes , nice workaround. I'm just writing regarding something you mentioned about the headings and styling, maybe it is a bit off topic but I should note that the headings provide mainly structural divisions in the document so it would actually work beneficially to have an h3 tag for the subscribe section. Also make sure that content is accessible for screen readers and other devices that assist people with disabilities.

You can find some more info on accessibility regarding headings here in this link.

So just to conclude the heading was not placed incorrectly as it serves to distinct the area/section of the page where you can subscribe to newsletter and it also serves well for screen readers that will pick it up and read it as a section of the page so users are able to easily navigate to that portion of the page.

[miljkovicmisa · Accepted solution]

Hello @JReekes and thanks for writing in the community.
It is not possible to mess with the specific module because it contains hubl tags that automatically create the output, just like a cta works or some other hubl tags, they generate the output internally so you can't touch it.
You can see some info here in this link  regarding the tag.

Now your best choice is to try and replicate this module in a custom module using the output that the default module produces. So this is split into two parts.
1. Recreate texts and layout:
This part is easy you just add a field in your new module that outputs text, then you put that text in whatever tag you like.

As a side note I would suggest you add rich text so you get full control over what is shown and it is furure-proof as you can always add more markup and elements, maybe a subheader or some explanation text with links or something, maybe some emojis or icons, or even images.

2. Recreate the form:
First add a field of form to your module.
This is a bit trickier, you will have to use javascript to produce a form that does the subscription, you can find a lot of details in this link where it guides you through the form creation, this is particulary useful when you need a copletly custom form or you want your hubspot form outside of hubspot, a differrent usecase.
So with number one and two, this is how it should look like:

<p>{{ module.title }}</p>
<div id="hs_form_target_blog_subscription"></div>
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({ 
  portalId: `{{hub_id}}`,
  formId: `{{ module.form_field.form_id }}`, 
  formInstanceId: '60', 
  pageId: `{{content_id}}`, 
  pageName: `{{content.name}}`, 
  redirectUrl: `{{module.form_field.redirect_url}}`, 
  css: '', 
  target: '#hs_form_target_blog_subscription', 
  formData: { cssClass: 'hs-form stacked' }
});
</script>

The whole thing in your design manager should look like this:

Please don't hesitate to ask for any further help, I know this info seems a bit overwhelming, especially the part where the form is created.
Always look up the docs, it is a wonderful place! 🙂

If my answer was any helpful, consider marking it as a solution.

[JReekes]

@miljkovicmisaThanks for the tip! Once I re-read the docs on the blog_subscribe tag, I found an easy answer.

As the docs say the title field is "Defines text in an h3 tag title above the subscribe form." So it's hardcoded to be h3 (sad). We shouldn't be using h-tags for style. They are structural elements for content.

Then I spotted the field no_title which simply removes the title. That's where I realized there's a simple answer. Use the standard blog_subscribe tag in a custom module, but without the title. Instead, add my own heading above the blog_subscribe tag. Duh!

I like this solution because I'm using the standard built-in module. I think will will avoid extra dev work now (no JavaScript needed to code the form). This looks to be the most future-proof. Best of all, I'm lazy so this appeals to me very much!

While I was adding two text fields for my own heading and another for the inline response to be edited.

Any comments would be welcomed. I'll update this code if there's any corrections or recommendations.

{% set heading = module.heading || '' %}
{% set response = module.response || '' %}

<div class="block">
{% if heading is truthy %}
	<p class="module-title">{{ heading }}</p>
{% endif %}

{% blog_subscribe "blog_subscribe" select_blog='default', no_title='true', title='', response_message='{{ response }}', label='Blog Email Subscription', overrideable=False %}
</div>

[webdew]

Thanks for tagging @natsumimori 

Hi @JReekes ,

First You need to clone (blog_subscribe.module)
Then follow the screenshot: https://prnt.sc/1gj4x8i

Once done, add module in your blog template.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[JReekes]

@webdew That doesn't allow changing the h3 tag used in the title. I was working around what you described until I found this out. That's when I wrote for help. I've got an answer now. See my later post.

[natsumimori]

Thank you for your post @JReekes .

@tjoyce and @webdew , is there anything you can suggest to @JReekes ?