WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] How to set contact form 7 in one row ? (40 posts)

  1. dt125x
    Member
    Posted 5 months ago #

    I would like to make contact form 7 to stay just in one row on the place where it's written "Click here for Contact"... http://www.apartmentsinmakarska.net/
    It should be in this row... 2 fields are enough...

    Can anyone suggest me a css for this or something ?

    P.S. I asked in contact form 7 forums and they told me to ask here...
    Thank you

  2. d4z_c0nf
    Member
    Posted 5 months ago #

    So what you need is.
    1) Create a contact form of just 2 fields, and in a single div (<div class="row"> or <div class="row-fluid">).
    2) put the contactform shortcode in a text-widget, in that widget area you created.

  3. dt125x
    Member
    Posted 5 months ago #

    Hello

    Where do I insert this div code ?

    This is contact form shortcode:

    [contact-form-7 id="840" title="row"
    ]

  4. d4z_c0nf
    Member
    Posted 5 months ago #

    Edit the contactform https://wordpress.org/plugins/contact-form-7/screenshots/
    That block on the left where you see
    <p>Your Name(required)</p> ..

    That's the place where edit the contact form html.

  5. dt125x
    Member
    Posted 5 months ago #

    Sorry, I tryed to insert it but oviously I am doing something wrong...
    Could you write it?

    this is in the left block:

    <p>Your Email (required)
    [email* your-email] </p>

    <p>Your Message
    [textarea your-message] </p>

    <p>[submit "Send"]</p>

  6. dt125x
    Member
    Posted 5 months ago #

    <div class="row-fluid">
    <p>Your Email (required)
    [email* your-email] </p>

    <p>Your Message
    [textarea your-message] </p>

    <p>[submit "Send"]</p>
    </div>

    I tryed to wrap this in div... it dont work... What is wrong ?

    You can see how it looks on the page: http://www.apartmentsinmakarska.net/

  7. d4z_c0nf
    Member
    Posted 5 months ago #

    And something like

    <div class="row-fluid">
    <div class="span6">
    <p>Your Email (required)
    [email* your-email] </p>
    </div>
    <div class="span6">
    <p>Your Message
    [textarea your-message] </p>
    <p>[submit "Send"]</p>
    </div>
    </div>

    Then adjust the margin you set here:

    div.wpcf7 {
       margin: 0;
      padding: 0;
    }

    Using a good margin-top to have an alignment

  8. dt125x
    Member
    Posted 5 months ago #

    It kin a worked but I need to set it up...

    I put in css :
    div.wpcf7 {
    margin:0 ;
    padding:0;
    width:350px;
    height:130px;
    }

    I need to center it, get text area smaller and "send" button set after text area...

    any css suggestions ?

    Thank you very much for help !!!

  9. d4z_c0nf
    Member
    Posted 5 months ago #

    Ok, so in that div.wpcf7 you wrote, replace margin: 0 with

    margin: auto;

    for centering it.
    Look that you also have this in your custom css:

    div.wpcf7 {
    margin: 0;
    padding: 0;
    }

    Delete it, otherwise it will override the margin property you set in that other place.

    About send button and text area, for example, change the contact form this way:

    <div class="row-fluid">
        <div class="span5">
            <p>Your Email (required)
            [email* your-email] </p>
        </div>
         <div class="span7">
             <div class="span8">
                <p>Your Message
                [textarea your-message] </p>
             </div>
             <div class="span4 submit">
                  <p>[submit "Send"]</p>
             </div>
         </div>
    </div>

    And add to your custom css:

    .span4.submit {
        position: relative;
        top: 20px;
    }

    Adjust the top attribute to suit your needs.
    About the text-area, again you have a rule in your custom css that overrides the other you have in another place (a plug-in?) :
    this in your custom css:

    .wpcf7 textarea {
    height: 49px;
    margin: 0px;
    font-size: 11px;
    margin: 0px;
    width: 128px;
    }

    overrides, this

    .wpcf7 textarea {
    font-size: 11px;
    height: 10px;
    margin: 0;
    }

    So chose where to write that rule, and set the height you want.
    Also you have this ">" after the div <div class="wpcf7" id="wpcf7-f840-o1">, don't know why.

  10. dt125x
    Member
    Posted 5 months ago #

    This code is applyed now and it almost work perfect:

    div.wpcf7 {
    margin:auto ;
    padding:0;
    width:600px;
    height:20px;
    }

    .span4.submit {
    position: relative;
    top: 20px;
    }

    .wpcf7 textarea {
    font-size: 11px;
    height: 20px;
    margin: 0;
    }

    Three more things:

    1.I found ">" problem, I wrote it in the widget by mistake...but now when there is not ">" slideshow got up over the contact form... which margin should I change?

    2.This css affects on every contact form on my page...
    I think I should paste #wpcf7-f840-o1 (840 is the ID of this contact form) in fornt od those 3 code areas but I dont know how to apply it in fornt of first one "div.wpcf7" ?

    3. How could I make this contact form responsive when I scale window down that it stays in a single row... Now it makes 3 rows when it is shown on small screen...

    Thanks!!!

  11. d4z_c0nf
    Member
    Posted 5 months ago #

    Hey, could you tell me how do you put that widget are in the header?
    Looks a bit weir..
    thanks

  12. dt125x
    Member
    Posted 5 months ago #

    I added this in my funcitons.php :

    <?php

    // Adds a widget area.
    if (function_exists('register_sidebar')) {
    register_sidebar(array(
    'name' => 'Extra Header Widget Area',
    'id' => 'extra-widget-area',
    'description' => 'Extra widget area after the header',
    'before_widget' => '<div class="widget my-extra-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
    }

    // Place the widget area after the header
    add_action ('__after_navbar', 'add_my_widget_area', 0);
    function add_my_widget_area() {
    if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
    }
    }

    I added this in custom css :

    // Place the widget area after the header
    add_action ('__after_header', 'add_my_widget_area', 0);
    function add_my_widget_area() {
    if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
    }
    }
    I see that in css and php is written different in css: after header and in php after navbar
    I changed it both in after the navbar and put css:
    .tc-header {
    height:195px;
    }
    Now It is ok in big screen but when it scales down it dont work...

    So my last 2 questions:

    1.This css affects on every contact form on my page...
    I think I should paste #wpcf7-f840-o1 (840 is the ID of this contact form) in fornt od those 3 code areas but I dont know how to apply it in fornt of first one "div.wpcf7" ?

    2. How could I make this contact form responsive when I scale window down that it stays in a single row... Now it makes 3 rows when it is shown on small screen...

    ;)

  13. d4z_c0nf
    Member
    Posted 5 months ago #

    Wait wait wait.
    1) could you use backticks to wrap your code? Or use the button "code" before and after the code? In order to get that box you see around my code.
    2) you don't have to put php code in custom css! Delete it! :D

    about your questions:
    1) you can use .tc-header .wpcf7 , this way it will affect just the contact form in the header
    2) let's start cleaning your custom css, after that we will see how to make it responsive, if we can :D ok?

  14. dt125x
    Member
    Posted 5 months ago #

    You want to try it yourself ? I will give you my pass... I think I believe you :)

  15. dt125x
    Member
    Posted 5 months ago #

    Contact me over my page contact form that I can see your mail... ;)

  16. dt125x
    Member
    Posted 5 months ago #

    Ok, now I erased all custom css and left this one which is for contact form :

    div.wpcf7 {
    margin:auto ;
    padding:0;
    width:600px;
    height:20px;
    }

    .span4.submit {
    position: relative;
    top: 20px;
    }

    .wpcf7 textarea {
    font-size: 11px;
    height: 20px;
    margin: 0;
    }

    If you can try to add some code to set it over the slider and to become responsive and put the code id ".tc-header .wpcf7" to specify just this contact form...

  17. d4z_c0nf
    Member
    Posted 5 months ago #

    -First:
    In the widget area creation make this: 'before_widget' => '<div class="widget my-extra-widget">',
    become this: 'before_widget' => '<div class="widget my-extra-widget span9">',, and add this to your custom css:

    .tc-header .widget.my-extra-widget.span9 {
    float: right;
    }

    -Second:
    this :

    div.wpcf7 {
    margin:auto ;
    padding:0;
    width:600px;
    height:20px;
    }

    if you want affects just that contact form in the header, as I said, should be something like this ( and don't set width and height):

    .tc-header .wpcf7 {
    margin:auto ;
    padding:0;
    }

    And so on, prepend always .tc-header
    Add this to decrease the margin between the form and the grey bar below:

    .tc-header .wpcf7-form {
    margin-bottom: 0px;
    }
  18. dt125x
    Member
    Posted 5 months ago #

    Problem was in this "div". When I erased it and put .tc-header everything got on it's place :

    div.wpcf7 {
    margin:auto ;
    padding:0;
    width:600px;
    height:20px;
    }

    I have problem with internet explorer... it shows top menu verical and "submit" button under the contact form...
    When I erased all custom css it stayed the same... Is it maybe becouse of extra widget in the header ?

    And can this contact form become more responsive that it stays in one row when it is scaled down ?

    Thanks

  19. d4z_c0nf
    Member
    Posted 5 months ago #

    dt125x , why don't you use backticks when you paste code?
    Anyway, don't know about IE, now I cannot check, since I don't have windows.
    About responsiveness.. The thing is that this topic started regarding customizr just at 5% but now it's 100% css and/or media queries.
    Anyway, again, paste this in your custom css or your child theme style.css.

    @media (max-width: 767px){
    .tc-header .wpcf7 .row-fluid [class*="span"]{
    float:left;
    }
    .tc-header .wpcf7 .row-fluid [class*="span"]:first-child{
    margin-left:1%;
    }
    .tc-header .wpcf7 .row-fluid .span5{
    width:35%;
    }
    .tc-header .wpcf7 .row-fluid .span7{
    width:62%;
    }
    .tc-header .wpcf7 .row-fluid .span8{
    width: 80%;
    }
    .tc-header .wpcf7 .row-fluid .span4{
    width: 18%;
    }
    }

    this is a good start. Play with percentage to suit your needs.

  20. dt125x
    Member
    Posted 5 months ago #

    Ok I made some changes with percentages but it yust changes lenght of areas... It dont help with responsivnes... It still go in 3 rows when scaled down...

    :=)

  21. ElectricFeet
    Member
    Posted 5 months ago #

    Collapsing onto 3 rows when the screen is small is responsive. Otherwise, it would be too small/difficult to select/see on a telephone.

  22. dt125x
    Member
    Posted 5 months ago #

    Yes of course... How can I set margins to 0 that there is no space between when it is on small screen ?

  23. d4z_c0nf
    Member
    Posted 5 months ago #

    @ElectricFeet it's just about someone doesn't take someone else advices.

    @dt125x
    This is a result applying the last css code I pasted to your site (using a firefox add-on to change css live): http://tinypic.com/r/35hiiig/8

  24. dt125x
    Member
    Posted 5 months ago #

    So you did this with code below ? I will try harder but it seems to me that I am changing just width of boxes but I can not fix it that it has no margin between each other when scaled down...

    @media (max-width: 767px){
    .tc-header .wpcf7 .row-fluid [class*="span"]{
    float:left;
    }
    .tc-header .wpcf7 .row-fluid [class*="span"]:first-child{
    margin-left:1%;
    }
    .tc-header .wpcf7 .row-fluid .span5{
    width:35%;
    }
    .tc-header .wpcf7 .row-fluid .span7{
    width:62%;
    }
    .tc-header .wpcf7 .row-fluid .span8{
    width: 80%;
    }
    .tc-header .wpcf7 .row-fluid .span4{
    width: 18%;
    }
    }

  25. d4z_c0nf
    Member
    Posted 5 months ago #

    This of course scales the width, in order to have fields in one row also for mobile, which was your request.
    Then you can fine tuning width, and also margins. It's just about css.

  26. dt125x
    Member
    Posted 5 months ago #

    I tryed it with this code but max I could do is this : http://www.apartmentsinmakarska.net/

    There is always same point of responsivnes hehe

  27. d4z_c0nf
    Member
    Posted 5 months ago #

    Look at here:
    http://www.apartmentsinmakarska.net/?sccss=1&ver=3.8.1

    you can see those " ? Shouldn't be there, so the first two rules aren't working. A parsing problem with the plug-in you're using to put custom css? Don't know.
    Why don't you use the style.css in your child theme, since you have a child theme?
    http://www.apartmentsinmakarska.net/wp-content/themes/customizr-child-theme/style.css?ver=3.1.6
    put your custom css just, and only, in that file.

    p.s.
    customizr takes care of calling child theme style.css, so you don't need that @import url("../customizr/style.css"); at all. I know you don't write that, it's generated by this plugin .

  28. d4z_c0nf
    Member
    Posted 5 months ago #

    Ah, another thing, I gave you the snippet written by rdellconsulting about media queries, to give you the possibility to understand them and make your own rules, which says:

    ADD SELECTIONS OF THIS CODE AT THE END AFTER THE BASE CSS.

    So, always put media queries (in this case, the css I gave you before) at the bottom of your custom css (just to make it simple).

  29. Tejas -The WordPress Chef
    Member
    Posted 5 months ago #

    Hi,

    Below mentioned code will hopefully solve your purpose. Copy and paste it into "New Contact Form"

    <div style="float: left;width: 36%;margin-right:10px;">Your Email (required)
    [email* email]
    </div>
    <div style="float: left;width: 36%;margin-right:10px;">Your Message
    [text message]
    </div>
    <div style="float: left;width: 20%;margin-top:24px;">[submit "Send"]</div>

    Live demo can be seen on my site :

    http://www.tgwebco.com/demo/

    Please let me know if this worked for you or if there is anything else I can be of help to you

    Cheers :)

    Tejas

  30. dt125x
    Member
    Posted 5 months ago #

    My friend you are miracle !!!!!!
    Thank you so much ;)

    It looks so easy hehehe but it's not :P

    P.S. If you can solve the slider problem it would be great... But I think it is PHP problem... You can try... :)

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.