{"id":29147,"date":"2021-02-15T11:00:08","date_gmt":"2021-02-15T04:00:08","guid":{"rendered":"https:\/\/docs.kirim.email\/?post_type=kb&p=29147"},"modified":"2021-12-29T14:36:29","modified_gmt":"2021-12-29T07:36:29","slug":"how-to-create-a-custom-styling-form-on-html-embed-options","status":"publish","type":"kb","link":"https:\/\/docs.kirim.email\/en\/kb\/how-to-create-a-custom-styling-form-on-html-embed-options\/","title":{"rendered":"How to Create a Custom Styling Form on HTML Embed Options"},"content":{"rendered":"\n

You can change the default display of existing forms in KIRIM.EMAIL based on your preference. Please follow these instructions to change it..<\/p>\n\n\n\n

  1. Go to aplikasi.kirim.email page.<\/li>
  2. Create a new form or edit an existing one. Make sure the form status is ON. In the DESIGN, click the HTML tab.<\/li>
  3. Copy the available codes.

    \"\"<\/a>

    <\/li>
  4. Open https:\/\/codepen.io\/pen\/<\/a> and paste them to the HTML column.

    \"\"<\/a>

    <\/li>
  5. Change the layout by clicking Change View button. Select the HTML codes on the left and the display on the right as in the following image.

    \"\"<\/a><\/li><\/ol>\n\n\n\n

    Adding Tag <style><\/h2>\n\n\n\n

    After you move the codes, now add the following codes:<\/p>\n\n\n\n

    <!-- Enter the styling codes in the following bracket -->\n<style>\n\u00a0\u00a0\/\/ Enter styling codes here\n<\/style><\/code><\/pre>\n\n\n\n
    after <\/div> code at the bottom..<\/p>\n\n\n\n
    So you will see the result as in the following image:<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    Knowing the Anatomy of Form<\/strong><\/h2>\n\n\n\n
    Before we make a custom styling form, it is good to get to know what the anatomies of the form are. It will work to create selector with the custom styling that you want.<\/p>\n\n\n\n
    \"\"<\/a><\/figure><\/div>\n\n\n\n
    \"\"<\/a><\/figure><\/div>\n\n\n\n
    Basically there are only two consisting anatomies of KIRIM.EMAIL\u2019s form, such as:<\/p>\n\n\n\n
    1. Header<\/li>
    2. Content.<\/li><\/ol>\n\n\n\n
      As for those in the Content, there are 3 parts :<\/p>\n\n\n\n
      1. Field<\/li>
      2. Input<\/li>
      3. Button.<\/li><\/ol>\n\n\n\n
        These are 5 Elements we\u2019ll use to create custom styling forms.<\/p>\n\n\n\n
        Selector Source Code<\/strong><\/h2>\n\n\n\n
        Once you know the position and anatomy of the form, then grab the following selector source codes that suit your needs.<\/p>\n\n\n\n
        For instance you\u2019d like to replace the header section, you\u2019ll just need to copy the codes for the header and paste them on the tag <style> section.<\/p>\n\n\n\n
        Here are the following codes:<\/p>\n\n\n\n
        \/* Selector for the header form section *\/\n\n#flexbox-style .kirimemail-form-body {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-color: unset;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: unset;\n}<\/code><\/pre>\n\n\n\n
        \/* Selector for the content form section *\/\n\n#flexbox-style .kirimemail-form-field {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-color: unset;\n}<\/code><\/pre>\n\n\n\n
        \/* Selector button *\/\n\n#flexbox-style .button:not(.zmb).slate {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: #2d86c2;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0box-shadow: 0 0 0 1px #2d86c2;\n}<\/code><\/pre>\n\n\n\n
        \/* Selector button when tapped by a mouse cursor (hover) *\/\n\n#flexbox-style .button:not(.zmb).slate:hover {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: #ca9146;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0box-shadow: 0 0 0 1px #ca9146;\n}<\/code><\/pre>\n\n\n\n
        \/* Selector field \/ input box*\/\n\n#flexbox-style .kirimemail-custom-field dd {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 5px;\n}<\/code><\/pre>\n\n\n\n
        \/* Selector input *\/\n\n#flexbox-style .kirimemail-custom-field input {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 20px;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 100% !important;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100% !important;\n}<\/code><\/pre>\n\n\n\n
        Here are some descriptions for the properties often used for styling on the form.<\/p>\n\n\n\n
        • background-color = Background Color<\/li>
        • color = text color<\/li>
        • box-shadow = shadow color and its size<\/li>
        • margin = width of the outermost space of the element<\/li>
        • padding = width of the innermost space of the element<\/li>
        • height = element height<\/li>
        • width = element width.<\/li><\/ul>\n\n\n\n
          Usage Examples<\/strong><\/h2>\n\n\n\n
          #flexbox-style .kirimemail-form-body {\nbackground-color: #32a895;\ncolor: black !important;\n}<\/code><\/pre>\n\n\n\n
          If styling does not give you any effects, you can use additional code !important as in the example above. Width and height uses size units of px, for example: margin : 24px.<\/p>\n\n\n\n
          If you have finished with the custom styling please copy the codes and embed it into your website page.<\/p>\n\n\n\n
          Complete.<\/p>\n","protected":false},"excerpt":{"rendered":"
          You can change the default display of existing forms in KIRIM.EMAIL based on your preference. Please follow these instructions to change it.. Go to aplikasi.kirim.email […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}}},"kbtopic":[42],"kbtag":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/kb\/29147"}],"collection":[{"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/kb"}],"about":[{"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/types\/kb"}],"author":[{"embeddable":true,"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/comments?post=29147"}],"version-history":[{"count":4,"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/kb\/29147\/revisions"}],"predecessor-version":[{"id":30773,"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/kb\/29147\/revisions\/30773"}],"wp:attachment":[{"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/media?parent=29147"}],"wp:term":[{"taxonomy":"kbtopic","embeddable":true,"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/kbtopic?post=29147"},{"taxonomy":"kbtag","embeddable":true,"href":"https:\/\/docs.kirim.email\/en\/wp-json\/wp\/v2\/kbtag?post=29147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}