HubL標準タグ

Last updated:

このページは、全ての標準HubLタグの構文と利用可能なパラメーターを網羅したリファレンスガイドです。標準HubLタグの中には、Eメール配信登録(サブスクリプション)ページなどのシステムページのタグも含まれています。以下の各タグに、基本構文のサンプル、およびパラメーターとコード出力の例が含まれています。

ドラッグ&ドロップエリアを作成する場合は、ドラッグ&ドロップ エリア タグについての詳細をご確認ください。古いウェブサイトを維持している場合は、非推奨のHubLタグのリストもご確認ください。

このページのタグのほとんどは既定のモジュールに同等のものがあります。モジュールはdnd_areas内およびフレキシブルカラム内で使用でき、ここで示すタグよりも効果的かつユーザーフレンドリーです。

ブログコメント

ブログ コメント タグはブログテンプレートにコメント埋め込みコードをレンダリングします。このJavaScript埋め込みコードは、ウェブサイト設定内の設定に基づいてコメントフォームとコメントを読み込みます。

Blog Comment Form module: {% blog_comments "blog_comments" overrideable=False, label="Blog Comments" %} Blog Comment Count module: {% blog_comments "blog_comments" %} Blog Comment listing for specific blog: {% blog_comments "default_blog_comments" select_blog="359485112" %}Blog Commment Form Output: <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 no-comments"></div> <div id="hs-comment-embed" style="display:none;"></div> <div id="comment-form" class="new-comments"> <form novalidate="" accept-charset="UTF-8" action="https://api.hubapi.com/comments/v3/comment?portalId=311600" enctype="multipart/form-data" id="hsForm_d30edada-82e4-4a69-aaf4-a9d0376f37e6" method="POST" class="hs-form stacked" data-form-id="d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-portal-id="311600" data-reactid=".hbspt-forms-0"> <div data-reactid=".hbspt-forms-0.0:$0"> <div class="hs_email field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.$email"> <label class="" placeholder="Enter your Email" for="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$0.$email.0"> <span data-reactid=".hbspt-forms-0.0:$0.$email.0.0">Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.$email.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.$email.1"> </legend> <div class="input" data-reactid=".hbspt-forms-0.0:$0.$email.$email"> <input id="email-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="email" name="email" required="" placeholder="" value="" data-reactid=".hbspt-forms-0.0:$0.$email.$email.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$1"> <div class="hs_website field hs-form-field" data-reactid=".hbspt-forms-0.0:$1.$website"> <label class="" placeholder="Enter your Website" for="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$1.$website.0"> <span data-reactid=".hbspt-forms-0.0:$1.$website.0.0">Website</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$1.$website.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$1.$website.$website"> <input id="website-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="text" name="website" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$1.$website.$website.0"> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$2"> <div class="hs_comment field hs-form-field" data-reactid=".hbspt-forms-0.0:$2.$comment"> <label class="" placeholder="Enter your Comment" for="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$2.$comment.0"> <span data-reactid=".hbspt-forms-0.0:$2.$comment.0.0">Comment</span> <span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$2.$comment.0.1">*</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$2.$comment.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment"> <textarea id="comment-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" name="comment" required="" placeholder="" data-reactid=".hbspt-forms-0.0:$2.$comment.$comment.0"></textarea> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$3"> <div class="hs_subscribe field hs-form-field" data-reactid=".hbspt-forms-0.0:$3.$subscribe"> <label class="" placeholder="Enter your Subscribe to follow-up comments for this post" for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$3.$subscribe.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.0.0"></span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$3.$subscribe.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe"> <ul class="inputs-list" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0"> <li class="hs-form-booleancheckbox" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0"> <label for="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-form-booleancheckbox-display" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0"> <input id="subscribe-d30edada-82e4-4a69-aaf4-a9d0376f37e6" class="hs-input" type="checkbox" name="subscribe" value="true" data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.0"> <span data-reactid=".hbspt-forms-0.0:$3.$subscribe.$subscribe.0.0.0.1">Subscribe to follow-up comments for this post</span> </label> </li> </ul> </div> </div> </div> <div data-reactid=".hbspt-forms-0.0:$4"> <div class="hs_lifecyclestage field hs-form-field" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage"> <label class="" placeholder="Enter your Lifecycle Stage" for="lifecyclestage-d30edada-82e4-4a69-aaf4-a9d0376f37e6" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0"> <span data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.0.0">Lifecycle Stage</span> </label> <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.1"></legend> <div class="input" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage"> <input name="lifecyclestage" class="hs-input" type="hidden" value="subscriber" data-reactid=".hbspt-forms-0.0:$4.$lifecyclestage.$lifecyclestage.0"> </div> </div> </div> <div class="hs_submit" data-reactid=".hbspt-forms-0.2"> <div class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.2.0"></div> <div class="actions" data-reactid=".hbspt-forms-0.2.1"> <input type="submit" value="Submit Comment" class="hs-button primary" data-reactid=".hbspt-forms-0.2.1.0"> </div> </div> <input name="hs_context" type="hidden" value="{&quot;rumScriptExecuteTime&quot;:1396.815,&quot;rumServiceResponseTime&quot;:7737.500000000001,&quot;rumFormRenderTime&quot;:187.17999999999938,&quot;rumTotalRenderTime&quot;:7738.14,&quot;rumTotalRequestTime&quot;:183.2549999999992,&quot;pageUrl&quot;:&quot;http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15?hs_preview=ALicr-ma-4312320350&quot;,&quot;pageTitle&quot;:&quot;HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview&quot;,&quot;source&quot;:&quot;FormsNext-static-1.390&quot;,&quot;isHostedOnHubspot&quot;:true,&quot;timestamp&quot;:1479135449193,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36&quot;,&quot;referrer&quot;:&quot;&quot;,&quot;hutk&quot;:&quot;a525e671c25f6b108d25e08c892e359e&quot;,&quot;originalEmbedContext&quot;:{&quot;portalId&quot;:&quot;311600&quot;,&quot;formId&quot;:&quot;d30edada-82e4-4a69-aaf4-a9d0376f37e6&quot;,&quot;target&quot;:&quot;#comment-form&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;css&quot;:&quot;.your-custom-css {background-color: #fe7722}&quot;,&quot;requiredCss&quot;:&quot;.my-custom-error-msgs {border-radius: 3px;}&quot;,&quot;submitButtonClass&quot;:&quot;hs-button primary&quot;},&quot;recentFieldsCookie&quot;:{},&quot;pageId&quot;:&quot;23423&quot;,&quot;pageName&quot;:&quot;My great landing page&quot;,&quot;boolCheckBoxFields&quot;:&quot;subscribe&quot;,&quot;dateFields&quot;:&quot;&quot;,&quot;redirectUrl&quot;:&quot;http://www.hubspot.com/contact-sales/thanks/&quot;,&quot;smartFields&quot;:{},&quot;urlParams&quot;:{&quot;hs_preview&quot;:&quot;ALicr-ma-4312320350&quot;},&quot;formValidity&quot;:{},&quot;correlationId&quot;:&quot;55d71532-ab6b-4415-98f5-f3a16d7741c9&quot;,&quot;disableCookieSubmission&quot;:false}" data-reactid=".hbspt-forms-0.3"> <input type="hidden" id="id_portalId" name="portalId" value="311600"><input type="hidden" id="id_contentId" name="contentId" value="4312320350"> <input type="hidden" id="id_collectionId" name="collectionId" value="2224463151"> <input type="hidden" id="id_contentAuthorEmail" name="contentAuthorEmail" value="cstone@hubspot.com"><input type="hidden" id="id_contentAuthorName" name="contentAuthorName" value="Christopher Stone"> <input type="hidden" id="id_comment_verification_text" name="comment_verification_text" value="Your comment has been received."> <input type="hidden" id="id_contentTitle" name="contentTitle" value="HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview"> <input type="hidden" id="id_contentPermalink" name="contentPermalink" value="http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15"> <input type="hidden" id="id_contentCreatedAt" name="contentCreatedAt" value="1479135208000"> <input type="hidden" id="id_formGuid" name="formGuid" value="d30edada-82e4-4a69-aaf4-a9d0376f37e6"> </form> </div> </div> </span> Blog Comment Listing Module Output: (function ($) { var commentsEmbedContext = { portalId: 327485, collectionId: 359485112, contentId: 2684120609, target: '#comments-listing.new-comments', showComments: true, showForm: true, commentVerificationText: "Your comment has been received.", embedScriptEnv: "prod", apiEnv: "prod", contentTitle: "Post title", contentCreatedAt: "1427849160000", contentPermalink: "http:\/\/designers.hubspot.com\/blog\/post-name, contentAuthorEmail: "dhunt@hubspot.com", contentAuthorName: "David Hunt", captchaRequired: true, captchaKey: "6Lc3uMsSAAAAAMjk4NIvPQK9_-ZLk2wBokFCo5Qt", maxThreadDepth: 3, formId: "8d42bb92-241b-4894-b853-1d5f6553daa0" }; function loadComments() { if (window.hubspot && typeof window.hubspot.loadCommentsEmbed === 'function') { hubspot.loadCommentsEmbed(commentsEmbedContext.embedScriptEnv, function () { if (typeof window.hsEmbedComments === 'function') { window.hsEmbedComments(commentsEmbedContext); } }); } else { setTimeout(loadComments, 50); } } loadComments(); })(window.hsjQuery || jQuery);
ParameterTypeDescription Default
limit
整数

最大コメント数を設定します。

5000
select_blog
「default」またはブログID

埋め込みコメントにどのブログが接続されるかを指定します。このパラメーターには"default"、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。

default
skip_css
ブール値

このオプションをTrueに設定すると、ブログコメントCSSの読み込みが停止します。 

false
message
文字列

コメントがない場合に表示するメッセージ。既定では空として表示されます(テキストは表示されません)。

""

ブログコンテンツ

ドラッグ&ドロップレイアウトにはブログ コンテンツ モジュールが含まれていますが、これらのモジュールは1つのタグでは作成されません。代わりに、条件付きロジックを使用してブログ記事とブログリストをどのようにレンダリングするかを定義します。ブログテンプレートのコーディングの詳細についてはこちらをご覧ください。

ブログ記事フィルター

トピック別の記事、月別の記事、執筆者別の記事のリンクリストを作成します。

注:このモジュールはブログ記事テンプレートでのみ使用できます。

{% 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>
ParameterTypeDescription Default
select_blog
「default」またはブログID

使用するHubSpotブログを選択します。このパラメーターでは、ブログIDまたは"default"値のどちらかを使用します。

"default"
expand_link_text
文字列

 記事数が表示可能なmax_links数を超える場合に表示するテキストリンク。リンクを省略するには、パラメーターを除外します。

"see all"
list_title
文字列

表示するリストタイトル。

""
list_tag
文字列

リストに使用されるタグを設定します。この値は通常、"ul"または"ol"にします。

"ul"
title_tag
文字列

リストタイトルに使用されるタグを設定します。

"h3"
max_links
数値

表示するフィルター値の最大数。全て表示するには、パラメーターを除外します。

5
filter_type
列挙

フィルターのタイプを選択します。有効な値は、"topic""month""author"です。

"topic"

ブログ記事リスト

最も人気のある記事または上位記事のリストを追加します。

注:このタグはブログ記事テンプレートでのみ使用できます。このタグのコンテンツは、クライアント側で非同期的に読み込まれます。そのため、読み込まれた後にフィードを操作する場合は、その操作を処理するグローバルJS関数を定義する必要があります。関数hsPostListingComplete(feeds)を使用してください。feedsには完了した全てのフィードのjQueryセレクターを渡します。この関数でDOMオブジェクトを直接操作できます。

{% 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>
ParameterTypeDescription Default
select_blog
「default」またはブログID

 リストに使用するHubSpotブログを選択します。このパラメーターでは、ブログIDまたは"default"値のどちらかを使用します。

"default"
list_title
文字列

表示するリストタイトル。

""
list_tag
文字列

リストに使用されるタグを設定します。この値は通常、"ul"または"ol"にします。

"ul"
title_tag
文字列

リストタイトルに使用されるタグを設定します。

"h3"
listing_type
文字列

指定した期間のブログ記事を新着順または人気順に表示します。指定可能な値は、recent、popular_all_time、popular_past_year、popular_past_six_months、popular_past_monthです。

"recent"
max_links
数値

 リストするブログ記事の最大数。

5
include_featured_image
ブール値

 記事リンクと共にキービジュアルを表示します。

False

ブログの関連記事

複数ブログの記事で共有されたパラメーターのセットに基づいてブログ記事のリストを追加します。記事は、セットパラメーターとの関連性に基づいて選択されます。オプションのcallbackパラメーターの使用例については、related_blog_posts HubLタグを使用して関連するブログ記事のリストを作成する方法を参照してください。

このタグは、ページ/記事レベルの編集可能モジュールを生成するのではなく、全体がHubLで設定されている点に注意してください。

{% related_blog_posts %} {% 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>
ParameterTypeDescription Default
blog_ids
整数

記事を含むブログのID。既定のブログを使用するには、このパラメーターを省略します。

blog_post_ids
文字列

リストする関連ブログ記事の検索に使用するブログ記事ID(カンマ区切り)。このパラメーターは、ウィジェットをページに表示する場合にのみ使用してください。ブログ記事の場合は既定で、ウィジェットが表示される記事になります。

blog_post_override
文字列

他のパラメーター値やフィルターに関係なく、返されたリストに常に表示されるブログ記事のID(カンマ区切り)。

limit
整数

 リストするブログ記事の最大数。

3
tags
文字列

記事に関連性があるかどうかを判定するために使用するタグ(カンマ区切り)。ブログ記事にこれらのタグのいずれかまたは類似のタグがある場合、記事の関連性が高くなり、リストでのランキングが向上します。

tag_boost
数値

関連する投稿を生成するために、tagsパラメーターで指定されたタグへの重みづけを大きくします。このパラメーターを含めると、現在表示されている投稿または指定された投稿に関連する投稿を、より近くに取り込めます。正の数値を使用します。

start_date
日時

最も古い公開日。

end_date
日時

最新の公開日。

blog_authors
文字列

 リストする記事の執筆者の名前(カンマ区切り)。

path_prefixes
文字列

リストする記事のURLパスまたはサブディレクトリー(カンマ区切り)。ブログ記事のパスに類似するプレフィックスがある場合は、記事の関連性が高くなり、リストでのランキングが向上します。

callback
文字列

返されるブログ記事をレンダリングするためのJavaScript関数の名前。関数に、形式を設定するブログ記事オブジェクトの配列が渡されます。callbackパラメーターとpost_formatterパラメーターのどちらも指定されていない場合、タグは既定の形式のHTMLを生成します。

none
post_formatter
文字列

返されるブログ記事を表示するためのカスタムマクロの名前。このマクロには、フォーマットするブログ記事オブジェクト、ブログ記事の反復数、および結果に含まれるブログ記事の合計数という3つのパラメーターが渡されます。指定されていないか、「default」に設定された場合は、組み込みのフォーマッターを使用して各記事がフォーマットされます。

default
allow_any_language
文字列

falseに設定すると、タグが使用されているページと同じ言語の投稿のみが表示されます。パラメーターをtrueに設定した場合は、言語制限が無視され、ページの言語にかかわらず全ての関連記事が取り込まれます。

False

ページの読み込み速度を改善するため、post_formatterではなくcallbackパラメーターを使用することを強くお勧めします。

ブログ ソーシャル シェアリング

ブログ ソーシャル シェアリングは、ブログ記事にシェアカウンターをレンダリングします(コンテンツ設定で有効になっている場合)。

{% 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>
ParameterTypeDescription Default
select_blog
「default」またはブログID

シェアカウンターに接続するブログを指定します。このパラメーターには"default"、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。

default
downgrade_shared_url
ブール値

ソーシャル メディア ネットワークに送信されるURLでHTTPを使用します。ドメインをHTTPSのみにアップグレードするときにカウントを保持するために使用します。

false

ブログ配信登録

ブログ配信登録タグは、特定のブログのブログ配信登録フォームをレンダリングします。このフォームは、ブログがコンテンツ設定で作成される度に自動的に作成され、ブログあたり常に1つの配信登録フォームがあります。配信登録フォームのフィールドはフォームエディターUIを使用して設定されることに注意してください。

{% 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>
ParameterTypeDescription Default
select_blog
「default」またはブログID

レンダリングするブログ配信登録フォームを選択します。このパラメーターには"default"、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。

default
title
文字列

配信登録フォームの上にh3タグタイトルのテキストを定義します。

"Subscribe Here!"
no_title
ブール値

Trueの場合、タイトルの上のh3タグは削除されます。

false
response_message
文字列

ユーザーがフォームを送信したときに表示されるインライン サンキュー メッセージを定義します。HTMLがサポートされます。

"Thanks for Subscribing!"
edit_form_link
文字列

このパラメーターは、対応するフォームエディター画面へとユーザーがクリックスルーできるリンクを生成します。このオプションは、モジュールにパラメーターoverrideable=Trueが指定された場合にのみ、エディターUIに表示されます。

例えば、HubIDとフォームIDを、既定のブログ配信登録フォームのURLの情報で置き換えるには、edit_form_link=" <ul>\n <li><a href="/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> "とします。

\nにより、コードが改行されます。

ブール値

ブール値タグは、[true]または[false]を出力するUIのチェックボックスを作成します。値を出力することに加え、このモジュールは、パラメーターexport_to_template_contextと組み合わせて使用すると、条件付きテンプレートロジックの定義に役立ちます。 

{% boolean "boolean" %} {% boolean "nav_toggle" label="Hide navigation", value=False, no_wrapper=True %}false
ParameterTypeDescription Default
value
ブール値

チェックボックスをオンとオフのどちらにするかを指定します。

False

選択

選択タグはコンテンツエディターUIでドロップダウンを作成し、ユーザーが選択する値を出力します。選択タグはプリセットされた一連の選択肢をユーザーに提供する場合に便利です。ページヘッダーとしてページのタイプを出力する場合などです。

選択値を出力することに加え、このタグは、パラメーターexport_to_template_contextと組み合わせて使用すると、条件付きテンプレートロジックの定義に役立ちます。 

{% 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>
ParameterTypeDescription
value
ブール値

ドロップダウンの既定のフィールド値

choices
シーケンス

値、または値とラベルのペアのカンマ区切りリスト。値とラベルのペアの構文を次に示します。choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]"。エディターではラベルが表示されますが、ページには値が出力されます。

色タグはページエディターUIでカラーピッカーを生成し、16進表記の色の値をテンプレートに出力します。このモジュールはテンプレートでのみ使用できます。CSSファイルでは使用できません。このタグを<style>またはインラインCSSで使用する場合、ラッパー<span>を削除するためno_wrapper=Trueパラメーターを使用できます。

{% color "color" %} {% color "my_color_picker" label="Choose a color", color="#000000", no_wrapper=True %}#000000
ParameterTypeDescription
color
文字列

カラーピッカーの既定の16進表記の色の値

CTA

CTA(Call-To-Action)タグを使用すると、ユーザーはHubSpot Calls-To-Action(CTA)ボタンをページの事前定義済み領域に追加できます。

{% 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>
ParameterTypeDescription
embed_code
文字列

CTAの埋め込みコード。\nで改行します。

full_html
文字列

CTAの埋め込みコード(embed_codeと同じ)。\nで改行します。

image_src
文字列

コンテンツエディターでプレビュー画像を定義する画像src URL。

image_editor
文字列

画像エディタープレビューのマークアップ

guid
文字列

CTAの固有ID番号。このIDは、特定のCTAの詳細画面のURLで確認できます。このパラメーターは、既定で表示するCTAを選択するために使用します。

image_html
文字列

CTAスクリプトがないCTA画像HTML。*

image_email
文字列

Eメール向けのCTAコード。*

*ここでは説明上、パラメーターを記載していますが、このパラメーター用にHubSpotによって生成されるコードは非常に特殊です。既定で選択されるCTAが必要な場合、CTAパラメーターをゼロから作成するのではなく、テンプレートレイアウト上でCTAを設定してからファイルに複製することをお勧めします。全てのパラメーターが正しく設定されたCTAのHubL CTAモジュールをコピーできます。

IDからCTAを生成するCTA関数もあります。

カスタムHTML

カスタムHTMLモジュールでは、ユーザーが未加工のHTMLをコンテンツエディターに入力できます。広範囲に及ぶ既定HTMLをタグに追加する必要がある場合は、ブロック構文を使用できます。

{% 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>
ParameterTypeDescription
value
文字列

モジュールの既定のコンテンツHTMLを設定します。

カスタムモジュール

カスタムモジュールを使用すると、HubSpotデザイナーはHubSpotのCMSのテンプレートやページで使用される編集可能なコンテンツオブジェクトのカスタムグループを作成できます。一方、マーケティング担当者は引き続きそのモジュール内に表示される特定のコンテンツをページごとに管理できます。カスタムモジュールとシンプルなHubL構文の詳細についてはこちらをご覧ください。

カスタムモジュールはカスタム モジュール エディターで構築する必要がありますが、コードテンプレートやHubLモジュールに含めることができます。カスタム モジュール エディターの右側のサイドバーの[テンプレートの使用]の下に[使用スニペット]が表示されます。

カスタムモジュールには、モジュールのIDと、読み込むモジュールを指定するためのパスパラメーターの文字列が必要です。使用スニペットにはラベルパラメーターも含まれます。以下の構文を確認してください。

{% 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>
ParameterTypeDescription
module_id
文字列

レンダリングするモジュールのID。

path
文字列

レンダリングするモジュールのパス。絶対パスの場合は先頭にスラッシュを付けます。これがない場合、パスはテンプレートへの相対パスです。HubLタグに対応するパスを指定したHubSpot既定モジュールの参照。@hubspot/rich_text、@hubspot/linked_imageなど。

エディタープレースホルダー

モジュールを作成する際には、フィールドに既定のコンテンツを追加したり、HTML+HubLファイルにHubLタグeditor_placeholderを追加したりすることで、プレースホルダーコンテンツ(入力例のコンテンツ)をレンダリングできます。このタグにより、エディター上にはモジュールのアイコンと名前が、空のプレースホルダーとしてレンダリングされます。

module-placeholder-content0

このタグは、モジュールに既定のコンテンツがない、既定のコンテンツが不要、またはモジュール開発を効率化するといった場合に役立ちます。

コンテンツが選択されていない場合にカスタムモジュールにプレースホルダーを追加するには、if文をHTML+HubLファイルに追加して、プレースホルダーをレンダリングします。

{% if module.cta_field.name %} {% cta guid="{{ module.cta_field }}" %} {% elif is_in_editor %} {% editor_placeholder %} {% endif %}

プレースホルダーのスタイルは編集できませんが、以下のプロパティーをモジュールのmeta.jsonファイルに追加することで、コンテンツをカスタマイズできます。

ParameterTypeDescription
show_module_icon
ブール値

モジュールのアイコンを表示するかどうか。

title
文字列

プレースホルダーに表示するタイトル。

description
文字列

プレースホルダーに表示する説明。

例えば、meta.jsonファイルは次のようになります。

// Module meta.json { "global" : false, "host_template_types" : [ "PAGE" ], "module_id" : 62170380654, "is_available_for_new_content" : true, "placeholder": { "show_module_icon": true, "title": "Call to action", "description": "Select a CTA" } }

フレキシブルカラム

フレキシブルカラムはテンプレート内の垂直カラムで、制作担当者はコンテンツエディターを使用して、ページでモジュールを挿入および削除することができます。HubLでフレキシブルカラムをコーディングするとき、他のHubLモジュールを選択してラップし、既定でフレキシブルカラムに表示されるようにできます。以下のサンプルコードで、基本構文、およびリッチテキストとフォームモジュールを既定のコンテンツとして含むフレキシブルカラムの例を示します。

フレキシブルカラムはページテンプレートにのみ追加できます。ブログやEメールテンプレートには追加できません。モジュールにフレキシブルカラムを含めることはできませんが、同様の機能を提供する反復可能なフィールドとグループを含めることはできます。 

{% 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>

注:このタグを使用する場合、コンテンツエディターで機能するように、labelフレキシブルカラムのname値に従う必要があります。例えば、次の構文は無効です。

[% widget_container label="My label" "my_flexible_column" %}

フォーム

ユーザーがHubSpotフォームを選択してページに追加できるようにします。

{% form "form" %} {% form "my_form" form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial" %} Block Syntax Example: {% widget_block form "my_form" form_follow_ups_follow_up_type="", response_redirect_id=306590405, form_to_use="08bd9f0d-3be9-41c2-93b6-231a3a71b143", title="Free Trial", notifications_are_overridden=True, sfdc_campaign="", response_message="Thanks for submitting the form.", response_response_type="redirect", response_redirect_url="", overrideable=True, gotowebinar_webinar_key="", response_redirect_name="Homepage (http://www.hubspot.com/)", label="Form", response={message="Thank you for submitting the form.", redirect_url=""} %} {% widget_attribute "notifications_override_email_addresses" is_json=True %}["noreply@hubspot.com"]{% end_widget_attribute %} {% end_widget_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: '158015', formId: '08bd9f0d-3be9-41c2-93b6-231a3a71b143', formInstanceId: '6756', pageId: 1, redirectUrl: "http:\/\/www.davidjosephhunt.com\/404", deactivateSmartForm: true, css: '', target: '#hs_form_target_module_13885064832664947', contentType: "landing-page", formData: { cssClass: 'hs-form stacked hs-custom-form' } }); </script> </div>
ParameterTypeDescription Default
form_key
文字列

ページレベルでのフォームの固有IDを指定します。

form_to_use
文字列

既定で読み込むフォームをフォームIDに基づいて指定します。このIDは各フォームのフォームエディターURLで確認できます。

title
文字列

フォームの上にh3ヘッダータグを入力します。

no_title
ブール値

 Trueの場合、タイトルの上のh3タグは削除されます。

False
form_follow_ups_follow_up_type
列挙

ワークフローへのコンタクトの登録や、シンプルなフォローアップEメールの送信などの、フォローアップアクションを指定します。指定可能な値は、no_actionsimpleautomationです。

simple_email_for_live_id
数値

公開ページ用のシンプルなフォローアップEメールのIDを指定します。

simple_email_for_buffer_id
数値

ページの自動保存バージョン用のシンプルなフォローアップEメールのIDを指定します。

follow_up_type_simple
ブール値

trueの場合、シンプルなフォローアップEメールを有効にします。form_follow_ups_follow_up_typeの代替。

follow_up_type_automation
ブール値

trueの場合、ワークフローに送信を登録します。form_follow_ups_follow_up_typeの代替。

simple_email_campaign_id
数値

シンプルなフォローアップEメールのIDを指定します。simple_email_for_live_idの代替。

form_follow_ups_workflow_id
数値

送信を登録するワークフローのIDを指定します。

response_redirect_url
文字列

外部ページにリダイレクトする場合、このパラメーターはリダイレクト先のURLを指定します。

response_redirect_id
数値

HubSpot上にホスティングされているページにリダイレクトする場合、このパラメーターにはそのページのページIDを指定します。ページIDは各ページのページエディターURLで確認できます。

response_response_type
列挙

送信時に別のページにリダイレクトするか、インライン サンキュー メッセージを表示するかを指定します。このパラメーターの値は"redirect"または"inline"にする必要があります。

inline
response_message
文字列

インライン サンキュー メッセージを設定します。このパラメーターではHTMLがサポートされます。

notifications_are_overridden
ブール値

Trueの場合、notifications_override_email_addressesパラメーターで選択されたEメールアドレスに、フォームによってフォーム通知が送信されます
(フォームの既定ではなく)

False
notifications_override_guid_buffer
文字列

ページの自動保存バージョンの優先設定のID。

notifications_override_guid
文字列

ページの公開バージョンの優先設定のID。

notifications_override_email_addresses
JSON

ブロック構文は、フォーム送信時に通知されるEメール受信者のJSONリストをサポートしています。これらのEメールアドレスは、フォームで設定されたEメール通知設定よりも優先されます。

gotowebinar_webinar_key
文字列

フォームを送信したコンタクトを登録するGoToWebinarウェビナーを指定します。GoToWebinar連携を使用しているポータルにのみ使用できます。

sfdc_campaign
文字列

フォームを送信したコンタクトを登録するSalesforceキャンペーンを指定します。このパラメーターの値はSFDCキャンペーンIDであり、Salesforceと連携されたポータルでのみ使用できます。

フッター

コンテンツ設定([Eメール]>[フッター情報])で指定された年および会社名を使用して著作権情報をレンダリングします。

{% 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>

ギャラリー

HubSpotギャラリータグを生成します。このギャラリータグはSlickに基づきます。標準モジュールHubL構文でギャラリーモジュールを作成できますが、HubLを使用して既定のスライドを事前定義する場合はブロック構文を使用する必要があります。両方の方法を以下に示します。ギャラリー画像は、JavaScriptを使用して遅延読み込みされます。

{% 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>
ParameterTypeDescription Default
slides
JSON

既定のキャプションのJSONリスト、リンクURL、代替テキスト、画像src、新しいタブで開くかどうか。上記のブロック構文を参照してください。

loop_slides
ブール値

Trueの場合、複数スライドを連続してループ処理します。

True
num_seconds
数値

スライド間で一時停止する時間(秒)。

5
show_pagination
ブール値

スライダーの下にスライド間を移動するためのボタンを表示します。

True
sizing
列挙

スライドの高さに基づいてスライダーのサイズを変更するかどうかを指定します。指定可能な値は、staticまたはresizeです。

"static"
auto_advance
ブール値

num_secondsに設定された時間の後に自動的にスライドを移動します。

False
transition
列挙

スライド切り替えのタイプを設定します。指定可能な値は、fadeまたはslideです。

"slide"
caption_position
列挙

キャプションの位置をスライド上またはスライドの下にします。指定可能な値は、belowまたはsuperimposeです。

"below"
display_mode
列挙

画像ギャラリーの表示方法を指定します。指定可能な値は、standard、lightbox、thumbnailです。

"standard"
lightboxRows
数値

"display_mode"が"lightbox"に設定された場合に、このパラメーターはLightbox内に表示される行数を制御します。

3

ヘッダー

テキストをh1~h6タグとしてレンダリングするヘッダーモジュールを生成します。

{% 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>
ParameterTypeDescription Default
header_tag
文字列

レンダリングする見出しタグを選択します。指定可能な値は、h1、h2、h3、h4、h5、h6です。

h1
value
文字列

見出しモジュール内の既定のテキストをレンダリングします。

"A clear bold header"

アイコン

アイコンタグを追加してユーザーが選択できるようにし、使用するアイコンを追加します。サポートされているアイコンセットは、FontAwesome 5.0.105.14.0、および6.4.2です。

このタグは、Eメールで有効になっているモジュールでは使用できません。

{% 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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
name
文字列

アイコンの名前。

style
文字列

アイコンのスタイル。指定可能な値:REGULARまたはSOLID

REGULAR
unicode
文字列

アイコンのUnicode文字表現。

icon_set
文字列

使用するFontAwesomeアイコンセット。有効な値は、以下のとおりです。

  • fontawesome-5.14.0 
  • fontawesome-5.0.10
  • fontawesome-6.4.2
purpose
文字列

アイコンの目的。アクセシビリティーのために使用します。有効な値は、decorativeまたはsemanticです。decorativeに設定した場合、さらにaria-hidden="true"属性がアイコンに追加されます。

decorative
title
文字列

アイコンのsvgのタイトル要素と、そのタイトルを指すlabelledby属性。

画像

ユーザーがコンテンツエディターから画像を選択できる画像タグを作成します。画像をターゲットURLにリンクする場合は、下記のlinked_imageを使用する必要があります。

{% 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>
ParameterTypeDescription Default
alt
文字列

画像の既定の代替テキストを設定します。

src
文字列

imgタグのsrc属性を入力します。

width
数値

imgタグのwidth属性を設定します。

The width of the image
height
数値

imgタグのstyle属性でmin-heightを設定します(Eメールテンプレートのみ)。

The height of the image
hspace
数値

imgタグのhspace属性を設定します。

align
文字列

imgタグのalign属性を設定します。指定可能な値は、left、right、centerです。

style
文字列

imgタグにインラインCSS宣言を追加します。例:style="border:1px solid blue; margin:10px"

loading
文字列

img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します(英語)。

画像のsrc

コンテンツエディター上に画像セレクターを作成する画像srcモジュールでは、imgタグの出力ではなく、画像のURLがレンダリングされます。画像srcをインラインCSSや他のマークアップに追加できるように、このタグは通常、no_wrapper=Trueパラメーターを付けて使用します。このタグの代用としては、export_to_template_contextパラメーターを使用する方法があります。

{% 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
ParameterTypeDescription Default
src
文字列

 既定のURL画像srcを指定します。

言語切り替え機能

特定CMSページの翻訳版へのリンクが付いた地球儀アイコンを追加します。多言語コンテンツの詳細についてはこちらをご覧ください。

{% 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>
ParameterTypeDescription Default
display_mode
列挙

言語切り替え機能のテキストの言語。値は以下のとおりです。

  • Pagelangでは、言語の名前が、切り替え機能が有効になっているページの言語で表示されます。
  • Localizedでは、各言語の名前がその言語で表示されます。
  • Hybridは、2つの組み合わせです。
Localized

画像リンク

リンクでラップされた、ユーザーが選択可能な画像を作成します。このモジュールには、画像モジュールの全てのパラメーターおよび2つの追加パラメーターが含まれます。追加パラメーターには、リンク先URL、およびリンクを新しいウィンドウで開くかどうかを指定します。

{% 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>
ParameterTypeDescription Default
alt
文字列

画像の既定の代替テキストを設定します。

src
文字列

imgタグのsrc属性を入力します。

width
数値

imgタグのwidth属性を設定します。

The width of the image
height
数値

imgタグのstyle属性でmin-heightを設定します(Eメールテンプレートのみ)。

The height of the image
hspace
数値

imgタグのhspace属性を設定します。

align
文字列

imgタグのalign属性を設定します。指定可能な値は、left、right、centerです。

style
文字列

imgタグにインラインCSS宣言を追加します。例:style="border:1px solid blue; margin:10px"

open_in_new_tab
ブール値

リンク先URLを別のタブで開くかどうかを選択します。

False
link
文字列

imgタグをラップするリンクの宛先URLを設定します。

target
文字列

リンクタグのtarget属性を設定します。

loading
文字列

img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します(英語)。

ロゴ

ロゴモジュールは、コンテンツ設定にある貴社のロゴ画像をレンダリングします。

{% 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&amp;width=200" class="hs-image-widget " width="200" alt="HubSpot logo" title="HubSpo logot"> </a> </span>
ParameterTypeDescription Default
suppress_company_name
ブール値

画像ロゴが設定されていない場合は会社名を非表示にします。

False
alt
文字列

画像の既定の代替テキストを設定します。

Value in Content Settings
src
文字列

imgタグのsrc属性を入力します。

Value in Content Settings
width
数値

imgタグのwidth属性を設定します。

The width of the image
height
数値

imgタグのstyle属性でmin-heightを設定します(Eメールテンプレートのみ)。

The height of the image
hspace
数値

imgタグのhspace属性を設定します。

align
文字列

imgタグのalign属性を設定します。指定可能な値は、left、right、centerです。

style
文字列

imgタグにインラインCSS宣言を追加します。例:style="border:1px solid blue; margin:10px"

open_in_new_tab
ブール値

リンク先URLを別のタブで開くかどうかを選択します。

False
link
文字列

imgタグをラップするリンクの宛先URLを設定します。

override_inherited_src
ブール値

trueの場合、srcを設定またはテンプレートから継承するのではなく、ロゴウィジェットのsrcを使用します。

True
heading_level
文字列

リンクされていないテキストベースのロゴを使用する場合、これにより、HTMLタグh1h2h3h4のいずれかの使用可能なオプションでテキストベースのロゴがラップされます。 

h1
loading
文字列

img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します(英語)。

メニュー

[コンテンツ設定]>[詳細メニュー]のメニューツリーに基づいて詳細メニューを生成します。テンプレートおよびモジュールでのメニューの使用に関する詳細については、メニューとナビゲーションを参照してください。idnullに設定された場合、メニュータグはHubSpotアカウントの既定のメニューをレンダリングします。

{% 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>
ParameterTypeDescription Default
id
整数

コンテンツ設定の詳細メニューのメニューツリーのID。

site_map_name
文字列

コンテンツ設定の詳細メニューのメニューツリーの名前。

"default"
root_type
列挙

詳細メニューのタイプを指定します。オプションは、"site_root"、"top_parent"、"parent"、"page_name"、"page_id"、"breadcrumb"です。これらの値は、静的、セクション別の動的、ページ別の動的、階層リンクに対応します。

"site_root"
flyouts
文字列

trueの場合、クラスがメニューツリーに追加されます。これにより、親にカーソルを置いたときに子メニュー項目が表示されるようにスタイルを設定できます。falseの場合、子メニュー項目は常に表示されます。

"true"
max_levels
整数

マークアップにレンダリングされるメニューのネストレベル数を指定します。このパラメーターでは、メニューで展開可能なメニューツリーの子の数を指定します。

2
flow
列挙

メニュー項目の方向を設定します。これによりメニューツリーにクラスが追加されるため、状況に応じてスタイル設定できます。指定可能な値は、horizontal、vertical、vertical_flyoutsです。horizontalメニューでは項目が横に並んで表示され、verticalメニューでは上から下に表示されます。

"horizontal"
root_key
文字列

メニューのルートを見つけるために使用されます。root_typeをpage_idまたはpage_nameに設定した場合、このパラメーターはそれぞれページIDまたはページのラベルにする必要があります。

"horizontal"

require_css

<head>でレンダリングするstyle要素を読み込むHubLタグ。

このタグはrequire_css関数に似ていますが、このタグはスタイルシートからではなくインラインでスタイルを挿入します。またこのタグは、同じページ上のCSSの他のインスタンスに対して重複排除しません。モジュールの構築時にスタイルシートを挿入する必要がある場合、1つのページでそのモジュールを複数回使用する可能性があるならば、代わりにrequire_css関数を使用できます。 

{{ 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 -->

require_head

テンプレートの<head>内であるstandard_header_includesの内部に配置される要素を読み込むHubLタグ。ほとんどのJavaScriptとCSSについては、require_jsrequire_cssを参照してください。require_headの使用例には、metaタグの指定、モジュールからの特殊なlinkタグ(プリフェッチや事前接続など)があります。

{% require_head %} <meta name="third-party-app-verification-id" content="123456"> <link rel="prefetch" href="http://example.com/large-script.js"> <!-- these are purely examples, you could add anything that requires being in the head. require_css and require_js should be used instead of this when embedding a style tag or script tag.--> {% end_require_head %}

require_js

レンダリングするscript要素を読み込むHubLタグ。<head />にレンダリングされるスクリプトを、ここで示すインラインの方法ではなく<script />タグを使用して別のファイルから読み込むには、代わりにHubL関数require_js(absolute_url)を使用します。

{{ 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 -->
ParameterTypeDescription Default
position
文字列

インラインスクリプトをレンダリングする位置を設定します。オプションは、"head""footer"です。

"footer"

リッチテキスト

WYSIWYGコンテンツエディターを作成します。

{% 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>
ParameterTypeDescription Default
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>

RSSリスティング

内部または外部のRSSフィードからコンテンツのリストを読み込みます。

注:このモジュールは、クライアント側で非同期的に読み込まれます。そのため、読み込まれた後にフィードを操作する場合は、その操作を処理するグローバルJS関数を定義する必要があります。関数hsRssFeedComplete(feeds)を使用してください。feedsには完了した全てのフィードのjQueryセレクターを渡します。この関数でDOMオブジェクトを直接操作できます。
{% 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>
ParameterTypeDescription Default
show_title
ブール値

 RSSフィードタイトルを表示または非表示にします。

True
show_date
ブール値

投稿日を表示します。

True
show_author
ブール値

執筆者名を表示します。

True
show_detail
ブール値

limit_to_charsパラメーターによって設定された最大文字数までの記事要約を表示します。

True
title
文字列

RSSフィードリストの上の見出しを入力します。

limit_to_chars
数値

要約に表示する文字の最大数。

200
publish_date_format
文字列

公開日の形式。指定可能な値は、"short""medium""long"です。"MMMM d, yyyy 'at' h:mm a"などのカスタム形式も使用できます。

"short"
attribution_text
文字列

執筆者を記事に関連付けるテキスト

"by"
click_through_text
文字列

記事要約の最後にあるクリックスルーリンクに表示されるテキスト。

"Read more"
publish_date_text
文字列

 記事がいつ公開されたかを示すテキスト。

"posted at"
include_featured_image
ブール値

HubSpotが生成したRSSフィードの記事リンクと共にキービジュアルを表示します。

False
item_title_tag
文字列

各記事タイトルのHTMLタグを指定します。

span
is_external
ブール値

RSSフィードは外部ブログです。

False
number_of_items
数値

表示する記事の最大数。

5
publish_date_language
文字列

公開日の言語を指定します。

en_US
rss_url
文字列

 RSSフィードが所在するURL。

content_group_id
文字列

フィードソースが内部ブログの場合、ブログのID。

select_blog
文字列

内部HubSpotブログフィードを選択するために使用できます。

default
feed_source
文字列

RSSフィードのソースを設定します。内部の場合、通常の形式は{rss_url="", is_external=False, content_group_id="2502431580"}です。外部の場合、通常の形式は{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}です。

tag_id
数値

フィードソースが内部ブログの場合、タグのID。

セクションヘッダー

htmlの見出しと<p>サブヘッダーを生成します。

{% 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>
ParameterTypeDescription Default
header
文字列

ヘッダーに表示するテキスト。

"A clear and bold header"
subheader
文字列

サブヘッダーに表示するテキスト。

"A more subdued subheader"
heading_level
文字列

セマンティックHTMLの見出しのレベル。h1からh6までがサポートされます。

"h1"

シンプルメニュー

シンプルメニューでは、ページレベルで変更できる基本的なナビゲーションメニューを作成できます。通常のメニューモジュールとは異なり、シンプルメニューはウェブサイト設定のナビゲーション画面からは管理されず、テンプレートとページエディターから管理されます。ブロック構文を使用して既定のメニューツリーを設定できます。

{% 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>
ParameterTypeDescription Default
orientation
列挙

ページのメニュー項目の方向をスタイル設定できるようにするための、メニューマークアップのクラスを定義します。指定可能な値は"horizontal""vertical"です。

"horizontal"
menu_tree
JSON

ページリンク名とターゲットURLを含むメニュー構造。

[]

ソーシャルシェアリング

ソーシャル シェアリング タグは、特定のページをシェアするために使用できるソーシャルメディアのアイコンを生成します。このモジュールをブロック構文と組み合わせると、アイコン画像などをカスタマイズできます。

{% 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>
ParameterTypeDescription Default
use_page_url
ブール値

trueの場合、モジュールは既定でページのURLをシェアします。

True
link
文字列

use_page_urlがfalseの場合、共有する別のURLを指定します。

pinterest
JSON

Pinterestリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
twitter
JSON

Twitterリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
linked_in
JSON

LinkedInリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
facebook
JSON

Facebookリンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above
email
JSON

Eメール シェア リンク形式とアイコン画像ソースのパラメーター。

See block syntax example, above

スペーサー

スペーサータグは空のspanタグを生成します。このタグは、スペーサーとして機能するようにスタイル設定できます。ドラッグ&ドロップレイアウトで、スペーサーモジュールはspan1~span12のクラスが指定されたコンテナーでラップされ、モジュールが12列のレスポンシブグリッドでどれほどのスペースを占めるかを指定します。

{% 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>

システム ページ タグ

次のタグは、パスワード リセット ページやEメール配信登録(サブスクリプション)ページなどのシステムページで使用できます。

Eメールバックアップ配信解除

Eメール受信者が配信を停止しようとするときにHubSpotがそのEメールアドレスを確認できない場合は、Eメール受信者に対してバックアップ配信解除タグが表示されます。このタグは、コンタクトがEメールコミュニケーションの配信を停止するEメールアドレスを入力するためのフォームをレンダリングします。これは、配信解除バックアップ システム テンプレートに使用する必要があります。

{% 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>
ParameterTypeDescription Default
header
String

配信解除フォームの上にh1タグのテキストをレンダリングします。

"Email Unsubscribe"
input_help_text
String

Eメール配信解除フォームフィールドの上にh3タグのヘルプテキストをレンダリングします。

"Your email address:"
input_placeholder
String

Eメール アドレス フォーム フィールド内にプレースホルダーテキストを追加します。

"email@example.com"
button_text
String

配信解除フォームの送信ボタンのテキストを変更します。

"Unsubscribe"

Eメール配信登録

このモジュールは、Eメール受信者が配信設定を編集するときにレンダリングされます。これは、配信設定システムテンプレートに使用する必要があります。

{% 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>
ParameterTypeDescription Default
header
String

配信設定フォームの上にh1タグのテキストをレンダリングします。

"Communication Preferences"
subheader_text
String

配信解除設定の上に見出しの下のテキストを入力します。

"<p>\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</p>"
unsubscribe_single_text
String

配信登録オプションの上に<p class="header">のテキストをレンダリングします。

"Uncheck the types of emails you do not want to receive:"
unsubscribe_all_text
String

全てのEメールの配信解除チェックボックス入力の上に<p class="header">のテキストをレンダリングします。

"Or check here to never receive any emails:"
unsubscribe_all_unsubbed_text
String

コンタクトが現在全てのEメール配信を解除済みの場合、レンダリングする<p>内のテキストを入力します。

"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
unsubscribe_all_option
String

全てのEメールの配信解除チェックボックス入力の横のテキストを設定します。

"Unsubscribe me from all mailing lists."
button_text
String

配信設定を更新する送信ボタンのテキストを設定します。

"Update email preferences"
resubscribe_button_text
String

コンタクトが配信に再登録する場合の送信ボタンのテキストを設定します。

"Yes, resubscribe me!"

Eメール配信登録確認

Eメール配信登録の更新確認は、受信者が配信設定を更新するとき、または配信解除する際のサンキューテンプレートに追加できるモジュールです。これは、配信設定システムテンプレートに使用する必要があります。

{% 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>
ParameterTypeDescription Default
header
String

配信解除フォームの上にh1タグのテキストをレンダリングします。

"Communication Preferences"
subheader_text
String

確認メッセージの上のテキストを入力します。

"<p>\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</p>"
unsubscribe_all_success
String

全てのEメールコミュニケーションを配信解除した際に表示されるテキストを設定します。

"You have successfully unsubscribed from all email communications."
subscription_update_success
String

受信者が配信設定を更新した際のテキストを設定します。

"You have successfully updated your email preferences."

メンバーシップのログイン

非公開コンテンツへのアクセスするためのログインフォームを作成します。 

{% 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&amp;hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&amp;updated=1644243124141&amp;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="javascript: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="/_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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
文字列

Eメール入力フィールドのラベル。

"Email"
password_label
文字列

パスワード入力フィールドのラベル。

"Password"
remember_me_label
文字列

[ログイン情報を記憶する]チェックボックスのラベル。

"Remember Me"
reset_password_text
文字列

パスワード リセット ハイパーリンクのテキスト。

"Forgot your password?"
submit_button_text
文字列

送信ボタンのテキスト。

"Login"
show_password
文字列

パスワード表示リンクのテキスト。

"Show password"

メンバーシップ登録

非公開コンテンツにアクセスするための登録フォームを作成します。 

{% member_register "my_register" %} {% member_register "my_register" email_label="Email", password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save Password", show_password="Show password" %}<span id="hs_cos_wrapper_my_register" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_member_register" style="" data-hs-cos-general-type="widget" data-hs-cos-type="member_register"><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/register?domain=default&amp;hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&amp;updated=1644243124290&amp;redirect_url=/_hcms/mem/login?success%3Dtrue" 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="/_hcms/mem/login?success=true"> <input id="hs-membership-form-hubspotutk" name="hubspotutk" type="hidden" value=""> <div class="hs-form-field"> <label for="hs-register-widget-email">Email*</label> <input class="hs-input" name="email_read_only" type="email" value="" id="hs-register-widget-email" disabled=""> <input name="email" type="hidden" value=""> <input name="token" type="hidden" value=""> </div> <div class="hs-form-field"> <label for="hs-register-widget-password">Password*</label> <a class="hs-register-widget-show-password" href="javascript:show_password('hs-register-widget-password');">Show password</a> <input class="hs-input" name="password" type="password" placeholder="Password" id="hs-register-widget-password"> </div> <div class="form-input-validation-message" id="hs-membership-password-requirements"> <ul class="no-list hs-error-msgs"> <li> <label>Password must be at least 8 characters long and include lower and uppercase letters, a number, and a symbol</label> </li> </ul> </div> <div class="hs-form-field"> <label for="hs-register-widget-password-confirm">Confirm Password*</label> <a class="hs-register-widget-show-password" href="javascript:show_password('hs-register-widget-password-confirm');">Show password</a> <input class="hs-input" name="password_confirm" type="password" placeholder="Confirm Password" id="hs-register-widget-password-confirm"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Save Password"> </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> <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>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
文字列

Eメール入力フィールドのラベル。

"Email"
password_label
文字列

パスワード入力フィールドのラベル。

"Password"
password_confirm_label
文字列

パスワード確認フィールドのラベル。

"Confirm Password"
submit_button_text
文字列

送信ボタンのテキスト。

"Save Password"
show_password
文字列

パスワード表示リンクのテキスト。

"Show password"

パスワードリセットのリクエスト

パスワードで保護されたページにアクセスするためのパスワードリセットEメールを送信するフォームを作成します。 

{% password_reset_request "my_password_reset_request" %} {% password_reset_request "my_password_reset_request" email_label="Email", submit_button_text="Send Reset Email" %}<span id="hs_cos_wrapper_my_password_reset_request" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_reset_request"><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> <div class="hs-form-field"> <ul class="no-list" style="text-align:center"> <li> <label class="hs-membership-global-message"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/reset/request?domain=default&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;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="/"> <div class="hs-form-field"> <label for="hs-reset-request-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-reset-request-widget-email"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Send Reset Email"> </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> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
email_label
文字列

Eメール入力フィールドのラベル。

"Email"
submit_button_text
文字列

送信ボタンのテキスト。

"Send Reset Email"
password_reset_message
文字列

パスワードリセットEメールをリクエストした後に表示されるメッセージ。

False

パスワードリセット

パスワードで保護されたページにアクセスするためのパスワード リセット フォームをレンダリングします。 

{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}<span id="hs_cos_wrapper_my_password_reset_request" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_reset_request" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_reset_request"><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> <div class="hs-form-field"> <ul class="no-list" style="text-align:center"> <li> <label class="hs-membership-global-message"></label> </li> </ul> </div> <form method="post" action="/_hcms/mem/reset/request?domain=default&amp;hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&amp;portalId=2272014&amp;tc_deviceCategory=desktop&amp;template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&amp;updated=1644243124282&amp;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="/"> <div class="hs-form-field"> <label for="hs-reset-request-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-reset-request-widget-email"> </div> <div class="hs-membership-loader hs_submit hs-submit"> <div class="actions"> <input type="submit" class="hs-button primary large" value="Send Reset Email"> </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> </span>
Use this table to describe parameters / fields
ParameterTypeDescription Default
password_label
文字列

パスワード入力フィールドのテキストラベル。

"Email"
password_confirm_label
文字列

パスワード確認入力フィールドのテキストラベル。

"Send Reset Email"
submit_button_text
文字列

フォーム送信ボタンのテキストラベル。

False
show_password
文字列

入力されたパスワード値を表示するボタンのテキストラベル。

False
password_requirements
文字列

パスワード要件を説明するテキストラベル。

False

パスワードプロンプト

パスワードで保護されたページにパスワードプロンプトを追加します。

{% password_prompt "password_prompt" %} {% password_prompt "my_password_prompt" submit_button_text="Submit", bad_password_message="Sorry, please try again.\n", label="Password Prompt" %}<span id="hs_cos_wrapper_password_prompt" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_password_prompt" style="" data-hs-cos-general-type="widget" data-hs-cos-type="password_prompt"> <form method="post" action="/_hcms/protected/auth"> <input name="content_id" type="hidden" value="1"> <input name="redirect_url" type="hidden" value="https://preview.hs-sites.com/content-rendering/v1/public/_hcms/preview/template/multi"> <input name="password" type="password" id="hs-pwd-widget-password" style="height: 22px; margin-top: -5px"> <input type="submit" class="hs-button primary large" value="Submit"> </form> <script type="text/javascript"> document.getElementById("hs-pwd-widget-password").focus(); </script> </span>
ParameterTypeDescription Default
submit_button_text
文字列

 パスワード入力フィールドの下にあるボタンのラベル。

"Submit"
bad_password_message
文字列

 正しくないパスワードが入力された場合に表示されるメッセージ。

"<p>Sorry, please try again.</p>"
password_placeholder
文字列

 パスワードフィールド内のプレースホルダーテキストを定義します。

"Password"

テキスト

1行テキストを作成します。このタグは、no_wrapper=Trueパラメーターを指定してマークアップと組み合わせて使用すると便利です。例えば、定義済みアンカーのターゲット定義をエンドユーザーに許可する場合、no_wrapper=Trueを指定したテキストモジュールをhrefに入力できます。

{% text "text" %} {% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}<span id="hs_cos_wrapper_simple_text_field" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">This is the default value for this text field</span>
ParameterTypeDescription Default
value
文字列

1行テキストフィールドの既定のテキストを設定します。

テキストエリア

テキストエリアはユーザーがプレーンテキストを入力できる点でテキストモジュールと似ていますが、コンテンツエディター上で大きなエリアを提供できます。このモジュールではHTMLはサポートされません。定義済みのラッピングタグ内で直接使用する場合は、no_wrapper=trueパラメーターを追加します。

{% textarea "my_textarea" %} {% textarea "my_textarea" label="Enter plain text block", value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.", no_wrapper=True %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a urna quis lacus vehicula rutrum.
ParameterTypeDescription Default
value
文字列

テキストエリアの既定のテキストを設定します。

動画プレーヤー

[埋め込み、共有、トラッキングを許可]設定が有効になっているファイルマネージャーの動画ファイルの動画プレーヤーをレンダリングします。

{% video_player "embed_player" %} {% video_player "embed_player" overrideable=False, type="scriptV4", hide_playlist=True, viral_sharing=False, embed_button=False, width="600", height="375", player_id="6178121750", style="", conversion_asset="{"type":"FORM","id":"9a77c63f-bee6-4ff8-9202-b0af020ea4b2","position":"POST"}" %}
ParameterTypeDescription Default
hide_playlist
ブール値

動画のプレイリストを非表示にします。

True
playlist_color
文字列

プレイリストの16進表記の色の値。

play_button_color
文字列

再生ボタンと一時停止ボタンの16進表記の色の値。

#2A2A2A
embed_button
ブール値

プレーヤーに埋め込みボタンを表示します。

False
viral_sharing
ブール値

プレーヤーにソーシャルネットワークのシェアボタンを表示します。

False
width
数値

埋め込み動画プレーヤーの幅。

Auto
height
数値

埋め込み動画プレーヤーの高さ。

Auto
player_id
数値

埋め込む動画のplayer_id

style
文字列

プレーヤーの追加のスタイル。

conversion_asset
JSON

プレーヤーのイベント設定。動画再生の前または後にCTAまたはフォームをレンダリングできます。このパラメーターは、type(FORMまたはCTA)、id(typeオブジェクトのGUID)、position(POSTまたはPRE)という3つのパラメーターを含むJSONオブジェクトを受け入れます。

See above example
placeholder_alt_text
文字列

動画の代替テキスト。


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。