Form Layout on Landing Page Templates | Community
Skip to main content
David_Negron
David_Negron
Level 2
September 18, 2018
Question

Form Layout on Landing Page Templates

  • September 18, 2018
  • 2 replies
  • 4468 views

I recently uploaded a LP guided template from Marketo and was wondering what I would need to do get the forms to look how they do on our other landing page templates. Is this something that I could simply add to the code of the original landing page template or would I have to have someone customize this for me?

Here is a form on a landing page that is using one of our older templates and a link to the page

http://lp.tagetik.com/ADV-IFRS-17-NA.html

Here is a landing page using the new template and the misalignment of the same form

http://lp.tagetik.com/The-Future-of-the-Automotive-Industry.html

@Sanford Whiteman​ any ideas?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

Grace_Brebner3
Grace_Brebner3
Level 10
September 18, 2018

Hey David,

Just to confirm - it's the same form on both? It sounds like there is custom CSS styling that form, but that the CSS is housed within the other landing page template and not in the form itself.

See if you can find that CSS in the original template code.

Casey_Grimes2
Casey_Grimes2
Level 10
September 19, 2018

Hi David,

What looks like happened here is that someone wrote a CSS override specifically on ADV-IFRS-17-NA.html on line 78:

.mktoFormRow label[for="MarketingCommPreferences__c"] {

    display: block !important;

    width: 287px !important;

    font-size: 13px !important;

    font-weight: 700 !important;

}

Because this is not on your other LP, you're not seeing that same behavior. What I'd likely do to make this more universal is something along the lines of:

.mktoFormRow label[for="MarketingCommPreferences__c"] {

    display: block;

    width: 100% !important;

    margin-bottom: 5px;

}

.mktoRadioList {

    padding: 0.3em 0.3em 0.3em 0 !important;

    width: 100% !important;

}

Both of these can either be dropped in your form's custom CSS, the LP's CSS or an external embedded stylesheet.

(Also, if you could switch the form style so it doesn't have that glow on the button that'd be a nice finishing touch.)

    David_Negron
    David_NegronAuthor
    Level 2
    September 20, 2018

    @Courtney Grimes Thanks for the reply!

    Do you know how I can add a form title element to the Landing Page Template?

    Also, how can I hide the field labels outside of the fields in the screenshots above?

    I should note that we are trying to avoid using multiple forms and would like to use the same form that we've been using in the design studio.

    Dave_Roberts
    Dave_Roberts
    Level 10
    October 11, 2018

    Hey David,

    To add a form title, you'll want to add an editable area (lines 01-03) or token (line 08) into the html above your form.

    To turn off the labels, you can add a bit of CSS to the Custom CSS on the form itself (line 13-14).

    <div class="mktoText" id="Form-Headline" mktoName="Form Headline">
    <p>Form heading text here...</p>
    </div>
    <div class="mktoForm" ... > <!-- your form div is here in the HTML -->
    <!-- or -->
    <p>{{my.FormHeadlineToken}}</p>
    <div class="mktoForm" ...> <!-- your form div is here in the HTML -->
    <!-- to hide the labels on the form fields, you can add this CSS to the Custom CSS on your form -->
    /* Hide form labels */
    form.mktoForm label.mktoLabel {display:none !important;}

    Cheers,

    Dave

    Terms & ConditionsAccessibility statement

    Loading footer...