HubL標準タグ

{% blog_comments "blog_comments" label="Blog comments" select_blog="359485112" %}

<span
id="hs_cos_wrapper_blog_comments"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_comments"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="blog_comments"
>
<div class="section post-footer">
<div id="comments-listing" class="new-comments"></div>
<div id="hs_form_target_{formID}" data-hs-forms-root="true">
<div class="hs-comment-message hs-common-confirm-message">
Your comment has been received.
</div>
<form
id="hsForm_id"
method="POST"
accept-charset="UTF-8"
enctype="multipart/form-data"
novalidate=""
action="https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/{hubID}/{formID}"
class="hs-form-private hs-form stacked"
target="target_iframe_07e1eb93-87f2-48039"
data-instance-id="{formID}"
data-formid="{formID}"
data-portal-id="123456"
data-test-id="hsForm_{formID}"
data-hs-cf-bound="true"
>
<div
class="hs_firstname hs-firstname hs-fieldtype-text field hs-form-field"
>
<label
id="label-firstname-07e1eb93"
class=""
placeholder="Enter your First Name"
for="firstname-07e1eb9339"
><span>First Name</span
><span class="hs-form-required">*</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="firstname-{formID}"
name="firstname"
required=""
placeholder=""
type="text"
class="hs-input"
inputmode="text"
autocomplete="given-name"
value=""
/>
</div>
</div>
<div
class="hs_lastname hs-lastname hs-fieldtype-text field hs-form-field"
>
<label
id="label-lastname-{formID}"
class=""
placeholder="Enter your Last Name"
for="lastname-{formID}"
><span>Last Name</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="lastname-{formID}"
name="lastname"
placeholder=""
type="text"
class="hs-input"
inputmode="text"
autocomplete="family-name"
value=""
/>
</div>
</div>
<div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
<label
id="label-email-{formID}"
class=""
placeholder="Enter your Email"
for="email-{formID}"
><span>Email</span><span class="hs-form-required">*</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="email-{formID}"
name="email"
required=""
placeholder=""
type="email"
class="hs-input"
inputmode="email"
autocomplete="email"
value=""
/>
</div>
</div>
<div
class="hs_website hs-website hs-fieldtype-text field hs-form-field"
>
<label
id="label-website-{formID}"
class=""
placeholder="Enter your Website"
for="website-{formID}"
><span>Website</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<input
id="website-{formID}"
name="website"
placeholder=""
type="text"
class="hs-input"
inputmode="url"
value=""
/>
</div>
</div>
<div
class="hs_comment hs-comment hs-fieldtype-textarea field hs-form-field"
>
<label
id="label-comment-{formID}"
class=""
placeholder="Enter your Comment"
for="comment-{formID}"
><span>Comment</span><span class="hs-form-required">*</span></label
>
<legend class="hs-field-desc" style="display: none;"></legend>
<div class="input">
<textarea
id="comment-{formID}"
class="hs-input hs-fieldtype-textarea"
name="comment"
required=""
placeholder=""
></textarea>
</div>
</div>
<div class="hs_recaptcha hs-recaptcha field hs-form-field">
<div class="input">
<div
class="grecaptcha-badge"
data-style="inline"
style="width: 256px; height: 60px; box-shadow: gray 0px 0px 5px;"
>
<div class="grecaptcha-logo">
<iframe
title="reCAPTCHA"
width="256"
height="60"
role="presentation"
name="a-pp7yub2hvkn1"
frameborder="0"
scrolling="no"
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
src="https://www.google.com/recaptcha/enterprise/anchor?{queryParams}"
></iframe>
</div>
<div class="grecaptcha-error"></div>
<textarea
id="g-recaptcha-response"
name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"
></textarea>
</div>
<iframe style="display: none;"></iframe>
</div>
<input
type="hidden"
name="g-recaptcha-response"
id="hs-recaptcha-response"
value=""
/>
</div>
<div class="hs_submit hs-submit">
<div class="hs-field-desc" style="display: none;"></div>
<div class="actions">
<input
type="submit"
class="hs-button primary"
value="Submit Comment"
/>
</div>
</div>
<input name="hs_context" type="hidden" value="{submissionContext}" />
<iframe name="target_iframe_{formID}" style="display: none;"></iframe>
</form>
</div>
</div>
</span>

{% post_filter "post_filter" %}
{% post_filter "posts_by_topic"
select_blog="default",
expand_link_text="see all",
overrideable=False,
list_title="Posts by Topic",
max_links=5,
filter_type="topic",
label="Posts by Topic"
%}

<span
id="hs_cos_wrapper_posts_by_topic"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_filter"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="post_filter"
>
<div class="block">
<h3>Posts by Topic</h3>
<div class="widget-module">
<ul>
<li><a href="http://www.hubspot.com/blog/topic/sales">Sales</a></li>
<li>
<a href="http://www.hubspot.com/blog/topic/marketing">Marketing</a>
</li>
<li><a href="http://www.hubspot.com/blog/topic/service">Service</a></li>
<li>
<a href="http://www.hubspot.com/blog/topic/operations">Operations</a>
</li>
<li><a href="http://www.hubspot.com/blog/topic/cms">CMS</a></li>
<li>
<a href="http://www.hubspot.com/blog/topic/industry">Industry</a>
</li>
</ul>
</div>
</div>
</span>

{% post_listing "post_listing" %}
{% post_listing "top_posts" select_blog="default", label="Recent Posts", overrideable=False, list_title="Recent Posts", listing_type="recent", max_links=5 %}

<span
id="hs_cos_wrapper_module_42751498763_top_posts"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_post_listing"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="post_listing"
>
<div class="block">
<h3>Recent Posts</h3>
<div class="widget-module">
<ul class="hs-hash-1630637453-1678475653429">
<li class="hs-postlisting-item">
<a
href="https://blog.hubspot.com/marketing/product-category-marketing"
>9 Product Category Marketing Examples to Inspire Your Own</a
>
</li>
<li class="hs-postlisting-item">
<a
href="https://blog.hubspot.com/marketing/increasing-mobile-conversion-rate"
>Mobile Conversion Rate: What It Is and How To Increase It</a
>
</li>
<li class="hs-postlisting-item">
<a
href="https://blog.hubspot.com/blog/tabid/6307/bid/33401/14-real-life-examples-of-cta-copy-you-should-copy.aspx"
>14 Real-Life Examples of CTA Copy YOU Should Copy</a
>
</li>
</ul>
</div>
</div>
</span>

{% related_blog_posts
limit=2,
blog_ids="1,2",
tags="Sales enablement,Marketing",
blog_authors="John Smith,Frank Smith",
path_prefixes="/business-blog",
start_date="2018-04-10",
end_date="2018-04-10",
blog_post_override="2783035366"
%}

<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
data-hs-cos-general-type="widget"
data-hs-cos-type="related_blog_posts"
id="hs_cos_wrapper_"
style=""
><!--related-blog-entries--></span
>
<div class="hs-related-blog-module feedreader_box">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
data-hs-cos-general-type="widget"
data-hs-cos-type="related_blog_posts"
id="hs_cos_wrapper_"
style=""
></span>
<div class="hs-related-blog-item">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
data-hs-cos-general-type="widget"
data-hs-cos-type="related_blog_posts"
id="hs_cos_wrapper_"
style=""
></span>
<div class="hs-related-blog-item-text">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_related_blog_posts"
data-hs-cos-general-type="widget"
data-hs-cos-type="related_blog_posts"
id="hs_cos_wrapper_"
style=""
><a
class="hs-related-blog-title"
href="//www.hubspot.com/business-blog/marketing-is-fun"
><span>Marketing is fun</span></a
></span
>
<div class="hs-related-blog-byline">
by <span class="hs-related-blog-author">John Smith</span>
<span class="hs-related-blog-posted-at">posted on</span>
<span class="hs-related-blog-date">June 3, 2018</span>
</div>
<div class="hs-related-blog-byline">
<p class="hs-related-blog-description">
Learn how to make marketing fun!<a
href="//www.hubspot.com/business-blog/marketing-is-fun"
>Read more</a
>
</p>
</div>
<div class="hs-related-blog-byline">
<span class="hs-related-blog-tags">Tags: Marketing</span>
</div>
</div>
</div>
<div class="hs-related-blog-item hs-with-featured-image">
<div class="hs-related-blog-item-text">
<a
class="hs-related-blog-title"
href="//www.hubspot.com/business-blog/sales-is-fun"
><span>Sales is fun</span></a
>
<div class="hs-related-blog-byline">
by <span class="hs-related-blog-author">Frank Smith</span>
<span class="hs-related-blog-posted-at">posted on</span>
<span class="hs-related-blog-date">June 7, 2018</span>
</div>
<div class="hs-related-blog-byline">
<p class="hs-related-blog-description">
Learn how to make sales fun!<a
href="//www.hubspot.com/business-blog/sales-is-fun"
>Read more</a
>
</p>
</div>
<div class="hs-related-blog-byline">
<span class="hs-related-blog-tags">Tags: Sales enablement</span>
</div>
</div>
<div class="hs-related-blog-item-image-wrapper">
<img
alt=""
class="hs-related-blog-featured-image"
src="//www.hubspot.com/hubfs/business-blog/sales-is-fun.jpg"
/>
</div>
</div>
</div>

{% blog_social_sharing "blog_social_sharing" %}
{% blog_social_sharing "blog_social_sharing" select_blog="359485112" %}

<span
id="hs_cos_wrapper_blog_social_sharing"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_social_sharing"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="blog_social_sharing"
>
<div class="hs-blog-social-share">
<ul class="hs-blog-social-share-list">
<li class="hs-blog-social-share-item hs-blog-social-share-item-twitter">
<a
href="https://twitter.com/share"
class="twitter-share-button"
data-lang="en"
data-url="http://designers.hubspot.com/blog"
data-size="medium"
data-text=""
>Tweet</a
>
</li>
<li class="hs-blog-social-share-item hs-blog-social-share-item-linkedin">
<script
type="IN/Share"
data-url="http://designers.hubspot.com/blog"
data-showzero="true"
data-counter="right"
></script>
</li>
<li class="hs-blog-social-share-item hs-blog-social-share-item-facebook">
<div
class="fb-like"
data-href="http://designers.hubspot.com/blog"
data-layout="button_count"
data-action="like"
data-show-faces="false"
data-share="true"
data-width="120"
></div>
</li>
<li
class="hs-blog-social-share-item hs-blog-social-share-item-google-plus"
>
<div
class="g-plusone"
data-size="medium"
data-href="http://designers.hubspot.com/blog"
></div>
</li>
</ul>
</div>
</span>

{% blog_subscribe "blog_subscribe" %}
{% blog_subscribe "subscribe_designers_blog" select_blog="default", title="Subscribe to the Designers Blog", response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False %}

<span
id="hs_cos_wrapper_blog_subscription"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_blog_subscribe"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="blog_subscribe"
>
<h3
id="hs_cos_wrapper_blog_subscription_title"
class="hs_cos_wrapper form-title"
data-hs-cos-general-type="widget_field"
data-hs-cos-type="text"
>
Subscribe to Designers Blog
</h3>
<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: '327485',
formId: 'a8d73dc6-0d3a-486d-8938-b19f28b69c3c',
formInstanceId: '60',
pageId: 2749976739,
pageName:
'Apple, Google & Starbucks: Inside the Web Design Style Guides of 10 Famous Companies',
redirectUrl:
'http://designers.hubspot.com/blog/web-design-style-guides-examples?hsFormKey=a56a754bc4c3465015935953363b8ff3#blog_subscription',
css: '',
target: '#hs_form_target_blog_subscription',
formData: { cssClass: 'hs-form stacked' },
});
</script>
</span>

{% boolean "boolean" %}
{% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}

false

{% choice "choice" %}
{% choice "type_of_page" label="Choose the type of page", value="About", choices="About, Careers, Contact, Store" %}

<span
id="hs_cos_wrapper_type_of_page"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_choice"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="choice"
>
About
</span>

{% color "color" %}
{% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}

#000000

{% cta "cta" %}
{% cta "my_cta" label="Select a CTA", guid="ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", image_src="https://no-cache.hubspot.com/cta/default/53/c7335b66-a0d4-4d19-82eb-75e1626d02d0.png" %}

<span
id="hs_cos_wrapper_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_cta"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="cta"
>
<!--HubSpot Call-to-Action Code -->
<span
class="hs-cta-wrapper"
id="hs-cta-wrapper-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"
>
<span
class="hs-cta-node hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"
id="hs-cta-ccd39b7c-ae18-4c4e-98ee-547069bfbc5b"
style="visibility: visible;"
>
<a
id="cta_button_158015_19a9097a-8dff-4181-b8f7-955a47f29826"
class="cta_button "
href="//cta-service-cms2.hubspot.com/ctas/v2/public/cs/c/?cta_guid=19a9097a-8dff-4181-b8f7-955a47f29826&placement_guid=ccd39b7c-ae18-4c4e-98ee-547069bfbc5b&portal_id=158015&redirect_url=APefjpFSOqhysLBE-Yye5WFoP82Swxb2PVWpfI3VxlUjuOCHfiVMcxKic3yM28vuwu9UB8_Jyhk6DGRCEN63hKqQOMtMTGmQZ1UNMK3LtNx0sRrAfQQYna2BfZ9RmgQOs8sKO_PcKOP6G26L5wQ5vdcXXOiMCxFPJxzPzUCcl474iiHKbEo5H8LVtZf6e140VOSGJ37NTpxCcPHLDvH9iFaT6mR0BnKzFReaX0FXBj7Lx2rFLVCZcIC0bdaFEGI1uKOJBMNT9RDtEzeJzUHzFYN0b34uv-ZR4w&hsutk=683eeb5b499fdfdf469646f0014603b4&utm_referrer=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables%3Fhs_preview%3D159bC1Cj-2863569740&canon=http%3A%2F%2Fwww.davidjosephhunt.com%2Fvariables"
style=""
cta_dest_link="http://www.hubspot.com/free-trial"
title="Start a HubSpot trial"
>
Start a HubSpot trial
</a>
</span>
<script charset="utf-8" src="//js.hscta.net/cta/current.js"></script>
<script type="text/javascript">
hbspt.cta.load(158015, 'ccd39b7c-ae18-4c4e-98ee-547069bfbc5b');
</script>
</span>
<!-- end HubSpot Call-to-Action Code -->
</span>

{% raw_html "raw_html" %}
{% raw_html "my_custom_html_module" label="Enter HTML here" value="<div>My HTML Block</div>" %}

Block Syntax Example:

{% widget_block raw_html "my_custom_html_module" overrideable=True, label="My custom HTML module"  %}
{% widget_attribute "value" %}
<div>Default HTML block</div>
{% end_widget_attribute %}
{% end_widget_block %}

<span
id="hs_cos_wrapper_my_custom_html_module"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="raw_html"
>
<div>My HTML block</div>
</span>

{% module "module_15677217712485" path="/Custom/Test custom module"  %}
{% module "module_25642219712432" path="/Assets/Custom calendar module" label="Custom calendar module" %}

<div
id="hs_cos_wrapper_module_15677217712485"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="module"
>
content!
</div>
<style>
@import '//cdn2.hubspotqa.net/qa/hub/126/file-613025667-css/custom_widget_example.css';
</style>
<div>
<img
class="persons-photo"
src="//cdn2.hubspotqa.net/qa/hub/124/file-1360297556-jpeg/dharmesh.jpeg"
alt="dharmesh.jpeg"
/>
<div>
<img
class="company-logo with-background"
src="//cdn2.hubspotqa.net/qa/hub/124/file-221882251-png/HubSpot_Logo_2x.png"
width="60px"
height="inherit"
alt="HubSpot_Logo_2x.png"
/>
</div>
</div>
<div>
<p class="quote">
<span class="quotation-mark"><b>" </b></span>The Content Optimization System
matches content with context to create a highly personalized, relevant and
meaningful customer experience.
<span class="quotation-mark"><b>" </b></span>
</p>
</div>
<div class="name-and-company">
<span><b>Dharmesh Shah,</b></span>
<span>HubSpot</span>
</div>

{% widget_container "my_flexible_column" label="My flex column"%}
{% module "rich_text" path="@hubspot/rich_text" %}
{% module "linked_image" path="@hubspot/linked_image" %}
{% end_widget_container %}

<span
id="hs_cos_wrapper_my_flexible_column"
class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container"
style=""
data-hs-cos-general-type="widget_container"
data-hs-cos-type="widget_container"
><div
id="hs_cos_wrapper_rich_text"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="module"
>
<span
id="hs_cos_wrapper_rich_text_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="rich_text"
><h2>Something Powerful</h2>
<h3>Tell The Reader More</h3>
<p>
The headline and subheader tells us what you're
<a href="#">offering</a>, and the form header closes the deal. Over here
you can explain why your offer is so great it's worth filling out a form
for.
</p>
<p>Remember:</p>
<ul>
<li>Bullets are great</li>
<li>For spelling out <a href="#">benefits</a> and</li>
<li>Turning visitors into leads.</li>
</ul></span
>
</div>
<div
id="hs_cos_wrapper_linked_image"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="module"
>
<span
id="hs_cos_wrapper_linked_image_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="linked_image"
><img
src="https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png"
class="hs-image-widget "
style="width:200px;border-width:0px;border:0px;"
width="200"
alt="placeholder_200x200"
title="placeholder_200x200"
/></span></div
></span>

{% form "my_form"
form_to_use="{formID}",
title="Free Trial"
%}

<!-- Block syntax example -->
{% module_block form "my_form"
form_follow_ups_follow_up_type="",
form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
title="Free Trial",
notifications_are_overridden=True,
response_message="Thanks for submitting the form.",
response_type="inline",
overrideable=True,
gotowebinar_webinar_key="",
webinar_id="",
webinar_source"",
label="Form"
%}
{% module_attribute "notifications_override_email_addresses" is_json=True %}
["email_address@website.com"]
{% end_module_attribute %}
{% end_module_block %}

<div
id="hs_cos_wrapper_my_form"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="form"
>
<h3
id="hs_cos_wrapper_module_13885064832664947_title"
class="hs_cos_wrapper form-title"
data-hs-cos-general-type="widget_field"
data-hs-cos-type="text"
>
Free Trial
</h3>
<div id="hs_form_target_module_13885064832664947">
<form
accept-charset="UTF-8"
enctype="multipart/form-data"
id="hsForm_08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
class="hs-form stacked hs-custom-form"
action="https://forms.hubspot.com/uploads/form/v2/158015/08bd9f0d-3be9-41c2-93b6-231a3a71b143"
method="POST"
novalidate="novalidate"
>
<div class="hs_lastname field hs-form-field">
<label
placeholder="Enter your Last Name"
for="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
>Last Name</label
>
<div class="hs-field-desc" style="display: none;"></div>
<div class="input">
<input
class="hs-input"
type="text"
id="lastname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
name="lastname"
value=""
placeholder=""
/>
</div>
</div>
<div class="hs_firstname field hs-form-field">
<label
placeholder="Enter your First Name"
for="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
>First Name</label
>
<div class="hs-field-desc" style="display: none;"></div>
<div class="input">
<input
class="hs-input"
type="text"
id="firstname-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
name="firstname"
value=""
placeholder=""
/>
</div>
</div>
<div class="hs_email field hs-form-field">
<label
placeholder="Enter your Email"
for="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
>Email<span class="hs-form-required"> * </span></label
>
<div class="hs-field-desc" style="display: none;"></div>
<div class="input">
<input
class="hs-input"
type="email"
required="required"
id="email-08bd9f0d-3be9-41c2-93b6-231a3a71b143_6756"
name="email"
value=""
placeholder=""
/>
</div>
</div>
<div class="hs_submit">
<div class="hs-field-desc" style="display: none;"></div>
<div class="actions">
<input class="hs-button primary large" type="submit" value="Submit" />
</div>
</div>
</form>
</div>
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: '123456',
formId: '{formID}',
formInstanceId: '6756',
pageId: 1,
redirectUrl: 'http:\/\/www.hubspot.com\/',
deactivateSmartForm: true,
css: '',
target: '#hs_form_target_module_13885064832664947',
contentType: 'landing-page',
formData: {
cssClass: 'hs-form stacked hs-custom-form',
},
});
</script>
</div>

{% page_footer "page_footer" %}

<span
id="hs_cos_wrapper_page_footer"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="page_footer"
>
<footer>
<span class="hs-footer-company-copyright">© 2020 HubSpot</span>
</footer>
</span>

{% gallery "crm_gallery" %}

<-- Block syntax -->
{% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5  %}
{% widget_attribute "slides" is_json=True %}
[{
"caption": "CRM Contacts App",
"show_caption": true,
"link_url": "http://www.hubspot.com/crm",
"alt_text": "Screenshot of CRM Contacts",
"img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
"open_in_new_tab": true
},
{
"caption": "HubSpot CRM Contact Profile",
"show_caption": true,
"link_url": "http://www.hubspot.com/",
"alt_text": "HubSpot CRM Contact Profile",
"img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
"open_in_new_tab": true
}]
{% end_widget_attribute %}
{% end_widget_block %}

<span
id="hs_cos_wrapper_crm_gallery"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_gallery"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="gallery"
>
<div
id="hs_cos_flex_gallery_crm_gallery"
class="hs_cos_flex-gallery flex-gallery-main gallery-mode-gallery"
>
<div
class="hs_cos_flex-viewport"
style="overflow: hidden; position: relative;"
>
<ul
class="hs_cos_flex-slides hs_cos_flex-slides-main "
style="width: 800%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(-1090px, 0px, 0px);"
>
<li
class="hs_cos_flex-slide-main clone"
aria-hidden="true"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/" target="_blank"
><img
src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686"
alt="HubSpot CRM Contact Profile"
draggable="false"
/></a>
<div class="caption">HubSpot CRM Contact Profile</div>
</li>
<li
class="hs_cos_flex-slide-main hs_cos_flex-active-slide"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/crm" target="_blank"
><img
src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686"
alt="Screenshot of CRM Contacts"
draggable="false"
/></a>
<div class="caption">CRM Contacts App</div>
</li>
<li
class="hs_cos_flex-slide-main"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/" target="_blank"
><img
src="//cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240&t=1430335520686"
alt="HubSpot CRM Contact Profile"
draggable="false"
/></a>
<div class="caption">HubSpot CRM Contact Profile</div>
</li>
<li
class="hs_cos_flex-slide-main clone"
aria-hidden="true"
style="width: 1090px; float: left; display: block;"
>
<a href="//www.hubspot.com/crm" target="_blank"
><img
src="http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240&t=1430335520686"
alt="Screenshot of CRM Contacts"
draggable="false"
/></a>
<div class="caption">CRM Contacts App</div>
</li>
</ul>
</div>
<ol class="hs_cos_flex-control-nav hs_cos_flex-control-paging">
<li><a class="hs_cos_flex-active">1</a></li>
<li><a class="">2</a></li>
</ol>
<ul class="hs_cos_flex-direction-nav">
<li><a class="hs_cos_flex-prev" href="#">Previous</a></li>
<li><a class="hs_cos_flex-next" href="#">Next</a></li>
</ul>
</div>
<script>
window.hsSliderConfig = window.hsSliderConfig || {};
window.hsSliderConfig['crm_gallery'] = {
mode: 'gallery',
mainConfig: {
animationLoop: true,
direction: 'horizontal',
slideshowSpeed: 5000.0,
controlNav: true,
smoothHeight: false,
namespace: 'hs_cos_flex-',
slideshow: true,
selector: '.hs_cos_flex-slides > li',
animation: 'slide',
},
};
</script></span
>

{% header "header"  %}
{% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}

<span
id="hs_cos_wrapper_my_header"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_header"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="header"
>
<h1>A clear and bold header</h1>
</span>

{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}

<span
id="hs_cos_wrapper_module_42549274798_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_icon"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="icon"
>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
aria-hidden="true"
>
<g id="layer1">
<path
d="M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5 9.9-67.2 26L73 243.2c22-20.7 50.1-35.1 81.4-40.2l75.3-85.7-42.6-24.8-51.6 46c-30 26.8-70.6-18.5-40.5-45.4l68-60.7c9.8-8.8 24.1-10.2 35.5-3.6 0 0 139.3 80.9 139.5 81.1 16.2 10.1 20.7 36 6.1 52.6L285.7 229l106.1-5.9c18.5-1.1 33.6 14.4 32.1 32.7zm-64.9-154c28.1 0 50.9-22.8 50.9-50.9C409.9 22.8 387.1 0 359 0c-28.1 0-50.9 22.8-50.9 50.9 0 28.1 22.8 50.9 50.9 50.9zM179.6 456.5c-80.6 0-127.4-90.6-82.7-156.1l-39.7-39.7C36.4 287 24 320.3 24 356.4c0 130.7 150.7 201.4 251.4 122.5l-39.7-39.7c-16 10.9-35.3 17.3-56.1 17.3z"
></path>
</g>
</svg>
</span>

{% image "image" %}
{% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}

<span
id="hs_cos_wrapper_executive_image"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="image"
>
<img
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300"
class="hs-image-widget "
width="300"
alt="Photo of Brian Halligan"
title="Photo of Brian Halligan"
/>
</span>

{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}

//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg

{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}

<span
id="hs_cos_wrapper_module_1487954976079503"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_language_switcher"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="language_switcher"
>
<div class="lang_switcher_class">
<div class="globe_class">
<ul class="lang_list_class">
<li>
<a class="lang_switcher_link" href="http://www.hubspot.com"
>English</a
>
</li>
<li>
<a class="lang_switcher_link" href="http://www.hubspot.com/es"
>Spanish</a
>
</li>
</ul>
</div>
</div>
</span>

{% linked_image "linked_image" %}
{% linked_image "executive_image"
label="Executive photo",
link="https://twitter.com/bhalligan", \
open_in_new_tab=True,
alt="Photo of Brian Halligan",
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
%}

<span
id="hs_cos_wrapper_executive_image"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="linked_image"
>
<a
href="https://twitter.com/bhalligan"
target="_blank"
id="hs-link-executive_image"
style="border-width:0px;border:0px;"
>
<img
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg?width=300"
class="hs-image-widget "
style="width:300px;border-width:0px;border:0px;"
width="300"
alt="Photo of Brian Halligan"
title="Photo of Brian Halligan"
/>
</a>
</span>

{% logo "logo" %}
{% logo "my_logo" width="200" %}

<span
id="hs_cos_wrapper_my_logo"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="logo"
>
<a href="//www.hubspot.com" id="hs-link-my_logo">
<img
src="//cdn2.hubspot.net/hub/53/file-1237149549-png/assets/hubspot.com/V2-Global/hubspot-logo-dark.png?t=1430948896766&width=200"
class="hs-image-widget "
width="200"
alt="HubSpot logo"
title="HubSpo logot"
/>
</a>
</span>

{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}

<div id="hs_menu_wrapper_my_menu" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" data-sitemap-name="Default">
<ul>
<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.husbpot.com/Software">Software</a></li>
<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/pricing">Pricing</a></li>
<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/resources">Resources</a></li>
<li class="hs-menu-item hs-menu-depth-1"><a href="http://www.hubspot.com/contact">Contact</a></li>
</ul>
</div>
</span>

{{ standard_header_includes }}
<!-- more html -->

{% require_css %}
<style>
body {
color: red;
}
</style>
{% end_require_css %}

{{ standard_footer_includes }}

<!-- other standard header html -->
<style>
body {
color: red;
}
</style>
<!-- more html -->
<!-- other standard footer html -->

{{ standard_header_includes }}
<!-- more html -->

{% require_js position="footer" %}
<script>
console.log("The CMS is awesome!");
</script>
{% end_require_js %}

{{ standard_footer_includes }}

<!-- other standard header html -->
<!-- more html -->
<script>
console.log('The CMS is awesome!');
</script>
<!-- other standard footer html -->

{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html="<div>My rich text default content</div>" %}

Block Syntax Example:

{% widget_block rich_text "right_column" overrideable=True, label="Right Column"  %}
{% widget_attribute "html" %}
<h2>Something Powerful</h2>
<h3>Tell The Reader More</h3>
<p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
<p>Remember:</p>
<ul>
<li>Bullets are great</li>
<li>For spelling out <a href="#">benefits</a> and</li>
<li>Turning visitors into leads.</li>
</ul>
{% end_widget_attribute %}
{% end_widget_block %}

<span
id="hs_cos_wrapper_right_column"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="rich_text"
>
<h2>Something Powerful</h2>
<h3>Tell The Reader More</h3>
<p>
The headline and subheader tells us what you're offering, and the form
header closes the deal. Over here you can explain why your offer is so great
it's worth filling out a form for.
</p>
<p>Remember:</p>
<ul>
<li>Bullets are great</li>
<li>For spelling out benefits and</li>
<li>Turning visitors into leads.</li>
</ul>
</span>

{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}

<span
id="hs_cos_wrapper_module_70642123068_my_rss_listing"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rss_listing"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="rss_listing"
>
<h3></h3>
<div class="hs-rss-module feedreader_box hs-hash-758735283">
<div class="hs-rss-item ">
<div class="hs-rss-item-text">
<a
class="hs-rss-title"
href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data"
>
<span
>How to Write Cron Jobs in HubSpot to take Time Based Action on CRM
Data</span
>
</a>
<div class="hs-rss-byline">
by <span class="hs-rss-author">Jon McLaren</span>
<span class="hs-rss-posted-at"> posted at</span>
<span class="hs-rss-date">3/8/23 10:42 AM</span>
</div>
<div class="hs-rss-description">
<p>
First things first: Cron jobs are scripts that get executed based on
time. Understanding where this shorthand name comes from may help
you remember this:
<a
href="https://developers.hubspot.com/blog/how-to-write-cron-jobs-in-hubspot-to-take-time-based-action-on-crm-data"
>Read more</a
>
</p>
</div>
</div>
</div>
<div class="hs-rss-item ">
<div class="hs-rss-item-text">
<a
class="hs-rss-title"
href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow"
>
<span
>Using OpenAI Embeddings API to implement Semantic Search into a
HubSpot Workflow</span
>
</a>
<div class="hs-rss-byline">
by <span class="hs-rss-author">Roman Kozak</span>
<span class="hs-rss-posted-at"> posted at</span>
<span class="hs-rss-date">3/7/23 2:09 PM</span>
</div>
<div class="hs-rss-description">
<p>
This article was authored by a member of the HubSpot developer
community, Roman Kozak.
<a
href="https://developers.hubspot.com/blog/implementing-semantic-search-into-a-hubspot-workflow"
>Read more</a
>
</p>
</div>
</div>
</div>
<div class="hs-rss-item ">
<div class="hs-rss-item-text">
<a
class="hs-rss-title"
href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions"
>
<span>How to Use NPM Packages in Custom Code Workflow Actions</span>
</a>
<div class="hs-rss-byline">
by <span class="hs-rss-author">Joshua Beatty</span>
<span class="hs-rss-posted-at"> posted at</span>
<span class="hs-rss-date">2/28/23 10:30 AM</span>
</div>
<div class="hs-rss-description">
<p>
This article was authored by a member of the HubSpot developer
community, Joshua Beatty.
<a
href="https://developers.hubspot.com/blog/how-to-use-npm-packages-in-custom-code-workflow-actions"
>Read more</a
>
</p>
</div>
</div>
</div>
</div>
</span>

{% section_header "section_header" %}
{% section_header "my_section_header" subheader="A more subdued subheader", header="A clear and bold header", label="Section Header"  %}

<span
id="hs_cos_wrapper_my_section_header"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="section_header"
>
<div class="page-header section-header">
<h1>A clear and bold header</h1>
<p class="secondary-header">
<span id="hs_cos_wrapper_subheader" class="section-subheader"
>A more subdued subheader</span
>
</p>
</div>
</span>

{% simple_menu "simple_menu" %}
{% simple_menu "my_simple_menu" orientation="horizontal", label="Simple Menu" %}

Block Syntax Example:

{% widget_block simple_menu "block_simple_menu" overrideable=True, orientation="horizontal", label="Simple Menu"  %}
{% widget_attribute "menu_tree" is_json=True %}[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}]{% end_widget_attribute %}
{% end_widget_block %}

<span
id="hs_cos_wrapper_my_simple_menu"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="simple_menu"
>
<ul></ul>
</span>

<span
id="hs_cos_wrapper_block_simple_menu"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="simple_menu"
>
<div
id="hs_menu_wrapper_module_143093417497114626"
class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal"
data-sitemap-name=""
>
<ul>
<li class="hs-menu-item hs-menu-depth-1">
<a href="//www.hubspot.com" target="_self">Home</a>
</li>
<li class="hs-menu-item hs-menu-depth-1 hs-item-has-children">
<a href="//www.hubspot.com/internet-marketing-company" target="_self"
>About</a
>
<ul class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-2">
<a href="//www.hubspot.com/company/management" target="_self"
>Our Team</a
>
</li>
</ul>
</li>
<li class="hs-menu-item hs-menu-depth-1">
<a href="//www.hubspot.com/pricing" target="_self">Pricing</a>
</li>
</ul>
</div>
</span>

{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}

Block Syntax Example:

{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True  %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}

<span
id="hs_cos_wrapper_social_sharing"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="social_sharing"
>
<a
href="http://www.facebook.com/share.php?u=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dfacebook"
target="_blank"
style="width:24px;border-width:0px;border:0px;"
>
<img
src="//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png?width=24"
class="hs-image-widget hs-image-social-sharing-24"
style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
width="24"
hspace="0"
alt="Share on Facebook"
/>
</a>
<a
href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin"
target="_blank"
style="width:24px;border-width:0px;border:0px;"
>
<img
src="//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png?width=24"
class="hs-image-widget hs-image-social-sharing-24"
style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
width="24"
hspace="0"
alt="Share on LinkedIn"
/>
</a>
<a
href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text="
target="_blank"
style="width:24px;border-width:0px;border:0px;"
>
<img
src="//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png?width=24"
class="hs-image-widget hs-image-social-sharing-24"
style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
width="24"
hspace="0"
alt="Share on Twitter"
/>
</a>
<a
href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dpinterest&media=http%3A%2F%2Fcdn1.hubspot.com%2Fhub%2F158015%2F305390_10100548508246879_837195_59275782_6882128_n.jpg"
target="_blank"
style="width:24px;border-width:0px;border:0px;"
>
<img
src="//static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png?width=24"
class="hs-image-widget hs-image-social-sharing-24"
style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
width="24"
hspace="0"
alt="Share on Pinterest"
/></a>
<a
href="mailto:?subject=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail &body=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail"
target="_blank"
style="width:24px;border-width:0px;border:0px;"
>
<img
src="//static.hubspot.com/final/img/common/icons/social/email-24x24.png?width=24"
class="hs-image-widget hs-image-social-sharing-24"
style="max-height:24px;max-width:24px;border-width:0px;border:0px;"
width="24"
hspace="0"
alt="Share on Email"
/>
</a>
</span>

{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}

<span
id="hs_cos_wrapper_module_spacer"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_space"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="space"
></span>

{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}

<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
></span>
<div class="page-header">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
></span>
<h1>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
>Email Unsubscribe</span
>
</h1>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
></span>
</div>
<form
id="email-prefs-form"
method="post"
name="email-prefs-form"
style="position: relative"
>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
></span>
<div id="content">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
></span>
<h3 style="font-weight: normal">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
>Your email address:</span
>
</h3>
<div style="padding-bottom: 10px">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
><input
class="email-edit hs-input"
name="email"
placeholder="email@example.com"
style="padding: 6px; font-size: 15px; width: 507px; margin-left: 0px"
type="email"
value=""
/></span>
</div>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
><input
class="hs-button primary"
id="submitbutton"
type="submit"
value="Unsubscribe"
/></span>
</div>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_simple_subscription"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_simple_subscription"
id="hs_cos_wrapper_email_simple_subscription"
style=""
></span>
</form>

{% email_subscriptions "email_subscriptions" %}
{% email_subscriptions "email_subscriptions"
resubscribe_button_text="Yes, resubscribe me!",
unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
subheader_text="\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
unsubscribe_all_option="Unsubscribe me from all mailing lists.",
unsubscribe_all_text="Or check here to never receive any emails:"
%}

<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
></span>
<form id="email-prefs-form" method="post" name="email-prefs-form">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
></span>
<div class="page-header">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
></span>
<h1>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
>Communication Preferences</span
>
</h1>
<h2>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
>example@email.com</span
>
</h2>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
><br
/></span>
<p>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
>If this is not your email address, please ignore this page since the
email associated with this page was most likely forwarded to you.</span
>
</p>
</div>
<div class="email-prefs" id="content">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
></span>
<p class="header">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
>Uncheck the types of emails you do not want to receive:</span
>
</p>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
><input name="email" type="hidden" value="example@email.com" />
<input name="unsub_url" type="hidden" value="" />
<input name="unsubed_all" type="hidden" value="false" />
<input name="subscription_ids" type="hidden" value=""
/></span>
<div class="item">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
></span>
<div class="item-inner">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
></span>
<div class="checkbox-row">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions"
id="hs_cos_wrapper_email_subscriptions"
style=""
><span class="fakelabel"
><input id="id_0" name="id_0" type="checkbox" />
<span>Example Subscription #1</span></span
></span
>
</div>
<p>Your email type description</p>
</div>
</div>
<div class="item">
<div class="item-inner">
<div class="checkbox-row">
<span class="fakelabel"
><input id="id_0" name="id_0" type="checkbox" />
<span>Example Subscription #2</span></span
>
</div>
<p>Your email type description</p>
</div>
</div>
<div class="subscribe-options" style="margin-right: 0">
<p class="header">Or check here to never receive any emails:</p>
<p>
<label for="globalunsub"
><input id="globalunsub" name="globalunsub" type="checkbox" />
<span>Unsubscribe me from all mailing lists.</span></label
>
</p>
</div>
<input
class="hs-button primary"
id="submitbutton"
type="submit"
value="Update email preferences"
/>
<div class="clearer"></div>
</div>
</form>

{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
{% email_subscriptions_confirmation "email_subscriptions_confirmation"
label="Subscriptions Update Confirmation",
unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
subscription_update_success="You have successfully updated your email preferences.",
subheader_text="\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
%}

<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions_confirmation"
id="hs_cos_wrapper_email_subscriptions_confirmation"
style=""
></span>
<div class="page-header">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions_confirmation"
id="hs_cos_wrapper_email_subscriptions_confirmation"
style=""
></span>
<h2>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions_confirmation"
id="hs_cos_wrapper_email_subscriptions_confirmation"
style=""
>example@email.com</span
>
</h2>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions_confirmation"
id="hs_cos_wrapper_email_subscriptions_confirmation"
style=""
><br
/></span>
<p>
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions_confirmation"
id="hs_cos_wrapper_email_subscriptions_confirmation"
style=""
>If this is not your email address, please ignore this page since the
email associated with this page was most likely forwarded to you.</span
>
</p>
</div>
<div class="success" id="content">
<span
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_email_subscriptions_confirmation"
data-hs-cos-general-type="widget"
data-hs-cos-type="email_subscriptions_confirmation"
id="hs_cos_wrapper_email_subscriptions_confirmation"
style=""
>You have successfully updated your email preferences.</span
>
</div>

{% member_login "my_login" %}
{% member_login "my_login"
email_label="Email",
password_label="Password",
remember_me_label="Remember Me",
reset_password_text="Forgot your password?",
submit_button_text="Login",
show_password="Show password"
%}

<span
id="hs_cos_wrapper_my_login"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_login"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="member_login"
><div class="hs-form-field">
<ul class="no-list hs-error-msgs" style="text-align:center">
<li>
<label class="hs-membership-global-error hs-error-msg"></label>
</li>
</ul>
</div>
<form
method="post"
action="/_hcms/mem/login?domain=default&hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&updated=1644243124141&redirect_url=/"
id="hs-membership-form"
onsubmit="onFormSubmit()"
data-hs-do-not-collect=""
>
<input name="csrf_token" type="hidden" value="" />
<input name="redirect_url" type="hidden" value="/" />
<input
id="hs-membership-form-hubspotutk"
name="hubspotutk"
type="hidden"
value=""
/>

<div class="hs-form-field">
<label class="hs-login-widget-email-label" for="hs-login-widget-email"
>Email*</label
>
<input
class="hs-input"
name="email"
type="text"
placeholder="Email"
id="hs-login-widget-email"
value=""
/>
</div>

<div class="hs-form-field">
<label
class="hs-login-widget-password-label"
for="hs-login-widget-password"
>Password*</label
>
<a
class="hs-login-widget-show-password"
href="https://developers.hubspot.jp/docsjavascript:show_password("hs-login-widget-password');"
>Show password</a
>
<input
class="hs-input"
name="password"
type="password"
placeholder="Password"
id="hs-login-widget-password"
/>
</div>

<div class="hs-form-field">
<input
class="hs-input"
name="remember_me"
type="checkbox"
id="hs-login-widget-remember"
value="true"
checked=""
/>
<label for="hs-login-widget-remember">Remember Me</label>
</div>
<div>
<a id="hs_login_reset" href="https://developers.hubspot.jp/docs/_hcms/mem/reset/request"
>Forgot your password?</a
>
</div>

<div class="hs-membership-loader hs_submit hs-submit">
<div class="actions">
<input type="submit" class="hs-button primary large" value="Login" />
</div>
</div>
</form>

<script type="text/javascript">
function onFormSubmit() {
//    document.querySelector('.hs-membership-loader').classList.add('active');
}

document.onkeydown = function (e) {
if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (input === document.activeElement) {
if (e.code == 'ArrowDown' && children[i + 1] !== undefined) {
children[i + 1].focus();
break;
} else if (e.code == 'ArrowUp' && children[i - 1] !== undefined) {
children[i - 1].focus();
break;
}
} else if (i + 1 === children.length) {
children[0].focus();
}
}
} else if ('Enter' === e.code) {
e.preventDefault();
var children = [].slice.call(
document.querySelectorAll(
'#hs-membership-form input:not([type="hidden"]):not([type="checkbox"]):not([disabled])'
)
);
for (i = 0; i < children.length; i++) {
var input = children[i];
if (
input === document.activeElement &&
children[i + 1] !== undefined
) {
children[i + 1].focus();
break;
} else if (
input === document.activeElement &&
i + 1 === children.length
) {
//          document.querySelector('.hs-membership-loader').classList.add('active');
document.getElementById('hs-membership-form').submit();
} else if (i + 1 === children.length) {
children[0].focus();
}
}
}
};
</script>

<div id="hs-membership-rate-limit-error-text" style="display:none">
You've made too many attempts at this request. Please try this action again
in a few minutes.
</div>
<script type="text/javascript">
function show_password(id) {
var input = document.getElementById(id);
input.type = input.type === 'password' ? 'text' : 'password';
}
</script>
<script>
function getCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
document.getElementById('hs-membership-form-hubspotutk').value =
getCookie('hubspotutk');
</script>
</span>