10 Replies Latest reply on Jul 11, 2018 10:32 AM by Yellow Duckie

    Safari converting my submit button!

    Yellow Duckie Level 1

      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 id="mailchimp">

      <form action="//childfoodprogramoftexas.us15.list-manage.com/subscribe/post?u=a30cc5cc9ecdb8f7a 1f33b777&amp;id=fb5f14d274" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="width:325px;" novalidate>

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

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

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

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

        • 1. Re: Safari converting my submit button!
          fotoroeder Adobe Community Professional

          Do "we" talk about that button:

          Bildschirmfoto 2018-06-29 um 08.15.10.png

          or the button on the following page?

          Bildschirmfoto 2018-06-29 um 08.15.15.png

           

          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:

          Bildschirmfoto 2018-06-29 um 08.21.53.png

          Bildschirmfoto 2018-06-29 um 08.22.05.png

          Best Regards,

          Uwe

          2 people found this helpful
          • 2. Re: Safari converting my submit button!
            Ussnorway Adobe Community Professional

            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

            Screenshot (1044).png

            Screenshot (1045).png

            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

            • 3. Re: Safari converting my submit button!
              Ussnorway Adobe Community Professional

              you are too quick for me Uwe

              • 4. Re: Safari converting my submit button!
                fotoroeder Adobe Community Professional

                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

                • 5. Re: Safari converting my submit button!
                  pziecina Level 6

                  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.

                  • 6. Re: Safari converting my submit button!
                    Yellow Duckie Level 1

                    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!

                    • 7. Re: Safari converting my submit button!
                      Yellow Duckie Level 1

                      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.

                      • 8. Re: Safari converting my submit button!
                        Yellow Duckie Level 1

                        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:

                        <div id="mailchimp">

                        <form action="//childfoodprogramoftexas.us15.list-manage.com/subscribe/post?u=a30cc5cc9ecdb8f7a 1f33b777&amp;id=fb5f14d274" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="width:325px;" novalidate>

                            <div id="mc_embed_signup_scroll">

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

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

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

                        • 9. Re: Safari converting my submit button!
                          Ussnorway Adobe Community Professional

                          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

                          • 10. Re: Safari converting my submit button!
                            Yellow Duckie Level 1

                            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.