Skip to main content

Notifications

Announcements

No record found.

Customer experience | Sales, Customer Insights,...
Suggested answer

Multiple tabs on landing page

(0) ShareShare
ReportReport
Posted on by Microsoft Employee

Hi,

Is there a way we can add multiple tabs on landing page in D365 marketing ??

Instead of single form, we want to split that form into multiple tabs. Is that possible ??

Regards,

Akash

  • Suggested answer
    Nya Profile Picture
    Nya 29,058 on at
    RE: Multiple tabs on landing page

    Hi Akash,

    You can try to adjust the HTML of the marketing page.

    Here is an example of the HTML which contains several tabs.


    <html>

    <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="type" value="marketing-designer-content-editor-document" type="xrm/designer/setting" />
    <meta type="xrm/designer/setting" name="layout-editable" value="marketing-designer-layout-editable" />
    <meta type="xrm/designer/setting" name="layout-max-width" value="600px" datatype="text" label="Layout max width" />
    <meta type="xrm/designer/setting" name="font-family" value="Verdana, Arial, sans-serif" datatype="font" label="Font Family"
    />
    <meta type="xrm/designer/setting" name="body-text-size" value="14px" datatype="text" label="Body Font Size" />
    <meta type="xrm/designer/setting" name="body-text-color" value="#000" datatype="color" label="Body Text Color" />
    <style>
    body {
    font-family: /* @font-family */
    Verdana, /* @font-family */
    Arial,
    /* @font-family */
    sans-serif/* @font-family */
    ;
    font-size: /* @body-text-size */
    14px/* @body-text-size */
    ;
    color: /* @body-text-color */
    #000/* @body-text-color */
    ;
    }

    [data-layout="true"] {
    margin: 0 auto;
    max-width: /* @layout-max-width */
    600px/* @layout-max-width */
    ;
    }

    @media only screen and (max-width: 768px) {
    .columnContainer {
    width: 100% !important;
    }
    }

    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    }

    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px;
    /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
    }

    ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
    }

    ul.tabs li a:hover {
    background: #ccc;
    }

    html ul.tabs li.active,
    html ul.tabs li.active a:hover {
    /*
    --Makes sure that the active tab does not listen to the hover properties--
    */
    background: #fff;
    border-bottom: 1px solid #fff;
    /*--Makes the active tab look like it's connected with its content--*/
    }

    .tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    }

    .tab_content {
    padding: 20px;
    font-size: 1.2em;
    }

    .clear {
    clear: both;
    }
    </style>

    </head>

    <body>
    <div class="tab-parent">
    <ul class="tabs">
    <li>
    <a href="#tab1">1</a>
    </li>
    <li>
    <a href="#tab2">2</a>
    </li>
    </ul>

    <div class="tab_container">
    <div id="tab1" class="tab_content">
    Tab Content 1
    </div>
    <div id="tab2" class="tab_content">
    Tab Content 2
    </div>
    </div>
    <div class="clear"></div>
    </div>
    <br /><br />
    <div class="tab-parent">
    <ul class="tabs">
    <li>
    <a href="#tab3">3</a>
    </li>
    <li>
    <a href="#tab4">4</a>
    </li>
    </ul>

    <div class="tab_container">
    <div id="tab3" class="tab_content">
    Tab Content 3
    </div>
    <div id="tab4" class="tab_content">
    Tab Content 4
    </div>
    </div>
    <div class="clear"></div>
    </div>
    <script src="">ajax.googleapis.com/.../script>
    <script>
    $(document).ready(function() {

    //When page loads...
    $('.tab-parent').each(function() {
    $(this).find(".tab_content").hide(); //Hide all content
    $(this).find("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(this).find(".tab_content:first").show(); //Show first tab content
    });

    //On Click Event
    $("ul.tabs li").click(function() {
    var parents = $(this).parentsUntil('.tab-parent').parent();
    $("li", parents).removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content", parents).hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
    });

    });
    </script>
    </body>

    </html>

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Congratulations to the January Top 10 leaders!

Check out the January community rock stars...

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,187 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 230,966 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans