HubL標準タグ

Last updated: 4月 12, 2024

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

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

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="{"rumScriptExecuteTime":1396.815,"rumServiceResponseTime":7737.500000000001,"rumFormRenderTime":187.17999999999938,"rumTotalRenderTime":7738.14,"rumTotalRequestTime":183.2549999999992,"pageUrl":"http://311600.hs-sites.com/-temporary-slug-5eccb1d9-1f1b-4bbd-8e19-00e198331b15?hs_preview=ALicr-ma-4312320350","pageTitle":"HubSpot Sales Professional User Guide: HubSpot Sales Professional Overview","source":"FormsNext-static-1.390","isHostedOnHubspot":true,"timestamp":1479135449193,"userAgent":"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","referrer":"","hutk":"a525e671c25f6b108d25e08c892e359e","originalEmbedContext":{"portalId":"311600","formId":"d30edada-82e4-4a69-aaf4-a9d0376f37e6","target":"#comment-form","redirectUrl":"http://www.hubspot.com/contact-sales/thanks/","pageId":"23423","pageName":"My great landing page","css":".your-custom-css {background-color: #fe7722}","requiredCss":".my-custom-error-msgs {border-radius: 3px;}","submitButtonClass":"hs-button primary"},"recentFieldsCookie":{},"pageId":"23423","pageName":"My great landing page","boolCheckBoxFields":"subscribe","dateFields":"","redirectUrl":"http://www.hubspot.com/contact-sales/thanks/","smartFields":{},"urlParams":{"hs_preview":"ALicr-ma-4312320350"},"formValidity":{},"correlationId":"55d71532-ab6b-4415-98f5-f3a16d7741c9","disableCookieSubmission":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);


Parameter	Type	Description	Default
`limit`	数値	最大コメント数を設定します。	`5000`
`select_blog`	「default」またはブログID	埋め込みコメントにどのブログが接続されるかを指定します。このパラメーターには`"default"`、または（ブログダッシュボードのURLで取得できる）特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。	`default`
`skip_css`	ブール値	このオプションをTrueに設定すると、ブログコメントCSSの読み込みが停止します。	`false`
`message`	文字列	コメントがない場合に表示するメッセージ。既定では空として表示されます（テキストは表示されません）。	`""`

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


Parameter	Type	Description	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>


Parameter	Type	Description	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`

{% 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=""></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>


Parameter	Type	Description	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`

HubL

{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';
      
      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>

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


Parameter	Type	Description	Default
`select_blog`	「default」またはブログID	シェアカウンターに接続するブログを指定します。このパラメーターには`"default"`、または（ブログダッシュボードのURLで取得できる）特定のブログのIDを指定できます。既定のブログを使用する場合、このパラメーターは不要です。	`default`
`downgrade_shared_url`	ブール値	ソーシャルメディアネットワークに送信されるURLでHTTPを使用します。ドメインをHTTPSのみにアップグレードするときにカウントを保持するために使用します。	`false`

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


Parameter	Type	Description	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により、コードが改行されます。


Parameter	Type	Description	Default
`value`	ブール値	チェックボックスをオンとオフのどちらにするかを指定します。	`False`

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

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


Parameter	Type	Description
`value`	ブール値	ドロップダウンの既定のフィールド値
`choices`	シーケンス	値、または値とラベルのペアのカンマ区切りリスト。値とラベルのペアの構文を次に示します。`choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]"`。エディターではラベルが表示されますが、ページには値が出力されます。


Parameter	Type	Description
`color`	文字列	カラーピッカーの既定の16進表記の色の値

{% 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">  <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>  </span>


Parameter	Type	Description
`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関数もあります。

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


Parameter	Type	Description
`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>


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

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

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

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


Parameter	Type	Description
`show_module_icon`	ブール値	モジュールのアイコンを表示するかどうか。
`title`	文字列	プレースホルダーに表示するタイトル。
`description`	文字列	プレースホルダーに表示する説明。

フレキシブルカラムはテンプレート内の垂直カラムで、制作担当者はコンテンツエディターを使用して、ページでモジュールを挿入および削除することができます。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>

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


Parameter	Type	Description	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_action`、`simple`、`automation`です。
`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と連携されたポータルでのみ使用できます。

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


Parameter	Type	Description	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`


Parameter	Type	Description	Default
`header_tag`	文字列	レンダリングする見出しタグを選択します。指定可能な値は、h1、h2、h3、h4、h5、h6です。	`h1`
`value`	文字列	見出しモジュール内の既定のテキストをレンダリングします。	`"A clear bold header"`

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

Use this table to describe parameters / fields
Parameter	Type	Description	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`属性。

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


Parameter	Type	Description	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属性を制御します。ブラウザーベースの遅延読み込みに使用します（英語）。


Parameter	Type	Description	Default
`src`	文字列	既定のURL画像srcを指定します。

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


Parameter	Type	Description	Default
`display_mode`	列挙	言語切り替え機能のテキストの言語。値は以下のとおりです。 `Pagelang`では、言語の名前が、切り替え機能が有効になっているページの言語で表示されます。 `Localized`では、各言語の名前がその言語で表示されます。 `Hybrid`は、2つの組み合わせです。	`Localized`

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


Parameter	Type	Description	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" %}


Parameter	Type	Description	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タグ`h1`、`h2`、`h3`、`h4`のいずれかの使用可能なオプションでテキストベースのロゴがラップされます。	`h1`
`loading`	文字列	img要素のloading属性を制御します。ブラウザーベースの遅延読み込みに使用します（英語）。

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


Parameter	Type	Description	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"`
`label`	文字列	このエンティティーを説明するためのリッチコンテンツ	`False`
`label`	文字列	このエンティティーを説明するためのリッチコンテンツ	`False`

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

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


Parameter	Type	Description	Default
`position`	文字列	インラインスクリプトをレンダリングする位置を設定します。オプションは、`"head"`と`"footer"`です。	`"footer"`

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


Parameter	Type	Description	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_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>


Parameter	Type	Description	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。

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


Parameter	Type	Description	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>


Parameter	Type	Description	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 %}


Parameter	Type	Description	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`

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>


Parameter	Type	Description	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"`

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


Parameter	Type	Description	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!"`

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


Parameter	Type	Description	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&hs_preview_key=c4H4EEQCL-JSCFBlDzG4wg&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-login.html&updated=1644243124141&redirect_url=/" id="hs-membership-form" onsubmit="onFormSubmit()" data-hs-do-not-collect=""> <input name="csrf_token" type="hidden" value=""> <input name="redirect_url" type="hidden" value="/"> <input id="hs-membership-form-hubspotutk" name="hubspotutk" type="hidden" value=""> <div class="hs-form-field"> <label class="hs-login-widget-email-label" for="hs-login-widget-email">Email*</label> <input class="hs-input" name="email" type="text" placeholder="Email" id="hs-login-widget-email" value=""> </div> <div class="hs-form-field"> <label class="hs-login-widget-password-label" for="hs-login-widget-password">Password*</label> <a class="hs-login-widget-show-password" href="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
Parameter	Type	Description	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&hs_preview_key=_zUv_TyY1BCRQ2RviUepiQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-register.html&updated=1644243124290&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
Parameter	Type	Description	Default
`email_label`	文字列	Eメール入力フィールドのラベル。	`"Email"`
`password_label`	文字列	パスワード入力フィールドのラベル。	`"Password"`
`password_confirm_label`	文字列	パスワード確認フィールドのラベル。	`"Confirm Password"`
`submit_button_text`	文字列	送信ボタンのテキスト。	`"Save Password"`
`show_password`	文字列	パスワード表示リンクのテキスト。	`"Show password"`

{% 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&hs_preview_key=x7aXsEAvlLtUOa1P5t89wQ&portalId=2272014&tc_deviceCategory=desktop&template_file_path=my-test-theme%2Ftemplates%2Fsystem%2Fmembership-reset-password-request.html&updated=1644243124282&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
Parameter	Type	Description	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" %}

Use this table to describe parameters / fields
Parameter	Type	Description	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>


Parameter	Type	Description	Default
`submit_button_text`	文字列	パスワード入力フィールドの下にあるボタンのラベル。	`"Submit"`
`bad_password_message`	文字列	正しくないパスワードが入力された場合に表示されるメッセージ。	`"<p>Sorry, please try again.</p>"`
`password_placeholder`	文字列	パスワードフィールド内のプレースホルダーテキストを定義します。	`"Password"`


Parameter	Type	Description	Default
`value`	文字列	1行テキストフィールドの既定のテキストを設定します。


Parameter	Type	Description	Default
`value`	文字列	テキストエリアの既定のテキストを設定します。


Parameter	Type	Description	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がご提供しているヘルプはこちらでご確認ください。

アプリと連携

CMS

リファレンス

コミュニティー

アプリマーケットプレイス New

CMSアセットマーケットプレイス

アプリ パートナー プログラム

CMS Reference Docs

HubL標準タグ

ブログコメント

ブログコンテンツ

ブログ記事フィルター

ブログ記事リスト

ブログの関連記事

例

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

ブログ配信登録

ブール値

選択

色

CTA

カスタムHTML

カスタムモジュール

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

フレキシブルカラム

フォーム

フッター

ギャラリー

ヘッダー

アイコン

画像

画像のsrc

言語切り替え機能

画像リンク

ロゴ

メニュー

require_css

require_head

require_js

リッチテキスト

RSSリスティング

セクションヘッダー

シンプルメニュー

ソーシャルシェアリング

スペーサー

システム ページ タグ

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

Eメール配信登録

Eメール配信登録確認

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

メンバーシップ登録

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

パスワードリセット

パスワードプロンプト

テキスト

テキストエリア

動画プレーヤー

アンケートにご協力ください

アプリパートナープログラム

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

システムページタグ