[Resolved] Embedded Form related issue

Home Forums Support [Resolved] Embedded Form related issue

Home Forums Support Embedded Form related issue

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1642417
    Juned

    Hi,

    I started using this email automation since few days, but I am facing issues related with embedded forms. Pls guide me for following:

    1. The embedded widget (newsletter form) is visible at my home page of staging site (used via shortcode) (as last block, above header) in desktop view. But it’s visible incomplete in Mobile view.

    2. Could you pls guide me where/how to copy-paste the below sample codes for displaying it desired location:

    A)

    <data id=”mj-w-res-data” data-token=”0e9af75bdc4ffe6a160dcde03fbd2df0″ class=”mj-w-data” data-apikey=”6qS1″ data-w-id=”Hp0″ data-lang=”en_US” data-base=”https://app.mailjet.com&#8221; data-width=”640″ data-height=”409.8″ data-statics=”statics”></data>

    <b>SUBSCRIBE TO NEWSLETTER!</b>

    <script type=”text/javascript” src=”https://app.mailjet.com/statics/js/widget.modal.js”></script&gt;

    B)

    Subscribe now!

    Kind Regards,

    Juned

    #1642473
    Juned

    Hi,

    I just tried one of the Pop-up button at the last block (before header). Is it also the correct way??

    Can you help me with the alignment of the text at the button?

    <data id=”mj-w-res-data” data-token=”4a5798893ce3c2b8c67e2bccc4f693c6″ class=”mj-w-data” data-apikey=”6qS1″ data-w-id=”Hp0″ data-lang=”en_US” data-base=”https://app.mailjet.com&#8221; data-width=”640″ data-height=”455.8″ data-statics=”statics”></data>

    <b>SUBSCRIBE TO NEWSLETTER!</b>

    <script type=”text/javascript” src=”https://app.mailjet.com/statics/js/widget.modal.js”></script&gt;

    #1642710
    Elvin
    Staff
    Customer Support

    Hi there,

    I’ve tried checking the site but the URL provided doesn’t seem to be working.

    Can you confirm if its the correct one? Let us know.

    As for inserting the codes, I’m not exactly sure where the script part should be inserted but since it seems like a modal script as indicated in its file name, it should be fine to place it anywhere as long as it appears after your modal HTML structure.

    You can use the Hook Element to place your codes in.

    More about hook element here:
    https://docs.generatepress.com/article/hooks-element-overview

    Here are the hook locations:
    https://docs.generatepress.com/article/hooks-visual-guide/

    I’m not sure what kind of HTML this is but if its something that overlays the whole viewport, generate_before_header or generate_after_footer should be fine.

    But if its a button you want to place elsewhere, you can refer to the hook location visual guide.

    #1642741
    Juned

    Hi!

    I have installed it via Hook Elements and its perfect now. I deleted the staging site & installed at Primary site now.

    Please suggest how to align it (button) at center????

    #1642755
    Juned

    Also did following:

    Execute Shortcodes: Enabled
    Priority: 10

    #1643056
    David
    Staff
    Customer Support

    Hi there,

    so you will need to put a <div> wrapper around your code with some CSS Classes that we can style like so:

    <div class="grid-container subscribe-container">
    Your code goes here
    </div>

    Then you can add some styles with this CSS:

    .subscribe-container {
        text-align: center;
        padding: 40px;
    }
    #1643117
    Juned

    🙂

    David Boss

    <salute>
    }

    🙂

    #1643416
    David
    Staff
    Customer Support

    Glad to be of help

    #1646315
    Juned

    Hi,

    I used the above wrapper and CSS style and it worked perfectly.

    When I tried to used the same wrapper & CSS for my another form button, by changing the NAME only, it is also working but has changed the alignment of entire site as center.

    (I changed “subscribe-container” with “discount-container”)

    A. Here is the code with change in name:

    <data id=”mj-w-res-data” data-token=”9c72cc2d7299cb082681479feb6c0fe3″ class=”mj-w-data” data-apikey=”6qS1″ data-w-id=”HqX” data-lang=”en_US” data-base=”https://app.mailjet.com&#8221; data-width=”640″ data-height=”409.797″ data-statics=”statics”></data>

    <b><font size=”3″>Click to get extra 10% OFF</font></b>

    <script type=”text/javascript” src=”https://app.mailjet.com/statics/js/widget.modal.js”></script&gt;

    B. Here is the CSS (I changed the name as .discount-container):

    .discount-container {
    text-align: center;
    padding: 10px;
    }

    Pls suggest what is wrong here? Why the site’s text was changed as center aligned? What should I change in above?

    Since the text alignment was changing (button was looking perfect with above code and css), I removed the css but wrapper is still there.

    Please help.

    #1646353
    Elvin
    Staff
    Customer Support

    Hi there,

    The .discount-container class wraps your whole page. That’s why the whole page content’s text alignment was affected.

    I’m not sure I understand what you’re trying to do.

    To clarify: Are you trying to do something like this? https://share.getcloudapp.com/E0u9Ex0m

    Let us know.

    #1646355
    Juned

    Hi,

    Yes, I am trying to locate the button at center, above header.

    Just like I did at before Footer, but that is a different button.

    #1646360
    Elvin
    Staff
    Customer Support

    Before I start with my suggestion, let me ask:

    Is the .discount-container div intended to wrap around the WHOLE page? If it isn’t intended, I think your code is missing a </div> tag causing the discount-container wrapper to wrap the whole page.

    Can you share the code that adds this discount-container in? Please don’t forget to format the code within the reply using the code formatter as pointed here: https://share.getcloudapp.com/qGuXDQg4

    #1646362
    Juned

    No. I simply wanted to wrap the button only : “Click to get extra 10% OFF”.

    And not any page or block.

    The original code was given by David (check at previous Support message at above thread). And I just changed the name:

    I changed “subscribe-container” with “discount-container”.

    #1646406
    Elvin
    Staff
    Customer Support

    No. I simply wanted to wrap the button only : “Click to get extra 10% OFF”.

    Ah in that case, your code might’ve actually have a missing </div>.

    Perhaps you’ve only added the <div class="grid-container discount-container"> before your code, but for got to add </div> right after.

    Can you check your Hook Element’s code area and confirm ? Let us know.

    #1646545
    Juned

    Hi!

    My first code:

    A.)

    B). AND ITS CSS STYLE:
    .subscribe-container {
    text-align: center;
    padding: 10px;
    }

    My Second code:

    A).

    <data id=”mj-w-res-data” data-token=”9c72cc2d7299cb082681479feb6c0fe3″ class=”mj-w-data” data-apikey=”6qS1″ data-w-id=”HqX” data-lang=”en_US” data-base=”https://app.mailjet.com&#8221; data-width=”640″ data-height=”409.797″ data-statics=”statics”></data>

    <b><font size=”3″>Click to get extra 10% OFF</font></b>

    <script type=”text/javascript” src=”https://app.mailjet.com/statics/js/widget.modal.js”></script&gt;

    B). AND ITS CSS STYLE:
    .discount-container {
    text-align: center;
    padding: 10px;
    }

    And now it looks like that its working fine now after the addition of at the end.

    Kindly confirm if its done correctly.

    You people are really the best in terms of support when compare with the rest of the world.

    Thank You!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.