Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / Designing Marketing Fo...
Customer experience | Sales, Customer Insights,...
Answered

Designing Marketing Forms - Distorted Forms/Best Practices

(0) ShareShare
ReportReport
Posted on by dxshyam 230

Greetings!

I am working on D365 v9.0 Dynamics for Marketing.

I designed a form and found it had alignment issues (both horizontal and vertical), is this normal or am I doing missing something while designing the form.

pastedimage1591627511165v1.png

  1. The label and its place holder are not the same level (Yellow lines)
  2. All the place holders are not starting from the same position (Blue lines)
  3. Vertical alignment between fields (Red lines) are not evenly spread.

Any pointers in resolving this alignment issue as well as detailed document on how to design these forms would be really helpful

Thanks

Shyam

  • dxshyam Profile Picture
    dxshyam 230 on at
    RE: Designing Marketing Forms - Distorted Forms/Best Practices

    Thank you so much  Clofy, I will go through the URL and explore how to host my page on an external page.

    Thanks,

    Shyam

  • cloflyMao Profile Picture
    cloflyMao 25,198 on at
    RE: Designing Marketing Forms - Distorted Forms/Best Practices

    Hi Shyam,

    1. Activate button is available for some entities such as Account or Contact, however, somehow the button is not enabled to Marketing Form.

    You could try it that whether the deactivated form could be activated again by code.(It works in my environment.)

    2 . There are two options for us to run form on web page.

    Option 1: Run the form on native marketing page.

    We just need to create a new marketing page record, then drag form element to page.

    pastedimage1591697074340v1.png

    It will run marketing page and marketing form on Portal page.

    Option 2: Run the form on our own page.

    Firstly we should authenticate our website domain with tutorial below:

    https://docs.microsoft.com/en-us/dynamics365/marketing/mkt-settings-authenticate-domains#authenticate-a-domain

    Next, create a new form page record in Form hosting tab, the new form page record will automatically generate a script, we need to paste the code to our own page.

    (And our domain will be shown as "authenticated")

    pastedimage1591697292252v2.png

    pastedimage1591697430009v3.png

    Then you can check whether any lead is created in Marketing form > Insights > Submissions.

    See tutorial below for more details:

    https://docs.microsoft.com/en-us/dynamics365/marketing/embed-forms#embed-a-dynamics-365-marketing-form-on-an-external-page

    Regards,

    Clofly

  • dxshyam Profile Picture
    dxshyam 230 on at
    RE: Designing Marketing Forms - Distorted Forms/Best Practices

    Hi Clofly,

    That looks neat and I wanted to have my page similar, will work on it.

    I had accidentally deactivated my Marketing form yesterday, do we have any option to get that back or do I have to create them again?

    Also, can you tell me what is required in addition to creation of Marketing Form Landing page to see the actual form live and upon submit it actually creates Lead in D365.

    This is what I have done

    --Created a Marketing Form

    --Set it to only Leads

    --Generate Leads without Matching Strategy Set to No

    --Can see one related Marketing Form Page under Form Hosting

    --At the moment I do not have an external domain, so not adding any domain for whitelisting

    What additional steps are required for me to test this as a page by entering field values and submitting to see them create in D365 Leads.

    Regards,

    Shyam

  • Verified answer
    cloflyMao Profile Picture
    cloflyMao 25,198 on at
    RE: Designing Marketing Forms - Distorted Forms/Best Practices

    Hi Shyam,

    1. My attached screenshot is just a demo to show that labels and input fields could be in same level after going live form in web page. 

    We should add more adjustments toward all input elements to make everything could display well in live page.

    1. Vertical equidistant space between fields:

    My solution is to apply "margin bottom" attribute to first four rows.

    First Name: margin bottom 15px

    Last Name: margin bottom 15px

    Email: margin bottom 15px

    City: margin bottom 15px

    Not modify two optionset elements

    Address 2: margin top 15px

    Job Title: margin top 15px

    2. Red asterisk alignment

    The proportion between label and field is already calculated, but red asterisk will take up more space,

    we should copy the red asterisk "<span class="lp-required" style="color: rgb(255, 0, 0);">*</span>" into label container.

    21.JPG

    Finally modified result:

    pastedimage1591683015655v1.png

    Source code of my form:

    2. Try to execute code below in console to test whether your form could be reactivated again.

    var id = Xrm.Page.data.entity.getId().replace(/\{|\}/gi, "").toLowerCase();

var etn = Xrm.Page.data.entity.getEntityName();

var data = {
    statecode: 0
}

Xrm.WebApi.updateRecord(etn, id, data).then(
    function success(result) {
        console.log(result);
        // perform operations on record retrieval
    },
    function (error) {
        console.log(error.message);
        // handle error conditions
    }
);

    pastedimage1591684769509v2.png

    It works in my environment.

    Regards,

    Clofly

  • dxshyam Profile Picture
    dxshyam 230 on at
    RE: Designing Marketing Forms - Distorted Forms/Best Practices

    Hi Clofly,

    Thanks for responding, is the screenshot attached is after you go live? because even though the left alignment issue is taken care the alignment between rows are not equidistant (space between Address2 and Jobtitle vs space between Education and Address2)

    also, Last Name and it's Place holder are not aligned at the same level (Label of Last Name appears to be one line above it's place holder)

    Is there a way to activate a Marketing form which I accidentally deactivated yesterday? otherwise I will have to redo my forms.

    Thanks,

    Shyam

  • cloflyMao Profile Picture
    cloflyMao 25,198 on at
    RE: Designing Marketing Forms - Distorted Forms/Best Practices

    Hi Shyam,

    I reproduced issue in your screenshot with steps below:

    1. Select a field element, click "Align Left" button of pop up edit tool.

    2. After step 1, set Label position to Left in Properties tab. 

    pastedimage1591672012836v1.png

    However, when I go live the form, it display well in web page.

    pastedimage1591672080387v2.png

    It seems that the issue exists in form designer, you could try to check whether form layout could display normally in live page.

    Regards,

    Clofly

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

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,269 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,198 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans