Recaptcha and Button positioning

  • goldandgreyuk

    (@goldandgreyuk)


    9 years ago

    Hi,
    I’m sorry to bother everyone but I am really struggling with my form to place the Recaptcha at the bottom on the left and next to it on the same line my Submit button.
    Is this possible? I am using the latest version of the plug-in, which is a great plug-in if only I had the knowledge to control positioning lol.

    Amy help would be massively appreciated.

    So I have an incredibly basic form – Title, First, Last, Email, Message, DropDown for where did you hear about us, and the recaptcha and button.

    My site isn’t live yet so I can’t just point to my page.

    Here are some details which may or may not help. Again I apologise but I am a CSS and HTML novice developing code through Google searches!

    I’ve enabled Google reCaptcha v2
    Ive enabled Smaller CAPTCHA as well

    From the FSCF Style Settings tab

    Small CAPTCHA DIV: float:left; width:162px; height:50px; padding-top:5px;
    Large CAPTCHA DIV: float:left; width:362px; height:65px; padding-top:5px;
    CAPTCHA image alignment: border-style:none; margin:0; padding:0px; padding-right:5px; float:left;
    CAPTCHA reload image alignment: border-style:none; margin:0; padding:0px; vertical-align:bottom;
    Submit DIV: padding-left:146px; float:left; clear:left; text-align:left; padding-top:15px;

    Input text field CAPTCHA:text-align:left; margin:0; width:50px;
    Submit button: cursor:pointer; margin:0;

    I have some CSS in my child theme too:

    /* —————— Controlling the Contact form layout ——— */
    div#fscf_label6_7,div#fscf_label6_4,div#fscf_label6_5
    {
    Text-align:left!important;
    padding-left:10px!important;

    }
    input#fscf_field6_4, input#fscf_field6_7,input#fscf_field6_5, input#fscf_email6{
    margin-top:10px!important;
    }

    textarea#fscf_field6_3{
    Font-Size:13px!important;
    }

    /* Adjust the Capture position */
    #fscf_recaptcha6 {
    margin: 0 auto;
    width: 164px;

    /* div#fscf_submit_div6{
    padding-left:0px!important;
    float:left!important;
    }*/
    /* ———— Contact Form Button Config —————*/
    #fscf_submit6 {
    clear: both;
    display: inline-block!important;
    Float:left!important;
    background-color: #a8a8a8!important;
    border: 1px solid white!important;
    border-radius:27px!important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075)!important;
    transition: all 0.23s ease-in-out 0s;
    color: #ffffff!important;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    height: 36px;
    line-height: 32px;
    padding-bottom:0px!important;
    /* text-decoration: none!important;
    vertical-align: top!important;
    white-space: nowrap!important;*/
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter goldandgreyuk

    (@goldandgreyuk)

    9 years ago

    Ok So I made a mistake on my posting, I copied the FSCF styles from the wrong form (duh!). Here is the CORRECT code that Im struggling with:

    Small CAPTCHA DIV:width:175px; height:35px; padding-top:2px;
    Large CAPTCHA DIV:margin-left:50px;width:250px; height:65px; padding-top:2px;class=”capbig”
    CAPTCHA image alignment:margin-left:50px;border-style:none; margin:0; padding:0px; padding-right:5px; float:left;class=”capimage”
    CAPTCHA reload image alignment:margin-left:50px;border-style:none; margin:0; padding:0px; vertical-align:bottom;class=”capreload”
    Submit DIV:padding-left:0px; float:left; clear:left; text-align:center; padding-top:15px ;display: inline-block;

    Input text field CAPTCHA:text-align:left; padding-left:0px; width:50px;
    Submit button:cursor:pointer; border solid; border-radius:27px;height 100px;text-color:#ffffff;margin-left:auto;margin-right:auto;display:inline-block;float:left;

    I have some CSS in my child theme too:

    /* —————— Controlling the Contact form layout ——— */
    div#fscf_label6_7,div#fscf_label6_4,div#fscf_label6_5
    {
    Text-align:left!important;
    padding-left:10px!important;

    }
    input#fscf_field6_4, input#fscf_field6_7,input#fscf_field6_5, input#fscf_email6{
    margin-top:10px!important;
    }

    textarea#fscf_field6_3{
    Font-Size:13px!important;
    }

    /* Adjust the Capture position */
    #fscf_recaptcha6 {
    margin: 0 auto;
    width: 164px;

    /* div#fscf_submit_div6{
    padding-left:0px!important;
    float:left!important;
    }*/
    /* ———— Contact Form Button Config —————*/
    #fscf_submit6 {
    clear: both;
    display: inline-block!important;
    Float:left!important;
    background-color: #a8a8a8!important;
    border: 1px solid white!important;
    border-radius:27px!important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075)!important;
    transition: all 0.23s ease-in-out 0s;
    color: #ffffff!important;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    height: 36px;
    line-height: 32px;
    padding-bottom:0px!important;
    /* text-decoration: none!important;
    vertical-align: top!important;
    white-space: nowrap!important;*/
    }

    mbrsolution

    (@mbrsolution)

    9 years ago

    Hi, can you share the URL to your form.

    Thank you

    Thread Starter goldandgreyuk

    (@goldandgreyuk)

    9 years ago

    Thanks for being interested to take a look. I have opened up the website but remember Im a beginner and the site is not finished but just running ideas at the moment:
    https://goldandgrey.uk/contact/

    All the best,
    Simon

    mbrsolution

    (@mbrsolution)

    9 years ago

    Hi Simon, I noticed that you have created a two column form. What steps did you take to create your two column form? You might also like to read the following instructions.

    Thread Starter goldandgreyuk

    (@goldandgreyuk)

    9 years ago

    Thanks for the link, That is exactly what I followed. Simply so I could put my fields next to each other, no other reason.
    I now just need to get the recaptcha and button lined up
    😎
    Thanks,
    Simon

    mbrsolution

    (@mbrsolution)

    9 years ago

    The problem you currently face is related to your theme. Can you test one of WordPress default themes like Twenty Fifteen or Sixteen. Remember you can test any number of themes on the back-end without affecting your website.

    Let me know what happens.

    Regards

    Thread Starter goldandgreyuk

    (@goldandgreyuk)

    9 years ago

    Hi, I suspect my problem relates more to my ignorance lol
    I just read that if I swap my theme I might lose my settings etc. I do have a backup but its a big step for me. Are you suggesting that the configuration I have is correct and the theme is interfering with it? That if I was on another theme they would be positioned correctly?
    Sorry if my questions appear stupid,
    Thanks,
    Simon

    mbrsolution

    (@mbrsolution)

    9 years ago

    Hi Simmon, yes I believe your theme is causing this issue. I have tested this on numerous themes and in my testing platform and it works really well with themes that follow WordPress standards. You can read more about testing your theme from the following URL. Remember live preview is not installing the theme.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Recaptcha and Button positioning’ is closed to new replies.