Contact Form Styling - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
October 4, 2014 at 5:35 pm #330243

D5WDesignGroup
Participant

I am trying to create a very thin contact bar with just one field. I would like to be able to have the submit button in line with the field (to the right of the field) and to be able to show the title of the field within the field instead of above.

Thank You.

October 6, 2014 at 12:22 pm #330811

Yigit
Keymaster

Hey D5WDesignGroup!

Can you firstly create the contact form and then post the link to your page where we can see the element so we can provide you accurate custom CSS code?

Cheers!
Yigit

October 6, 2014 at 4:28 pm #330971

D5WDesignGroup
Participant

This reply has been marked as private.

October 6, 2014 at 7:36 pm #331112

D5WDesignGroup
Participant

This reply has been marked as private.

October 7, 2014 at 7:55 pm #331861

D5WDesignGroup
Participant

This reply has been marked as private.

October 7, 2014 at 8:36 pm #331878
Josue
Inactive Moderator
Hi!

Try with this code (Quick CSS):
```
.avia_ajax_form .first_form {
    clear: none;
    width: 48%;
    margin-right: 2%;
}
.avia_ajax_form p:last-child {
    clear: none;
    float: left;
    width: 50%;
    position: relative;
    top: 24px;
}
```
I’d suggest using a custom class in this case so it doesn’t affect other forms in the page.

Regards,
Josue
- This reply was modified 10 years, 1 month ago by Josue.
October 7, 2014 at 9:19 pm #331899

D5WDesignGroup
Participant

Thank you, that worked to place the Submit button next to the form field but how do I move the field title inside of the field instead of above?

October 7, 2014 at 10:23 pm #331927
Josue
Inactive Moderator
Hi!

You’d need to edit /enfold/framework/php/class-form-generator.php, look for this lines:
```
			$form_el = ' <input name="'.$id.'" class="text_input '.$element_class.'" type="'.$type.'" id="'.$id.'" value="'.$value.'"/>';
			$label = '<label for="'.$id.'">'.$element['label'].$required.'</label>';
```
Change them to:
```
			$form_el = ' <input name="'.$id.'" class="text_input '.$element_class.'" type="'.$type.'" id="'.$id.'" value="'.$value.'" placeholder="'.$element['label'].'" />';
			//$label = '<label for="'.$id.'">'.$element['label'].$required.'</label>';
```
Best regards,
Josue
October 7, 2014 at 10:32 pm #331929

D5WDesignGroup
Participant

That worked but it has thrown off the alignment of the form field and the submit button.

October 7, 2014 at 10:47 pm #331938

Josue
Inactive Moderator

It’s fixed now, i edited your Quick CSS.

Cheers!
Josue

October 7, 2014 at 11:10 pm #331945

D5WDesignGroup
Participant

Thank you very much! When you get a chance can you take a look at that same page. I have added another form field toward the top of the page using Ninja Forms. It may allow us to customize the fields more easily but there appears to be an issue removing the additional space below the form elements. Any tips on how to get the spacing closer to the way it is in the lower Color Section?

October 7, 2014 at 11:36 pm #331957
Josue
Inactive Moderator
Color sections get a minimum height of 100px by default, i’d suggest setting a custom ID to that color section and adding this to Quick CSS:
```
#section {
    min-height: initial !important;
}
```
Regards,
Josue
October 7, 2014 at 11:58 pm #331963

D5WDesignGroup
Participant

Thank You.

October 8, 2014 at 12:10 am #331967

Josue
Inactive Moderator

You are welcome, glad to help :)

Regards,
Josue
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Contact Form Styling’ is closed to new replies.