Step 1 : Create a List

4

Step 2 : Go to Sign Up Form in the list and select Embedded Form

5

Step 3 : Select the fields - Show Format Options

6

Step 4 : Select the original code provided by the Mailchimp:

7

Step 5 : Update the changes as per the steps below:

      1.Created submit button with hovering effect for Submitting the             contact form                               

            Example:       

             <style>

                                .btn{

                                      background-color:black;

                                      color:white;

                                       padding:8px 12px;

                                       border-radius:5px;

                                       text-align:center;

                                       text:bold;

                                       Display:inline-block;

                                      }

 

                          .btn:hover{

                                           background-color:#abe52d;}

                   </style>

8        

       2.Effects for the fields created.

                

                  Example:

                               <style>

                                     .mc-field-group{

                                             box-sizing: inherit;

                                             background: #FDFDFD;

                                             color: #48484A;

                                              width:300px;

                                              border: solid 1px #DDD;

                                              box-shadow: inset 0 0 10px #EAEAEA;

                                              border-radius: 5px;

                                              padding: 16px;

                                             }

                                            </style>

                           

Have you ever checked your website in your mobile how it is looking..? If not go once check your website.

It can be done by pressing F12 key from your keyboard to observe your website in all  devices.

……..

……..

……..

……..

……..

……..

……..

………

We are sure your going to come back to our blog and look what is written to make changes for your screen resolutions.

Here is an example below how to code for resolutions inside your code..

                      <style>

      @media screen and (min-width:320px)and(max-width:831px)and (device-aspect-ratio: 2/3)

       {      //**css code…**//  }

                      </style>

 

It appears just like down image..! As a developers we shouldn’t forget the user experience.It should be easy to them in any device regardless of laptop,mobile,tab etc…

9

10