- This topic has 15 replies, 3 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
February 1, 2021 at 10:36 pm #1642417Juned
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” 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>
B)
Kind Regards,
Juned
February 1, 2021 at 11:49 pm #1642473JunedHi,
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” 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>
February 2, 2021 at 4:06 am #1642710ElvinStaffCustomer SupportHi 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-overviewHere 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
orgenerate_after_footer
should be fine.But if its a button you want to place elsewhere, you can refer to the hook location visual guide.
February 2, 2021 at 4:30 am #1642741JunedHi!
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????
February 2, 2021 at 4:41 am #1642755JunedAlso did following:
Execute Shortcodes: Enabled
Priority: 10February 2, 2021 at 7:34 am #1643056DavidStaffCustomer SupportHi 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; }
February 2, 2021 at 8:03 am #1643117Juned🙂
David Boss<salute>
}🙂
February 2, 2021 at 12:29 pm #1643416DavidStaffCustomer SupportGlad to be of help
February 4, 2021 at 6:13 pm #1646315JunedHi,
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” 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>
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.
February 4, 2021 at 7:36 pm #1646353ElvinStaffCustomer SupportHi 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.
February 4, 2021 at 7:38 pm #1646355JunedHi,
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.
February 4, 2021 at 7:54 pm #1646360ElvinStaffCustomer SupportBefore 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
February 4, 2021 at 7:59 pm #1646362JunedNo. 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”.
February 4, 2021 at 9:49 pm #1646406ElvinStaffCustomer SupportNo. 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.
February 5, 2021 at 1:26 am #1646545JunedHi!
My first code:
A.)
<data id=”mj-w-res-data” data-token=”bebfbea7373801d65f3f288e419b9e83″ class=”mj-w-data” data-apikey=”6qS1″ data-w-id=”Hp0″ data-lang=”en_US” data-base=”https://app.mailjet.com” data-width=”640″ data-height=”455.8″ data-statics=”statics”></data><b>Subscribe to our Newsletter!</b><script type=”text/javascript” src=”https://app.mailjet.com/statics/js/widget.modal.js”></script>
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” 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>
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!
-
AuthorPosts
- You must be logged in to reply to this topic.