Safari converting my submit button!

Report · Jun 28, 2018

So I'm redesigning a huge company website and I'm using Muse. One new feature we've decided to add was the ability to join our newsletter per an email field and submit button. I've used embedded HTML codes for all of this, because I want it customized to fit with the rest of the site's design.

The button looks great on computers and Android phones. However, when viewing it on an iPhone, the button defaults to rounded corners as well as changes the font.

How do I stop this from happening? I found the codes for CSS, but I didn't write anything in CSS. The submit button & email field are embedded HTML as such:

</div>

</div>

</form>

</div>

Code I found in CSS (but I don't know how to use that in Muse):

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

The website is on the temporary business catalyst page here:

hild Food Program of Texas - Child Food Program

I sure hope someone can help me on this.

Report · Jun 28, 2018

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:

Best Regards,

Uwe

Report · Jun 28, 2018

you are too quick for me Uwe

Report · Jun 28, 2018

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?

Best Regards,

Uwe

Report · Jun 29, 2018

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.

Report · Jun 29, 2018

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.

Report · Jun 28, 2018

first Muse is eol so I would not be starting any new sites with it unless this company just wants a mock up demo

https://forums.adobe.com/people/Yellow+Duckie wrote
the button defaults to rounded corners
<div id="mc_embed_signup_scroll">
<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?

CSS Rounded Corners

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

Report · Jun 29, 2018

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!

Report · Jun 29, 2018

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:

<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>

</div>

</form>

</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.

Report · Jun 29, 2018

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

Report · Jul 11, 2018

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:

This code here stops the phones from changing telephone numbers:

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.

Adobe Community

Safari converting my submit button!

1 Correct answer