2 columns on contact form

  • Posted in : Photographer
  • MariosArts
    Participant

    Hello.

    The contact page has a contact form and look very good, only if the page has fewer fields. If i add more fields, the contact form and the contact page doesn’t look good, because the simplicity of the desing of the fields and order. How i can change the contact form to put 2 column form and improve design? Example: Click here to view example Thanks.

    serkan
    Moderator

    Hi, sorry it is not available by default and it requires more time and effort to customization, if you are not familiar to coding you may consider hiring an expert at envato studio.

    motti_b
    Participant

    Hi MariosArts,
    it’s very easy. go to this link and look at the source code.

    If you do not know how to copy from a source code let me know but it should be very easy to just copy the code.

    I basically used the theme’s columns shorcode:

    It is a shortcode for two columns side by side.

    Hopw that helps.

    serkan
    Moderator

    Hi motti_b,
    Thanks for the feedback :)

    MariosArts
    Participant

    Hi motti_b,
    Thanks for your help. I visit the link and copy the code . I’m adapting it to my site now. I ‘ll show when finished.

    motti_b
    Participant

    Glad I could help!

    nickpse
    Participant

    Hi Motti,

    I see you’ve created a new class to center your social media icons, I have copied this from your site but where did you edit the shortcode wrapper to add this class into the html output of the shortcode?

    Thanks in advance, I like your site!

    motti_b
    Participant

    Hi Nickpse,
    I am not really sure to what you are referring. The social icons at the bottom re by default in the center (if I remember correctly). The social icons at the top were centered with a simple css:


    .social-center {
    text-align:center;
    }

    I just added the tag ‘social-center’ to the like that:

    I am not sure if that helps.

    As for the class for the shortcode (to make two columns), they already exist in the main.css.

    Start by putting the code:

    Right after this code put . Follow by all the stuff you want to the left side and close with .

    Then, again, use the code, follow by all the stuff ou want on the right side and close with again.

    Close everything with a to close the ‘raw’ div and that’s it.

    I hope it helps

    To make the code cleaner you should put the code .

    nickpse
    Participant

    Hey Motti,

    Thanks for the reply, I just realized you’re using the HTML template version of this theme, where as I am using the WordPress template of it. None the less you have helped me figure it out, and I have got it centered like yours.

    Thanks for the help!
    Nick

    motti_b
    Participant

    Glad to hear! Cheers

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register