How to change error/hint message placement in form layout

Resolved

(@zunichi)

Hello!

Just wondering if there is a way to change where the required field error/hint message is placed in the form layout? Currently, it is automatically being placed inside the div that has the input field. What I want to do is to place it outside that div and the div that has the field label. Here’s a simple illustration of how it looks in my code:

<div id="fscf_div_clear1_1" style="clear:none; margin-bottom: 12px;">
  <div id="fscf_div_field1_1" style="clear:none;">

    <---Where I want the ERROR message to be

    <div style="text-align:left;">     <---DIV that has field LABEL
      <label class="form-label" for="fscf_email1">
        Email:<span style="text-align: left;">*</span>
      </label>
    </div>

    <div style="text-align:left;">     <---DIV that has the INPUT field
      <div class="form-hint">Required</div>      <---ERROR message
      <input class="form-box" type="text" id="fscf_email1" name="email" value=""/>
    </div>

  </div>
</div>

I’m fairly new to WordPress (especially PHP) so I would truly appreciate it if someone can guide me through it. Thanks in advance!

https://wordpress.org/plugins/si-contact-form/

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

mbrsolution
(@mbrsolution)

8 years, 9 months ago

Hi can you share your URL with the contact form.

Thank you

Thread Starter Patrick
(@zunichi)

8 years, 9 months ago

Sure here it is:

http://test.patrickfermin.com/contact/

Just to clarify, I’m using the Fast Secure Contact Form plugin and I’ve already checked the configurations page but I didn’t find any setting that would help. So I figured maybe the only way to do it is to manually edit the plug-in’s code. Unfortunately, it barely made sense to me. So now I’m wondering if someone knows where to look and what to edit to alter the error message’s placement.

mbrsolution
(@mbrsolution)

8 years, 9 months ago

Hi, I just checked the URL you submitted above. Can you create a screen capture pointing where you want the error message to appear? That would help me understand what you are trying to achieve.

Thank you

Thread Starter Patrick
(@zunichi)

8 years, 9 months ago

Here’s a screenshot of how it looks and how I want it to look. Thanks for your time!

LINK

mbrsolution
(@mbrsolution)

8 years, 9 months ago

Okay thank you for sharing. I think your issue is related to your theme. Can you test one of WordPress default themes like Twenty Fifteen?

Thank you

Thread Starter Patrick
(@zunichi)

8 years, 9 months ago

Thanks for the suggestion. The thing is, the issue is that the plug-in was coded to automatically put the error/hint message in a spot inside the div that contains the input field. It’s not a real issue in a sense that it’s a bug or something.

All I want to do is to just alter the plug-in’s code just a bit so that the error message is placed in a div of my own choosing. My problem is I’m not quite sure which PHP file I should open, and in which line the error message code is at so I that can alter it.

Hope you can help me out.

mbrsolution
(@mbrsolution)

8 years, 9 months ago

Hi, if all you want is for the label to appear as you illustrated in the screen capture you added above then all you need to use is CSS style.

I think you are complicating the whole approach. The plugin is designed to be very flexible. Aligning field labels is done using CSS style and classes.

mbrsolution
(@mbrsolution)

8 years, 9 months ago

Hi I just of sharing some light. An example CSS style to look at would be as follow. This would be added to a div tag.

.class name {
position: absolute;
top: 150px;
}

Or instead of top you might use bottom. It depends on how you go about your custom design.

I hope the above puts you on track.

Kind regards

Thread Starter Patrick
(@zunichi)

8 years, 9 months ago

Hi! I actually tried doing that approach before but I wanted the input fields and labels to move as the error messages appear. Another issue too is the top error message (the one that says “Please make corrections..”) covers up the “Tell me about yourself” text if it is positioned absolute.

To be fair, the error messages are actually being placed where I want it. I’m only having issues because my labels are positioned absolute. So when the error messages appear, the input fields go down but the labels don’t go along with it. Hence I was thinking, I should just make the plug-in code to place the error message outside the div that holds both the label and the input fields so it stacks on top of both, instead of just above the input field.

In any case, thank you again for taking the time to help me out. I appreciate it.

mbrsolution
(@mbrsolution)

8 years, 9 months ago

Hi have you tried to set it up as relative instead of absolute?

Thread Starter Patrick
(@zunichi)

8 years, 9 months ago

Yeah, it’s still the same. It’s fine tho, I just went ahead with the position absolute. I managed to understand the plug-in’s code somewhat and figured how to hide the first error message on the top that says “Please make corrections..”. So now at least it’s not covering the top text. Thanks for the help anyways. 🙂

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

The topic ‘How to change error/hint message placement in form layout’ is closed to new replies.

Tags