Customizing Your Nanacast Embedded Form

1. Login to Nanacast. Click Manage > Memberships, then click on the Create Button link from your offer's Overview menu. You'll see that one of the choices is the Create order button, form, or coupon box. button.
   
   

2. Copy and paste the resulting Nanacast form code inside an element (such as a div, span, li etc) that has an ID or a CLASS added to it.

3. After you do this, add some CSS to your page between "style tags" to control the width of the element that has the nanacast form code pasted inside of it. This will literally force the form to your preferred size.
   
   OR
   
   The second method is to alter the CSS of the form by adding CSS to the "additional CSS" box located in the "edit notifications and custom fields" area.
   
   To do this:

   1. Go to "edit notifications and custom fields" from your membership options area and scroll to the "Custom Fields & Notification Settings" section. On the lower part of the section you'll see a box labeled "additional css" Here is the example of the css code you'll want to add to decrease the width:

      //this will select the parent element that holds all of the form data, then force its size to 300 pixels wide.
      #creatFormIFRAME365{
      width:300px;
      }
      
      

   2. Additionally, if using the second method listed above didn't alter the alignment of the text fields; you can manually change their widths, heights, and font size and colors of the fields by going to the same "Additional css" box as noted above with something similar to this example:

          #formHTMLdiv1Form1table1TR1td1TABLE1 input{ //this will select all of the text fields and move them over 40 pixels
          margin-left:40px;
          }
          #formHTMLdiv1Form1table1TR1td1TABLE1 span{ //this will select all of the information boxes and move them over 20 pixels
          left:20px;
          position:relative;
          }
          #formHTMLdiv1Form1table1TR1td1TABLE1 select{ //this will select all of the selection fields and move them over 40 pixels
          margin-left:40px;
          }
      
      

      or you can select each text field manually and move them by accessing them using their classes, they are named like: "u_city" (for the city text box), "u_lastname" (for the last name text box) and so on for each type of text field. **HINT** the !important; CSS modifier is useful for overriding existing inline CSS. So:

          .u_phone{
          margin-left:40px; //this would move the phone number field over 40 pixels
          }