2 people found this helpful
Do "we" talk about that button:
or the button on the following page?
For the first case, I recommend to use a visual graphic button to línk to the following "MailChimp". I, personally don`t know how to use html, that`s the reason I use a visual webdesign app, so pretty much WhatISeeIsWhat IGet. The submit button does not look that fanzy, that it could not be redesigned in muse, does it?
For the second case, I recommend to check out mail chimp settings.
Unfortunately I don`t use an iPhone, so I cannot reproduce your issue but as far as I can see, I also recommend to check out your breakpoints and change them from fluid width to fixed width breakpoints in ordeer to avoid this and that:
first Muse is eol so I would not be starting any new sites with it unless this company just wants a mock up demo
the button defaults to rounded corners
<input type="submit" value="Submit " style="vertical-align: middle; float:right; border:1px; border-style:solid; border-color:#D9E021; border-radius:5px; background-color:#D9E021; font-weight:bold; font-size:11pt; font-color:black; letter-spacing: 1px; text-align:right; height:30px; width:65px" name="subscribe" id="mc-embedded-subscribe" class="button">
so are we talking about this form
that defaults to rounded-corners because that is what the style says?
I suggest you post this form code in the Dreamweaver forum because most Muse users can't read css (i'm rusty) and they have better eyes for code mate
however you are correct that a [insert html] tool box is the best simple way to add such codes to Muse
you are too quick for me Uwe
The early bird catches the worm, however it catches only the early worms .
I agree with Ussnorway not to use Muse for new sites, but your site already exists, right?
In this case I keep my recommendation to simply drag out a rectangle for your submit button and you should be pretty much done.
In your screenshot, Ussnorway there is also no rounded corners although code reading is different?
Please don't post the question in the Dw forum .
Looking at the code, the button should have rounded corners, (border-radius: 5px;), the 'rounded-corners' is a class name, not css code, so we would have to see what the css in that class was.
Buttons are by default browser specific, so it could be that the iOS browser is using its default button, as that would be correct for the input type. Without seeing what else is going on in the page code, (which I do not want to, because we all know Muse code is almost unreadable) the problem could be anywhere.
There is one golden rule when it comes to forms though, and it is because of user expectations -
' do not change Button styling without a very good reason'.
That is because users do expect a browser button to always look and behave the same.
I haven't actually examined buttons on the rest of the site yet. Since this is the first page you see, I went purely by that and assumed that they all suffered the same.
I've spent over two years building this site, and only recently did Adobe decide to end Muse. You can imagine my near-heart attack when I heard about that, considering my deadline is drawing nearer. Why I spent 2 years: Deconstruction, storyboard/layout, fast learning a new program called Muse, a natural disaster, and the creation of all the graphics and website. Also, web design isn't my only job for this client, as I handle their social media, internet queries, technical writing, and graphic design needs as well.
I know HTML. I know code. I just don't know extensive code, which includes CSS and Bootstrapper. For this reason, I don't do a lot of work in Dreamweaver. Muse was an easier and faster way to rebuild the website.
As for Mailchimp, I'm not worried. That's simply Mailchimp.
I suppose if there is no HTML equivalent for the webkit coding, then I'll take your suggestion and use a graphic.
Thanks for all the quick replies!
Yeah I wasn't planning on posting in DW. Though it's a code question, I'm using Muse. I'm not using DW for the new site, only the old one that's currently online (the original site was built with GoLive and updated through DW).
This new site works great on window's computers and Android phones. I only just learned that it's on iOS that the buttons are affected.
I've achieved disabling the iOS automatic telephone numbers with a metatag. Now my phone numbers listed throughout the site don't appear in different colors.
Alright, it took me a while to work out all the kinks, but I've figured it out and I'll post it here so others can see.
Warning: This entails a lot of coding, so if you don't understand HTML, you may not understand what I'm fixing to post.
I took your suggestions into mind. For some reason, the buttons on the Sign Up page and the About pages all work fine on each browser, but the main page's Submit button does not. Reason being is an embedded HTML. iOS don't function the same as Windows and Androids. (darn Mac users )
I turned the Submit button into a .png file. Then I adjusted the Subscription embedded code from what I initially posted into this:
<form action="//childfoodprogramoftexas.us15.list-manage.com/subscribe/post?u=a30cc5cc9ecdb8f7a 1f33b777&id=fb5f14d274" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="width:325px;" novalidate>
<input type="image" src="images/submit_btn.png" style="vertical-align: middle; float:right" value="Submit " style="height:30px; width:65px" name="subscribe" id="mc-embedded-subscribe" class="button">
<div class="mc-field-group" style="overflow: hidden; padding-right: .9em;"><input type="email" value="" style="font-size:10pt; height:26px; width:275px; border:2px; border-style:solid; border-color:#D9E021; border-radius:5px;" placeholder=" Enter Email" name="EMAIL" class="required email" id="mce-EMAIL"></div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px" aria-hidden="true"><input type="text" name="b_a30cc5cc9ecdb8f7a1f33b777_fb5f14d274" tabindex="-1" value=""></div>
I put in bold what was changed.
To get it to work correctly, you also have to have the Submit button image placed somewhere on that page otherwise it won't link to the image you've uploaded. I simply placed the Submit button image on the side of the page (the gray area), and then hid it in all other breakpoints. IT MUST STAY VISIBLE ON AT LEAST ONE BREAKPOINT TO WORK (but can be off to the side). This way it's there, but no window or browser can see it. All you will see is the embedded html file with the "Enter Email" field.
This now works across all platforms.
When editing in Muse, however, it won't show. It'll look like a broken image. BUT IT WORKS ONLINE! I'm assuming that once I go officially live things may change, but I don't care. So long as it loads fine across platforms, I can live with Muse not showing it.
I want to thank all of you for your help. Truth be told, I wouldn't have figured this solution out had you not given me the ideas. It took me all morning to work out all the kinks and get it working.
BTW: If your chrome isn't showing this embedded image, you may need to adjust your privacy settings to allow for all images. If it still doesn't show, you'll need to clean your cache, too.
nice work but have you tested phones because having a image off canvas in those breakpoints should push the page over... I aussme you hide it in the smallest breakpoint thou
Yes, I tested it across several platforms by way of Chrome's inspections, along with various devices I was able to get my hands on. For the moment, businesscatalyst is still working, and I'm taking full advantage of it.
The image won't push the page over so long as you have the follow code in the Metadata tab of the Page Properties:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
This code here stops the phones from changing telephone numbers:
<meta name = "format-detection" content = "telephone=no">
As I said earlier, I can read and write basic code, but I can only read extensive code. For this reason, I'm unable to code this website in Dreamweaver. I've no time to learn Bootstrap.