• Resolved janiwalkabout

    (@janiwalkabout)


    Hi,

    How do I align the form fields so that they Email field and the button are in line underneath each other? Also, can the form be adjusted to be slightly smaller? Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Lap

    (@lapzor)

    If you use our Premium add-on you can do all that via our style builder.
    It’s under MC4WP > Forms > (your form) > Appearance > Open style builder.

    Don’t forget to also set the form style to “Use style builder”.

    You can contact Premium support with the red help button on the right bottom of the screen in any of the plugin’s settings for more support on this.

    If you use our free version the styling depends on your WordPress theme and you can further change the styles by writing your own CSS code. Writing that code for you is out of scope for our free support. In this case you would want to write CSS code to set the form labels to a standard width, and increase the width of the input fields and button a bit.

    What you could do, in our case, is remove the field labels, and instead set field placeholders. So the placeholder for the email field is “your email” and so on, that would line everything up properly.

    Kind regards,

    Thread Starter janiwalkabout

    (@janiwalkabout)

    @lapzor Thank you for your reply. I appreciate your last suggestion, can you clarify for the following example, what exactly you mean? I am not familiar with CSS:

    <p>
    
        <label>First Name</label>
    
        <input type="text" name="FNAME">
    
    </p>
    
    <p>
    
        <label>Last Name</label>
    
        <input type="text" name="LNAME">
    
    </p>
    
    <p>
    
    <label>Email</label>
    
    <input type="email" name="EMAIL" placeholder="" required />
    
    </p>
    
    <p>
    
    <input type="submit" value="Register" />
    
    </p>
    Plugin Contributor Lap

    (@lapzor)

    <p>
        <input type="text" name="FNAME" placeholder="First Name">
    
    </p>
    
    <p>
        <input type="text" name="LNAME" placeholder="Last Name">
    
    </p>
    
    <p>
    
    <input type="email" name="EMAIL" placeholder="Email" required />
    
    </p>
    
    <p>
    
    <input type="submit" value="Register" />
    
    </p>

    Of course you could also re-insert the fields with the buttons above the form builder, and then set it to no field label and fill the placeholders in that screen.

    Thread Starter janiwalkabout

    (@janiwalkabout)

    @lapzor Thank you! That was easy ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to align form fields’ is closed to new replies.