how to edit contact form

  • Author
    Posts
  • #1149857

    9thartwave
    Member

    hello, in my contact form I would like all titles and boxes to be aligned on the right. the comment box is not (the comment title is ok). shall i just use a bigger image? or shall i change something in the code?

    The blog I need help with is 9thwavegallery.wordpress.com.

    #1150071

    9thartwave
    Member

    any help?

    #1150073

    Hi,

    If you want the right edge of your comment box to line up with the right edge of the other boxes, try this CSS code:

    .contact-form textarea {margin-left: 55px;}

    If you do that and you want the Submit button on the right as well, try this CSS code:
    .contact-submit {margin-left: 690px;}

    I hope this helps.

    #1150077

    9thartwave
    Member

    thanks, but where exactly shall i paste it? below is the code i use

    <div class=”pullquote”>
    <h3 style=”text-align:center;”>΄΄ every act of creation is first an act of destruction… ΄΄ P. Picasso</h3>
    <ul style=”margin-top:-2rem;”>
    </div>
    <p class=”pullquote”><img class=”alignleft wp-image-390″ alt=”contact” src=”http://9thwavegallery.files.wordpress.com/2013/02/contact1.jpg?w=860″ width=”418″ height=”222″ />[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Website' type='url'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]</p>

    #1150078

    raincoaster
    Member

    You need to put that code in your CSS. Do you have the Custom Design Upgrade? If you don’t, you won’t be able to do this.

    #1150079

    9thartwave
    Member

    done, thanks

    any way to make the comments box smaller in order to align right and left with the other boxes?

    #1150115

    9thartwave
    Member

    ???

    #1150125

    Could you please link to the contact form you’re working on?

    #1150134

    9thartwave
    Member
    #1150136

    Here are some examples to get you going:

    To align the labels and the boxes to the right:

    .main-content .contact-form label {
    	text-align: right;
    	clear: both;
    }
    .main-content .contact-form input[type='text'],
    .main-content .contact-form input[type='email'],
    .main-content .contact-form textarea,
    .main-content .contact-form input[type="submit"] {
    	float: right;
    }

    To align the labels and submit button to the right and make the form elements wider:

    .main-content .contact-form label {
    	text-align: right;
    }
    .main-content .contact-form input[type='text'],
    .main-content .contact-form input[type='email'],
    .main-content .contact-form textarea {
    	width: 97% !important;
    }
    .main-content .contact-form input[type="submit"] {
    	float: right;
    }

    To adjust the container element for the contact form:

    .main-content .contact-form {
    	width: 300px;
    	float: right;
    }

    Note: these examples will affect any contact form in a main content area.

The topic ‘how to edit contact form’ is closed to new replies.