WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Wierd looking contact form (23 posts)

  1. eriohm
    Member
    Posted 2 years ago #

    Well, look at the picture I link to and you will understand.

    Why does it look like this?

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    A screenshot is of no use. What might help is a link to a page demonstrating the problem and a reasonably detailed description of the issue.

  3. eriohm
    Member
    Posted 2 years ago #

    I'm sorry, but my site is private at the moment and don't want to let anyone in. But I know it should look like this (screen shot taken from a WP.com blog), but it doesn't any more.

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    I'm sorry but it is impossible to troubleshoot anything from a screenshot.

  5. eriohm
    Member
    Posted 2 years ago #

    Here you have the code:

    <div id='contact-form-1075'>
    <form action='http://www.eriohm.se/kontakta/#contact-form-1075' method='post' class='contact-form commentsblock'>
    
    <div>
    		<label for='1075-namn' class='grunion-field-label name'>Namn<span>(måste anges)</span></label>
    		<input type='text' name='1075-namn' id='1075-namn' value='eriohm' class='name'/>
    	</div>
    
    <div>
    		<label for='1075-e-post' class='grunion-field-label email'>E-post<span>(måste anges)</span></label>
    		<input type='email' name='1075-e-post' id='1075-e-post' value='' class='email' />
    	</div>
    
    <div>
    		<label for='1075-hemsida' class='grunion-field-label url'>Hemsida</label>
    		<input type='text' name='1075-hemsida' id='1075-hemsida' value='' class='url'/>
    	</div>
    
    <div>
    		<label for='contact-form-comment-1075-meddelande' class='grunion-field-label textarea'>Meddelande<span>(måste anges)</span></label>
    		<textarea name='1075-meddelande' id='contact-form-comment-1075-meddelande' rows='20'></textarea>
    	</div>
    	<p class='contact-submit'>
    		<input type='submit' value='Skicka »' class='pushbutton-wide'/>
    		<input type="hidden" id="_wpnonce" name="_wpnonce" value="29a587fda0" /><input type="hidden" name="_wp_http_referer" value="/kontakta/" />
    		<input type='hidden' name='contact-form-id' value='1075' />
    		<input type='hidden' name='action' value='grunion-contact-form' />
    	</p>
    </form>
    </div>
  6. esmi
    Forum Moderator
    Posted 2 years ago #

    That's of no use at all. This is a CSS issue. Either you let us see the page on the site or you will need to troubleshoot it yourself. If so, try using Firefox with the Firebug add-on for this kind of work.
    http://getfirebug.com/

  7. eriohm
    Member
    Posted 2 years ago #

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    We cannot see the site. It's behind a login.

  9. Andrew
    Forum moderator
    Posted 2 years ago #

    You could post us a link to PasteBin pages, that contain the HTML and CSS of the problematic webpage.

  10. eriohm
    Member
    Posted 2 years ago #

    Try the link again.

  11. Andrew
    Forum moderator
    Posted 2 years ago #

    In the Custom CSS section of the dashboard, enter this;

    .grunion-field-label {
     width: 200px;
     display: block;
     float: left;
    }
  12. eriohm
    Member
    Posted 2 years ago #

    Done, but that did not made it.

  13. Andrew
    Forum moderator
    Posted 2 years ago #

    Did you see any change? If not, clear your browser cache.

  14. eriohm
    Member
    Posted 2 years ago #

    I did see a change, but it still don't look like it used to or how it looks on WP.com.

  15. Andrew
    Forum moderator
    Posted 2 years ago #

    Can you provide a link to your expectations?

  16. eriohm
    Member
    Posted 2 years ago #

    It should look like this: http://negohm.wordpress.com/kontakta/

  17. Andrew
    Forum moderator
    Posted 2 years ago #

    Instead of the code I recommended, try this;

    .grunion-field-label {
     display: block;
    }
  18. Andrew
    Forum moderator
    Posted 2 years ago #

    For the input fields, try this;

    .contact-form input {
     width: 300px;
    }
    
    .contact-form textarea {
     width: 500px;
    }
  19. eriohm
    Member
    Posted 2 years ago #

    Better, but still the input fields, the textarea, the bold style and the grey text is missing.

  20. Andrew
    Forum moderator
    Posted 2 years ago #

    Are you familiar with CSS?

  21. eriohm
    Member
    Posted 2 years ago #

    Yes, I'am.

  22. eriohm
    Member
    Posted 2 years ago #

    The question is why the contact form style is missing now. Worked before.

  23. eriohm
    Member
    Posted 2 years ago #

    I fixed it myself, and this is the code I ended up with:

    .grunion-field-label {
    	display: block;
    }
    
    .contact-form input {
    	width: 300px;
    	margin: 3px 0 13px;
    }
    
    .contact-form textarea {
    	width: 513px;
    	height: 214px;
    	margin: 3px 0 13px;
    }
    
    .contact-form label {
    	font-weight: bold;
    }
    
    .contact-form span {
    	font-weight: normal;
    	color: #AAAAAA;
    	margin-left: 4px;
    }
    
    .contact-form .pushbutton-wide {
    	width: 68px;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.