CAPTCHA formatting

9 posts from 2 voices

• Started 1 year ago by dodonnell73
• Latest reply from Dude
• This topic is resolved

Tags:

• Broadscope
• CAPTCHA
• contact form 7

1. 

   dodonnell73
   Member

   Hi,

   I know this may be out of the scope of support, but I have a styling question related to the Broadscope theme.

   I am using Contact Form 7, and am including the Really Simple CAPTCHA plugin.

   I can't for the life of me put the CAPTCHA image and verification text box on one line. I have looked through examples of how to do it, and I think it is something to do with the Broadscope theme that is splitting them.

   This is what I am doing in the form:

   <p>Verify the 4 letters displayed (spam blocker)<br />
       [captchac size:l captcha-957] [captchar captcha-957 4/4 class:text_input] </p>

   You can see an example of the page here:

   http://tipoule.com/?page_id=401

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   add following code to css/custom.css:
   

   .wpcf7-captcha-size:l{
   display inline;
   margin: 3px 10px 0 0;
   }

   Posted 1 year ago #
3. 

   dodonnell73
   Member

   Hi dude,

   I was starting to wonder whether you ever sleep :-)

   I made the change, but unfortunately it didn't seem to make any difference:

   The HTML produced is:

   <p>Verify the 4 letters displayed (spam blocker)<br />
       <input type="hidden" name="_wpcf7_captcha_challenge_size:l" value="690998362" /><img alt="captcha" src="http://tipoule.com/wp-content/uploads/wpcf7_captcha/690998362.png" class="wpcf7-captcha-size:l" width="72" height="24" /> <span class="wpcf7-form-control-wrap captcha-957"><input type="text" name="captcha-957" value="" class="text_input" size="4" maxlength="4" /></span> </p>
   <p><input type="submit" value="Submit" class="wpcf7-submit button" /><img class="ajax-loader" style="visibility: hidden;" alt="Sending ..." src="http://tipoule.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>

   Does it have anything to do with the span:

   <span class="wpcf7-form-control-wrap captcha-957">

   Posted 1 year ago #
4. 

   Dude
   Dude

   Mmm...ok then try to add following code to css/custom.css:
   

   .wpcf7 img{
   display: inline;
   margin: 3px 10px 0 0;
   }

   Posted 1 year ago #
5. 

   dodonnell73
   Member

   Still no change I'm sorry to say.

   Posted 1 year ago #
6. 

   Dude
   Dude

   Small typo - please try it again - now it should work :)

   Posted 1 year ago #
7. 

   dodonnell73
   Member

   Sorry dude - I've been looking really hard. What's the type? It looks fine.

   Posted 1 year ago #
8. 

   dodonnell73
   Member

   I found it...

   The original was missing the colons after display. I was going through the CSS inspector and arrived at the same conclusion so that's what made me see it.

   Now I have to line the image up nicely with the input box, but that shouldn't be too hard.

   Thanks Dude.

   Dave

   Posted 1 year ago #
9. 

   Dude
   Dude

   Before it was:
   

   .wpcf7 img{
   display inline;
   margin: 3px 10px 0 0;
   }

   and now it's
   

   .wpcf7 img{
   display: inline;
   margin: 3px 10px 0 0;
   }

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.